Ajax Call not working
Ajax Call not working
ajaybhargov
Posts: 9Questions: 0Answers: 0
Hi All,
I am using DataTables1.4.2 + struts for my sample application
var url = "dynamicBannerSubmit.do?methodName=getSpecificTemplateDataElements";
alert(url);
$.getJSON(url,null,function(data){
alert("hello");
});
$("#dataTable").dataTable({
"sAjaxSource": url
});
In the above ex , the json call is working fine. It is hitting the server side component but the dataTable initialization is not hitting the server side component . Any resons for this??
I am using DataTables1.4.2 + struts for my sample application
var url = "dynamicBannerSubmit.do?methodName=getSpecificTemplateDataElements";
alert(url);
$.getJSON(url,null,function(data){
alert("hello");
});
$("#dataTable").dataTable({
"sAjaxSource": url
});
In the above ex , the json call is working fine. It is hitting the server side component but the dataTable initialization is not hitting the server side component . Any resons for this??
This discussion has been closed.
Replies
Sounds odd - it certainly should work - here is a working example:
http://datatables.net/examples/example_ajax_source.html
Have you got the correct formatting for your JSON? The expected formatting is shown in:
http://datatables.net/examples/media/examples_support/json_source.txt
Do you have a link you could post showing the problem?
Thanks,
Allan
I initially do a json call and get my data. The data is as follows :-
{"banners":[{"templateName":"Pay For An Account Number","productName":"Pay","keyword":"Pay","source":"","bannerHeading":"","bannerTitle":"","dataElements":[["1","labelmobile","Enter Mobile Number","","","","1","false","label","1"],["2","mobileNumber","mobileNumber","10","13","","2","false","textbox","1"]]}]}
from this data i do data.banners[0].dataElements to get a 2 dimensional array . I copy this to a variable like,
var jsonString = data.banners[0].dataElements;
Now i initialize the datatable using the below mentioned syntax,
$("#dataTable").dataTable({
"aaData": jsonString
});
This does not work while the below mentioned code works properly
var jsonString = [["1","labelmobile","Enter Mobile Number","","","","1","false","label","1"],["2","mobileNumber","mobileNumber","10","13","","2","false","textbox","1"]];
$("#dataTable").dataTable({
"aaData": jsonString
});
I even tried comparing both the contents by printing it out on the screen. Its exactly the same but one displays while the other does not. Any resons for this?
For your second point... now this is odd! I've just tried them both and they work fine for me (Firefox 3.0). One thing to note is that if you are creating a table dynamically, you need to specify the column information. For example:
[code]
$('#example').dataTable( {
"aaData": jsonString,
"aoColumns": [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
]
} );
[/code]
(you would probably want sTitle etc where I've put null...)
An example:
http://datatables.net/examples/example_dynamic_creation.html
Allan
BannerDataId
DataKey
DataValue
Min Length
Max Length
Data Validation
Display Order
Mandatory
Type
Allan
DynamicBanner.jsp
[code]
BannerDataId
DataKey
DataValue
Min Length
Max Length
Data Validation
Display Order
Mandatory
Type
[/code]
DynamicBanner.js
[code]
$(document).ready(function(){
var methodToBeCalled = "getAllTemplateNames";
$.getJSON("dynamicBannerSubmit.do", {
methodName: methodToBeCalled,
ajax: true
}, function(data){
var options = '';
for (var i = 0; i < data.length; i++) {
if (i == 0) {
options += '' + " " + '';
}
options += '' + data[i].optionDisplay + '';
}
$("#templateName").html(options);
});
$("#templateName").bind("change", function(){
var methodToBeCalled = "getSpecificTemplateData";
$.getJSON("dynamicBannerSubmit.do", {
methodName: methodToBeCalled,
ajax: true
}, function(data){
var jsonString = data.banners[0].dataElements;
alert(jsonString);
$("#dataTable").dataTable({
"aaData": jsonString,
"bSort": false
});
});
});
$("#previewBanner").bind("click", function(){
$("iframe#mchqcontainer1").attr("src", "http://localhost:8080/banners/banners/youtelecom/index.htm");
$("iframe#mchqcontainer1").load(function(){
var dataElements = jJSON.getValues("dataElement", null);
$.each(dataElements, function(i, item){
var selector = "." + item.dataKey;
$("iframe#mchqcontainer1").contents().find(selector).html(item.dataValue);
});
});
});
var formParam = {
target: '#output1', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse
};
$("#dynamicBannerForm").submit(function(){
var dataElementsVar = jJSON.getValues("dataElement", null);
var result = JSON.stringify(dataElementsVar);
var iframeContents = $("iframe#mchqcontainer1").contents().find("html").html();
$("#hiddenDataElements").attr({
value: result
});
$("#hiddenMethodName").attr({
value: 'createBanner'
});
$("#hiddenIframeContents").attr({
value: iframeContents
});
//$(this).ajaxSubmit(formParam);
return true;
});
});
[/code]
(edited by Allan to add syntax highlighting)
One thing that springs out is that DataTables doesn't support being reinitialised - but then I'm not 100% sure that is what is happening in your code - it would be good to see it in action to pin down what is happening...
Allan
var url = "dynamicBannerSubmit.do?methodName=getSpecificTemplateDataElements&bannerId=" + data.banners[0].bannerId + "&currDate=" + new Date();
alert(url);
$('#dynamic').html( '' );
$("#dataTable").dataTable({
"sAjaxSource": url,
"bSort": false,
"aoColumns": [{
"sTitle": "BannerDataId"
}, {
"sTitle": "DataKey"
}, {
"sTitle": "DataValue"
}, {
"sTitle": "Min Length"
}, {
"sTitle": "Max Length"
}, {
"sTitle": "Data Validation"
}, {
"sTitle": "Display Order"
}, {
"sTitle": "Mandatory"
}, {
"sTitle": "Type"
}, {
"sTitle": "BannerId"
}]
});
[/code]
I tried creating a dynamic Table using the code given above. When i first executed it , it showed an error in the console saying that nBody[0] is not found. Later i created an empty tbody element with the table element. After that it is showing me a different error "Columns do not match". When i looked into the code, it is comparing the lenght of aocolumns to the length of tr's within the table element. In the above code i havent created any tr.
How is it working in the ex present in your website? Pls do suggest me.
Do you know any place where i can stick in my application so that you can see it in live?
Having said that - with your latest information I believe I'm managed to pin point a bug with DataTables when using a dynamically created table and sAjaxSource.
I've just fixed this in my development version and I'll release it in the next release (hopefully soon!). But until then you can patch your own copy if you like with the following. Find the comment:
"Check if there is data passing into the constructor" in the code and replace the block underneath it with:
[code]
/* Sanity check that there is a thead and tfoot. If not let's just create them */
if ( $('thead', this).length === 0 )
{
this.appendChild( document.createElement( 'thead' ) );
}
if ( $('tbody', this).length === 0 )
{
this.appendChild( document.createElement( 'tbody' ) );
}
/* Check if there is data passing into the constructor */
if ( bUsePassedData )
{
for ( var j=0 ; j
Now i am facing one more issue.
First let me explain the way am using datatables. I have a select box with a list of options. On click i will be initializing datatables and displaying a new set of data in the table.Reinitializing of the datatables is working fine.
Now my updated code is as follows :-
$("#templateName").bind("change", function(){
var methodToBeCalled = "getSpecificTemplateData";
$.getJSON("dynamicBannerSubmit.do", {
methodName: methodToBeCalled,
ajax: true
}, function(data){
var url = "dynamicBannerSubmit.do?methodName=getSpecificTemplateDataElements&bannerId=1&currDate=" + new Date();
$("table#dataTable > tbody > tr").remove();
oTable = null;
oTable = $("#dataTable").dataTable({
"bPaginate": false,
"bLengthChange": false,
"bInfo": false,
"bFilter": false,
"sAjaxSource": url,
"bSort": false,
"aoColumns": [{
"sTitle": "BannerDataId"
}, {
"sTitle": "DataKey"
}, {
"sTitle": "DataValue"
}, {
"sTitle": "Min Length"
}, {
"sTitle": "Max Length"
}, {
"sTitle": "Data Validation"
}, {
"sTitle": "Display Order"
}, {
"sTitle": "Mandatory"
}, {
"sTitle": "Type"
}, {
"sTitle": "BannerId"
}]
});
$("#dataTable > tbody td").livequery('click', function(){
alert("hi");
var aPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(aPos[0]);
alert(aData);
});
});
});
I have a requirement wherein i will have to get the data of the complete row on click . So am using livequery to set up the event handlers. Everything works fine the First time when the page gets loaded and on click of one of the options present in the select box. But on change of the options present in the selectbox, the function bound to the click event gets called and prints the first line properly but the value of aPos is null.
PLs suggest me how to handle this req of mine. Thanks a lot for ur help
http://datatables.net/examples/example_events_pre_init.html
http://datatables.net/examples/example_events_post_init.html
Allan
I found the solution to a previous post and I was wanting to know if someone could help me out.
Using the below code I can not link to a different page when the row is clicked
[code]
var oTable;
/* Data set - can contain whatever information you want */
var aDataSet = [<?php
$id = $_GET['customer_number'];
if(empty($id)){
$query="ORDER BY station_number ASC";
}else{
$query="WHERE customer_number='".$id."'";
}
$station="SELECT * FROM stations ".$query."";
$station2=mysql_query($station);
while($row=mysql_fetch_array($station2)){
echo"['".$row['id']."','".$row['station_number']."','".$row['customer_number']."'],";
}
?>];
$(document).ready(function() {
$('#dynamic').html( '' );
oTable = $('#stations').dataTable( {
"bJQueryUI": true,
"aaSorting": [[ 1, "desc" ]],
"sPaginationType": "full_numbers",
"bProcessing": false,
"iDisplayLength": <?php echo $number_to_display; ?>,
"aaData": aDataSet,
"aoColumns": [
{ "bVisible": false },
{ "sTitle": "Station Number" },
{ "sTitle": "Customer Number"},
],
"fnDrawCallback": function ( oSettings ) {
$('#customers tbody tr').each( function () {
var iPos = oTable.fnGetPosition( this );
$(this).click( function () {
window.location = "index.php?page=view_stations&customer_number="+oSettings.aoData[iPos]._aDataSet[0];
} );
} );
}
} );
} );
[/code]
Thank you awesome plugin !