Question

There are two links for sorting, SortName, SortDate. When using jquery load to load table ($(‘table.listing’).load…) then it works. When using $(‘form’).load… then it doesn’t work. Why is that?

Code below works, but if you change ‘table.listing’ to ‘form’ it doesn’t work. Problem is because links should load also, and they are in div above table, so I need to use ‘form’ or some div, although div wrapper also doesn’t work.

What means it don’t work: if you use ‘form’ you need to click links TWICE for container to load!?

<form method="post">
<div>
    <a href="" id="sortn">SortName</a><br/>
    <a href="" id="sortd">SortDate</a>
</div>
<table class="listing">
    ...table code here
</table>
</form>

<script type="text/javascript">
$(document).ready(function(){
    $('a#sortn').click(function(event) {
        event.preventDefault();
        $('table.listing').load('index.php?sort=1 table.listing');
    });
    $('a#sortd').click(function(event) {
        event.preventDefault();
        $('table.listing').load('index.php?sort=2 table.listing');
    });
});
</script>

Answer 1

I’m not sure why loading on a form doesn’t work, but I wouldn’t do that. You should wrap your form in a div and then load everything into there. You’ll need to re-bind your click action after it loads too. What doesn’t work about wrapping it in a div?

edit: Re-binding links after load completes:

<script type="text/javascript">

    function doLoad(sort){
        //if you switch to the div method, obvously the selector needs to change
        var selector = "table.listing";
        //var selector = "#newDivId";

        $(selector).load('index.php?sort='+sort+' '+selector, function(){
            doBindings();
        });
    }

    function doBindings(){
        $('a#sortn').unbind('click');
        $('a#sortd').unbind('click');
        $('a#sortn').click(function(event) {
            event.preventDefault();
            doLoad(1);
        });
        $('a#sortd').click(function(event) {
            event.preventDefault();
            doLoad(2);
        });
    }


$(document).ready(function(){
    doBindings();
});
</script>