Ad

Jquery Sorting Table After Ajax Response

- 1 answer

I have this small project to get multiple Alexa rank of each website.

I am trying to sort a table using jquery.tablesorter.js however it is not working, because I am sending ajax request for every URL then displaying it.

this is my jquery and ajax request :

<script> 
$(document).ready(function(){

    $('#btnurls').click(function(){
        $('#loadingmessage').show();
        var arrayOfLines = $('#websiteurls').val().split('\n');

        $.each(arrayOfLines, function(index, item) {
                $.ajax({
                type: "POST",
                url: "ajax_pages/ajax_alexa.php",
                data: "textposted=" + item,
                cache: false,
                success: function(html){
                            $('#loadingmessage').hide();
                            for (var i = 1; i <= 1; i++) {                   
                                $("#content table").delay(1000)
                                    .queue(function (nxt) {
                                   $(this).append(html);                              
                                    nxt();
                                }); 
                            }
                            $("#websiteurls").val("");
                    }
                });

        });
    });

$("#textarea_reset").click(function(){
    $("#websiteurls").val("");
});

});
</script>

alexa_rank.php

<?php $line = $_POST['textposted'];?>
<tr>
<td><?php if (!filter_var($line, FILTER_VALIDATE_URL) === false) {echo $line;} else {echo "$line";}?></td>
<td>
<?php

         $xml  = simplexml_load_file('http://data.alexa.com/data?cli=10&dat=snbamz&url='.$line);
     $rank = isset($xml->SD[1]->POPULARITY)?$xml->SD[1]->POPULARITY->attributes()->TEXT:0;
     $country_rank=isset($xml->SD[1]->COUNTRY)?$xml->SD[1]->COUNTRY->attributes()->RANK:0;
     $country_name=isset($xml->SD[1]->COUNTRY)?$xml->SD[1]->COUNTRY->attributes()->NAME:0;
     echo $rank;
?>
</td>
<td><?php echo $country_rank; ?></td>
<td><?php echo $country_name; ?></td>
</tr>

live test https://www.bulkalexarankchecker.com/

Ad

Answer

Based on the example AJAX provided with jQuery tablesorter you need to trigger the update event on the table when the data is updated. It would probably be something like:

$.each(arrayOfLines, function (index, item) {
    $.ajax({
        type: "POST",
        url: "ajax_pages/ajax_alexa.php",
        data: "textposted=" + item,
        cache: false,
        success: function (html) {
            $('#loadingmessage').hide();
            for (var i = 1; i <= 1; i++) {
                $("#content table").delay(1000)
                        .queue(function (nxt) {
                            $(this).append(html);
                            $(this).trigger("update");
                            nxt();
                        });
            }
            $("#websiteurls").val("");
        }
    });

});

Ideally you'd wait until all the data is fetched but you've made no provision for such an event with the current code so this would probably work equally well.

Ad
source: stackoverflow.com
Ad