fnReload() unwanted refresh of entire page
fnReload() unwanted refresh of entire page
smarttracks
Posts: 1Questions: 0Answers: 0
First of all, thanks for a great plugin! I have it working well in several different instances of apps I've created for non-profits.
I'm running into a strange problem on a server-side table example. It's pretty straightforward--create table, allow it to refresh on the server-side with search data from two text boxes on button click. I can see the table in its initial state with no data in the text boxes to filter on. I can enter a value into the text boxes, then sort a field by clicking on the header and the search values will take effect and display the desired results. But if I enter a search value into the boxes and click the submit button, the entire page will refresh and firebug indicates there is no response back from the server-side query. However, if I follow the URL of the failed link to the server side data in a browser, it will display expected results that validate correctly on JsonLint. I'm baffled.
Here's the code:
[code]var pTable = $('#searchsorter').dataTable( { //Call History Table
"aaSorting": [[ 0, "desc" ]],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "view/ajaxDispatcher.php?action=searchProspects",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"bFilter":false,
"bLengthChange": true,
"bPaginate": true,
"bSort": true,
"iDisplayLength": 15,
"bInfo": true,
"aoColumns": [
{ "sTitle": "Action", "sWidth": "5%" , "sClass":"center", "bSort":false},
{ "sTitle": "Name", "sWidth": "15%" , "sClass":"center"},
{ "sTitle": "Title", "sWidth": "15%", "sClass":"center" },
{ "sTitle": "Company", "sWidth": "15%", "sClass":"center" },
{ "sTitle": "City", "sWidth": "15%" , "sClass":"center"},
{ "sTitle": "State", "sWidth": "5%", "sClass":"center" }
],
"fnServerData": function ( sSource, aoData, fnCallback ) {
var name = $('#namesearch').val();
var phone = $('#phonesearch').val();
aoData.push( { "name": "name", "value": name },
{ "name": "phone", "value": phone }
);
$.getJSON( sSource, aoData, function (json) {
fnCallback(json)
} );
}
});
$('#prospectsearchbutton').click(function() {
pTable.fnDraw(false);
});[/code]
And a snippet of the JSON output from the page that says it isn't returning anything:
[code]{
"sEcho": 2,
"iTotalRecords": 7,
"iTotalDisplayRecords": 7,
"aaData": [
[
"Select",
"Mike Smith",
"",
"",
"Denver",
"CO"
]
]
}[/code]
Any assistance is greatly appreciated!
I'm running into a strange problem on a server-side table example. It's pretty straightforward--create table, allow it to refresh on the server-side with search data from two text boxes on button click. I can see the table in its initial state with no data in the text boxes to filter on. I can enter a value into the text boxes, then sort a field by clicking on the header and the search values will take effect and display the desired results. But if I enter a search value into the boxes and click the submit button, the entire page will refresh and firebug indicates there is no response back from the server-side query. However, if I follow the URL of the failed link to the server side data in a browser, it will display expected results that validate correctly on JsonLint. I'm baffled.
Here's the code:
[code]var pTable = $('#searchsorter').dataTable( { //Call History Table
"aaSorting": [[ 0, "desc" ]],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "view/ajaxDispatcher.php?action=searchProspects",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"bFilter":false,
"bLengthChange": true,
"bPaginate": true,
"bSort": true,
"iDisplayLength": 15,
"bInfo": true,
"aoColumns": [
{ "sTitle": "Action", "sWidth": "5%" , "sClass":"center", "bSort":false},
{ "sTitle": "Name", "sWidth": "15%" , "sClass":"center"},
{ "sTitle": "Title", "sWidth": "15%", "sClass":"center" },
{ "sTitle": "Company", "sWidth": "15%", "sClass":"center" },
{ "sTitle": "City", "sWidth": "15%" , "sClass":"center"},
{ "sTitle": "State", "sWidth": "5%", "sClass":"center" }
],
"fnServerData": function ( sSource, aoData, fnCallback ) {
var name = $('#namesearch').val();
var phone = $('#phonesearch').val();
aoData.push( { "name": "name", "value": name },
{ "name": "phone", "value": phone }
);
$.getJSON( sSource, aoData, function (json) {
fnCallback(json)
} );
}
});
$('#prospectsearchbutton').click(function() {
pTable.fnDraw(false);
});[/code]
And a snippet of the JSON output from the page that says it isn't returning anything:
[code]{
"sEcho": 2,
"iTotalRecords": 7,
"iTotalDisplayRecords": 7,
"aaData": [
[
"Select",
"Mike Smith",
"",
"",
"Denver",
"CO"
]
]
}[/code]
Any assistance is greatly appreciated!
This discussion has been closed.