jquery ajax load problem with links

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>

This is incorrect: $('table.listing').load('index.php?sort=1 table.listing'); i am unsure what you are doing — Naftali
– Naftali, Commented May 9, 2011 at 14:13
i'm loading part of the page into itself, with load method. is ?sort=1 problem? — Marko
– Marko, Commented May 9, 2011 at 14:15
jquery allows you to use a selector on the document returned via ajax calls — Andy Groff
– Andy Groff, Commented May 9, 2011 at 14:19
page has that table, and i want to load / refresh only that part of page... that table.listing is part of page load will use to load into... like $('#result').load('ajax/test.html #container'); [from jquery site] — Marko
– Marko, Commented May 9, 2011 at 14:19

Andy Groff · Accepted Answer · 2011-05-09 15:14:21Z

2

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>

edited May 9, 2011 at 15:14

answered May 9, 2011 at 14:18

Andy Groff

2,6701 gold badge21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Marko Over a year ago

maybe that - re-bind links. How to do that?

Andy Groff Over a year ago

updated. Not sure if thats what will fix it. Why are you needing to reload the links? Do they change? If not, you might consider not loading them.

Marko Over a year ago

Tried it, it works couple of times, then it get fast/glitchy... Those links change so it would be good to load them, but if I don't find the solution, header will be static... Thank you, I'll try your code more

Andy Groff Over a year ago

Fast/glitchy? Sounds like multiple events are being bound. Maybe if you unbind before rebind? But then that seems illogical that they need to re-bound at all. Anyways, i'll try updating this code.

Marko Over a year ago

Great! It works! My mistake, my original code was larger so I made an abstract here, and didn't convert it properly first time. It looks like it works, thank you man!

Robson França · Accepted Answer · 2011-05-09 14:21:54Z

1

$.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(...)

answered May 9, 2011 at 14:21

Robson França

6618 silver badges15 bronze badges

1 Comment

Marko Over a year ago

great suggestions, I will incorporate them... on this problem, it seems that it's about links which are loaded and then needs to be rebinded

Collectives™ on Stack Overflow

jquery ajax load problem with links

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related