CODEWITHSUNDEEP
jqueryload
Marko
Marko

Reputation: 213

jquery ajax load problem with links

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>

Upvotes: 3

Views: 952

Answers (2)

Andy Groff
Andy Groff

Reputation: 2670

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>

Upvotes: 2

Robson Fran&#231;a
Robson Fran&#231;a

Reputation: 661

$.load syntax is:

$(<selector>).load(url, formData, function(response, status));

The selector above is where the page loaded from the url will be rendered (the target). Both formData and the callback function are optional. If you need to pass the form data to your backend application, you can use:

$(<selector>).load(url,$("#formid").serialize());

I could be wrong, but the url you are using (index.php?sort=1 table.listing) might be incorrect.

One final note: in order to speed up the page processing, use id's instead of classes. In your example:

<table class="listing" id="data">
....

and in Javascript:

$("#data").load(...)

Upvotes: 1

Related Questions