jQuery refreshing specific div

Question

So I have a sortable li list that has a series of pages displayed.

When I sort them, my jQuery code calls a php page that updates the order of my pages in the database.

On the same page as the list, it displays the pages in the order they are in but I want to be able to auto update this order right after my database is updated without actually refreshing the page.

So basically, secretly "refresh" the pageContainer div.

What is the best way to do this?

<div id="pageContainer">
   <!-- include() a series of pages in the right order from database -->
</div>

 $("#pageContainer").sortable({
    stop : function(event, ui){
        var postData = $(this).sortable('serialize');
        var url = "saveOrder.php";
        $.ajax({
            type: "POST",
            url: url,
            data: postData,
            success: function(data) { $('#pageContainer').html(data);  }
        });
    }
});

EDIT So a simple $('#pageContainer').html(data); did the trick but my $('form').on('input propertychange change') stopped working. The fix is on this page if anyone wants to look.

Jobin · Answer 1 · 2013-11-20T02:56:59.053

2

Create your sorted content on the php page just add that result to proper div.

so basically..

$("#pageContainer").sortable({
    stop : function(event, ui){
        var postData = $(this).sortable('serialize');
        var url = "saveOrder.php";
        $.ajax({
            url: url,
            data: postData,
            success: function(data) {  
            jQuery("#pageContainer").html(data);}
        });
    }
});

edited Nov 20 '13 at 02:56

answered Nov 20 '13 at 02:45

Jobin

8,238
1
33
52

This is a great example, but I have a form in the data and my jquery `$('form').on('input propertychange change', function()` stops working. Any ideas? – bryan Nov 20 '13 at 03:17
which version of jquery its 1.9+ ? any erros on the console.? – Jobin Nov 20 '13 at 03:40
1.9+, no errors in console. I have a log every time it calls the form and it completely stops calling it once I sort and refresh the html – bryan Nov 20 '13 at 03:44
try this , $('form input').on('propertychange', function(){}) also this may help http://stackoverflow.com/questions/6488171/catch-only-keypresses-that-change-input – Jobin Nov 20 '13 at 03:49
I know how to use it but it only works Before I update the HTML not after – bryan Nov 20 '13 at 03:51

Cᴏʀʏ · Answer 2 · 2013-11-20T02:53:23.690

If you echo out the HTML you want in your saveOrder.php page, then the rest is simple:

$.ajax({
    type: "POST",
    url: url,
    data: postData,
    contentType: 'html',
    success: function(data) { 
        $('#pageContainer').html(data);
    }
});

Depending on your version of jQuery (v1.5+), you may wish to take advantage of the jQuery Promise that $.ajax returns. Your code would change to:

$.ajax({
    type: "POST",
    url: url,
    data: postData,
    contentType: 'html'
}).done(function(data) {
    $('#pageContainer').html(data);
});

This allows you to chain callbacks and keeps your setup separate from your callback functions. For example, you could do this:

...
}).done(function(data) {
    $('#pageContainer').html(data);
}).fail(function() {
    alert('failed :(');
}).always(function() {
    alert('done!');
});

This is a great example, but I have a form in the data and my jquery `$('form').on('input propertychange change', function()` stops working, any ideas? — bryan, Nov 20 '13 at 03:17

score 1 · Answer 3 · answered Nov 20 '13 at 02:46

1

you would have your ajax call return html like

dataType: 'html'

Then in your success function you would do

$('#pageContainer').html(data);

answered Nov 20 '13 at 02:46

Jacob

920
6
19

score 0 · Answer 4 · answered Nov 20 '13 at 15:36

0

How about use "delegate" instead of "on"?

$('#pageContainer').delegate('form', 'input propertychange change', function(){...;})

answered Nov 20 '13 at 15:36

hm_ngr

181
5

jQuery refreshing specific div

4 Answers4