issue regarding PHP, Jquery and Ajax. - php

Question

I have an issue at the moment regarding PHP, Jquery and Ajax.
I have a a div at the bottom of my page that has data in it from a database, now for every iteration of the data a new div is formed, the div has an id of 'pagestatus' and has an auto increment next to it so the id changes for each div like so: 'pagestatus0', 'pagestatus1' etc.
Now I'm not completely new to Jquery as I have used it to make pages more interactive and I've used Ajax to update a MySQL database.
I'm having trouble with the code though, I would like it go something like this:
Button is clicked in div
Button fades in (or div, which ever is easier)
A hidden div with a loading gif appears underneath
Ajax calls to the php file to make changes to the database
jquery then fades the loading gif back out and fades the button back in
I have wrote some code for it but I think I am going wrong somewhere, could someone see what I am doing wrong and let me know how to fix it.
Here is my Jquery:
$(document).ready(function(){
for(i=0;i<$('#changestatusoff').val();i++){
(function(x){
$('#changestatusoff'+x).click(function(){
$('#changestatusoff'+x).fadeOut('slow',function(){
$('#loadingstatus').fadeIn('slow',function(){
$.ajax
({
type: "POST",
url: '.php',
data: {'changestatusoff': changestatusoff},
success: function(data) {
return data;
},
error: function() {
alert('Error occured');
}
$('#loadingstatus').fadeOut('slow',function(){
$('#changestatusoff'+x).fadeIn('slow',function();
});
});
});
});
});
});
}
})(i);
});
And here is the button in the div:
<input type='button' value='Offline' id='changestatusoff".$count."' style='background: none repeat scroll 0% 0% rgb(0, 118, 188); color: rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); font-weight: bold; cursor: pointer; margin:5px;'/>
Any help is appreciated

Answer 1

As the others mentioned, we have no idea what you are submitting ;-)
Use a class, which means it dosent have to make a new bind for each item, it can do it all at once.
You could do something like:
$(function() {
//set loading
var $loading = $('#loadingstatus');
//on changeStatus click
$('.changeStatus').click( function(e) {
//since we dont have a form, disable default behaviour
e.preventDefault();
//set $this as the item clicked
var $this = $(this);
//fadeIn loading, fadeout the item
$this.fadeOut();
$loading.fadeIn();
//make ajax request
$.ajax
({
type: "POST",
url: 'yourPhpFile.php',
data: {'changestatusoff': $(this).val()},
success: function(data) {
//Do something with data?
$loading.fadeOut();
$this.fadeIn();
},
error: function() {
//Do nothing, and tell an error happened
alert('An error occured');
$loading.fadeOut();
$this.fadeIn();
}
});
});
});

Answer 2

I think you need to check data: {'changestatusoff': changestatusoff} and try changing it to data: {changestatusoff: 'changestatusoff'}

Answer 3

If you want to change loading gif back, then you should put the last two lines:
$('#loadingstatus').fadeOut('slow',function(){
$('#changestatusoff'+x).fadeIn('slow',function();
in completed callback, not after ajax call.
$.ajax
({
type: "POST",
url: '.php',
data: {'changestatusoff': changestatusoff},
success: function(data) {
return data;
},
error: function() {
alert('Error occured');
},
completed: function() {
$('#loadingstatus').fadeOut('slow',function(){
$.('#changestatusoff'+x).fadeIn('slow',function();
}

Answer 4

Try the following
$(function(){
$('#Your_Event_Source').click(function(){
$(this).fadeOut(600);
$('#loadingstatus').fadeIn(600);
$.post('you_file.php',{changestatusoff: 'yourValue'},function(data){
if(data.success == 'yes'){
alert(data.message);
$('#Your_Event_Source').fadeIn(600);
$('#loadingstatus').fadeOut(600);
}else{
alert('failed'+ data.message);
$('#Your_Event_Source').fadeIn(600);
$('#loadingstatus').fadeOut(600);
}
},'json');
});
});
I recommend to use 'success' in php:
$data = array('success'=>'yes','message' => 'your meaasage',...);
echo json_encode($data);