Geek asks and answers

Problem loading jquery ajax with links

There are two sorting links, SortName, SortDate. When using jquery load to load a table ($ ('table.listing'). Load ...) then it works. When using $ ('form'). Load ... then this will not work. Why is this?

The code below works, but if you change "table.listing" to "form", it will not work. The problem is that the links also have to load, and they are in the div above the table, so I need to use a “form” or some kind of div, although the div wrapper also does not work.

Which means that this will not work: if you use the “form”, you need to click the TWICE links to load the container !?

<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>
+3
source share
2 answers

, , . div, . . , div?

edit: :

<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>
+2

$:

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

- , URL-, (). . -, :

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

, URL (index.php? sort = 1 table.listing) .

: , id . :

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

Javascript:

$("#data").load(...)
+1
source

More articles:


All Articles