Ad
Jquery Sorting Table After Ajax Response
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
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad