Ajax Call not working

ajaybhargov

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??

allan

Hi,

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

ajaybhargov

The call is not at all hitting the server side component while the same is working in the case of a json call

ajaybhargov

Adding one more issue to the same discussion.

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?

allan

Regarding the first point about the Ajax call not going to the server - could you post an example please?

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

ajaybhargov

I have created the table in my jsp. THe code is as follows :-




BannerDataId
DataKey
DataValue
Min Length
Max Length
Data Validation
Display Order
Mandatory
Type

allan

Try sticking an empty tbody in there as well. DataTables expects a tbody element.

Allan

ajaybhargov

Ohh ok. Vl try it right now. Thanks a lot allan.

ajaybhargov

Its still not working fine. My code is as follows :-

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)

allan

Could you possibly stick this up on the web somewhere that we can see it live?

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

ajaybhargov

[code]
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.

ajaybhargov

Hi Alan,

Do you know any place where i can stick in my application so that you can see it in live?

allan

You can put the files on any old web-space. Do you have a site you were planning to host it on?

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

ajaybhargov

Thanks a lot allan for your comments. I have gone ahead and am able to display the data using dataTables.

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

allan

The event handlers you are assigning with livequery are only being applied to the elements on display after the first draw. Have a look at the following examples to see how events can be applied while using DataTables:

http://datatables.net/examples/example_events_pre_init.html
http://datatables.net/examples/example_events_post_init.html

Allan

phpnetco

Hello, please pardon my inexperience jquery/datatables question.

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 !