issue regarding PHP, Jquery and Ajax.

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

Where are you setting the changestatusoff variable? And instead of looping over all the IDs, why don't you use a class? — Barmar
– Barmar, Commented Oct 18, 2012 at 9:47
There is a syntax error after "alert('Error occured');} I think there should be a ");" to end ajax function call. — Li-chih Wu
– Li-chih Wu, Commented Oct 18, 2012 at 9:59

Marco Johannesen · Accepted Answer · 2012-10-18 09:52:07Z

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();
            }
        });
    });

});

ankur140290 · Accepted Answer · 2012-10-18 09:47:22Z

0

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

answered Oct 18, 2012 at 9:47

ankur140290

6409 silver badges25 bronze badges

Comments

Li-chih Wu · Accepted Answer · 2012-10-18 10:03:45Z

0

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();
}

answered Oct 18, 2012 at 10:03

Li-chih Wu

1,0921 gold badge12 silver badges20 bronze badges

Comments

Jaswinder Singh Narula · Accepted Answer · 2012-10-18 11:57:30Z

0

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);

edited Oct 18, 2012 at 11:57

answered Oct 18, 2012 at 11:52

Jaswinder Singh Narula

113 bronze badges

Collectives™ on Stack Overflow

issue regarding PHP, Jquery and Ajax.

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related