I am populating some data from a webservice in a span element. The data which I am getting from the webservices is first adding in a table and then adding that table in the Span element. The table is adding initially in the Span element but after loading it disappeared certainly.In the code snippet I am giving below it is the Span element is giving desired outcome till 'second alert' but after that it is getting disappeared.
$.ajax({
cache: false,
type: "GET",
async: false,
url: GetAStudent + "(" + nextStudentID + ")",
dataType: "json",
success: function (student) {
jPendingStudent = student;
nextStudentID++;
//debugger;
var table = makeTable(student);
$("#spanStudentList").html("").append(table);
alert("span 1 created");
//$("#divNewStudent").css("visibility", "visible");
//$("#divNewStudent").visible();
$("#divNewStudent").show();
alert("span2 created");
//return false;
},
Related
So i have a function running an Ajax call that receives data and populate that as a table.
The response contains some rows with data and i now want to add a small fontawsome icon that when clicked fires another function with a parameter.
So i have this:
var latestprecasedata = '';
function getPreCaseData() {
$.ajax({
cache: false,
type: "POST",
contentType: "application/json; charset=utf-8",
url: "case.aspx/GetPreCase",
dataType: "json",
success: function (response) {
if (response != null && response.d != null) {
var data = response.d;
data = $.parseJSON(data);
$("#PreCaseTblBody").html("");
for (var i in data) {
$("#PreCaseTblBody").append("<tr><td>" + data[i].pSubject + "</td><td><span class='preplus' id='" + data[i].pID + "'><i class='fa fa-plus'></i></span></td><td>-</td></tr>");
}
if (latestprecasedata !== response.d) {
$("#precasestatus").removeClass("titleupd1").addClass("titleupd2");
latestprecasedata = response.d;
}
else {
$("#precasestatus").removeClass("titleupd2").addClass("titleupd1");
}
}
$("#PreCaseTblBody tr:odd").css('background-color', '#f9f9f9'); //
$("#PreCaseTblBody tr:even").css('background-color', '#f1ffee');
setTimeout(getPreCaseData, 10000);
}
});
}
This works and every 10 seconds data is repopulated. (Maybe not the fastest solution, but it works..)
As you all can se i have a span with class=preplus and id of a unique value coming from my Ajax response. When inspecting the page i can see that every row from my Ajax response have a unique id.
For example two row looks like this:
<tr><td>Cables</td><td><span class="preplus" id="4815269"><i class="fa fa-plus"></i></span></td></tr>
<tr><td>Skrews</td><td><span class="preplus" id="4815269"><i class="fa fa-plus"></i></span></td></tr>
So now i have the data populated with span containing a unique id that i want to pass to another function.
I've tried span, div, buttons but the only one time I actually got a event fire was when i placed my second function inside the
for (var i in data) {
... and i know, that's not right at all because all rows contained the last id obviously...
So my other function resides outside my first function and look like this (I've tried many different methods to get the id of my span but for now, I'm here)
$(".preplus").click(function () {
var qID = $(this).attr('id');
$.ajax({
cache: false,
type: "POST",
contentType: "application/json; charset=utf-8",
url: "case.aspx/UpdateQ",
dataType: "json",
data: "{'qid':'" + qID + "','pm':'plus'}",
success: function (data) {
}
});
return false;
});
Please guide me.
I have a modal that displays a table. And I use datatable plugin so that the data is searchable and sortable. It works properly at first but when I close the modal and click other link to the same modal, it displays error. I have found solution to destroy the DataTable and I put the destroy() before the initialization of the datatable but then no data is displayed inside the table.. if I put it after the initialization it gave me the initialization error the second time I click the button. How am I going to solve this?
here's my code:
$.ajax({
url: "<?php echo site_url('admin/group/getMember')?>",
type: 'POST',
data: { 'groupID': id},
dataType: 'JSON',
success: function(result){
$('#records_table tbody').empty();
// $('#records_table').DataTable({
// "bLengthChange": false,
// "paging":false,
// });
$('.modal-header #hdrmsg').text(result[0].fname);
var trHTML='';
$.each(result, function (i, item) {
trHTML += '<tr><td>' + item.fname + '</td><td>' + item.mname + '</td><td>' + item.lname + '</td></tr>';
});
$('#records_table tbody').append(trHTML);
$('#records_table').DataTable({
"bLengthChange": false,
"paging":false,
});
$('#records_table').DataTable().fnDestroy();
}
});
The main reason for destroying a dataTables instance is if you want to change the initialisation options - like change paging and so on. Or if the table structure should be altered. None of those circumstances seems to be the case here? To answer the question, the safest way to destroy and reinitialise a table is to use the shorthand option destroy: true :
var table = $('#records_table').DataTable({
...
destroy : true
});
To go further, I think you are doing it a little backwards.
Why empty the table with jQuery $('#records_table tbody').empty(); instead of table.clear() ?
Why inject records with jQuery $('#records_table tbody').append(trHTML); instead of using table.row.add([...]) ?
Here is a code scenario similar to the one in the question, which reinitialises the dataTable without conflicts, each time the modal is shown :
var table;
$('#modal').on('show.bs.modal', function() {
$.ajax({
url: url,
dataType: 'JSON',
success: function(response) {
var response = $.parseJSON(response.contents);
//clear the table, if it exists
if (table) table.clear();
//reinitialise the dataTable
table = $('#records_table').DataTable({
destroy: true,
bLengthChange: false,
paging: false
});
$.each(response, function(i, item) {
console.log("inserting", item);
table.row.add([
item.name,
item.position
]).draw();
});
}
});
});
see demo -> http://jsfiddle.net/bz958dxj/
But you really dont need to destroy the table at all, it just slows down performance :
//global table object
table = $('#records_table').DataTable({
bLengthChange: false,
paging: false
});
$('#modal').on('show.bs.modal', function() {
$.ajax({
url: url,
dataType: 'JSON',
success: function(response) {
var response = $.parseJSON(response.contents);
//clear the table
table.clear();
//insert data
$.each(response, function(i, item) {
console.log("inserting", item);
table.row.add([
item.name,
item.position
]).draw();
});
}
});
});
demo -> http://jsfiddle.net/8mjke9ua/
NB: I just assume we are talking about bootstrap modals, based on the reference to .modal-header in the question.
NB²: Notice the $.parseJSON(response.contents), you should do it as you are doing it in the question. The only reason for this is that the examples go trough a proxy to avoid the same-origin policy.
I am trying to show a popup in my first page if a php post returns a json file with data.
I tried with:
$(document).on("pageinit", '#home', function() {
ajax call even with async:false,...
And after that, I fill up the element with some list elements if json has data:
if(userLastPush == 1){
var getPushXdays = '{"day":"4"}';
$.ajax({
type: "POST",
url: urlServer+"getPushXDays.php",
data: getPushXdays,
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
//console.log(response);
html = '';
if(response.message != "empty"){
jQuery.each(response, function(category, val) {
if(val.id_Event == 0){
html +='<li>' + val.message + '</li>';
}else{
html +='<li>' + val.message + '</li>';
}
});
}
$(".popupPush").append(html).listview('refresh');
if(checkPushing == 0){
$("#checkpush").trigger("click");
}
},
error: function(xhr, status, message) {}
});
}
But it just works sometimes. Others, ajax never ends or never shows data. I tried by using a function instead and function is called but no return from ajax. Is there a way to make this getting all data before page is load?
I am having a problem with image rendering facility on button click display image on output div only for first one but not display same on another click with changes I am doing the code for image meme so that I can write text on image and give some effects. It displays image for the first time only as i told above on click I serialize the form data. after that I passes to ajaxfunctions page by jQuery ajax call.
var data = {
'field_name': 'formdata',
'outer_offset_left': offset.left,
'outer_offset_top': offset.top,
'drag_offset_left': dragOffset.left,
'drag_offset_top': dragOffset.top,
'drag_offset_left2': dragOffset2.left,
'drag_offset_top2': dragOffset2.top,
'outer_width': outerWidth,
'outer_height': outerHeight,
'drag_width': dragWidth,
'drag_height': dragHeight,
'drag_width2': dragWidth2,
'drag_height2': dragHeight2,
'fontsize': font_size,
'fontsize2': font_size2,
'file_name_path': file_path,
'file_background_url': outer_bg_url,
'file_background_color': outer_bg_color,
'drag_text': drag_text,
'drag_text2': drag_text2,
'font_type': font_type,
'font_type2': font_type2,
'shadow_val': shadow_val,
'cap_val': cap_val
};
data = $('#my-form').serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "html",
url: "source/ajax-functions.php",
//Relative or absolute path to response.php file
data: data,
success: function (data) {
setTimeout(function () {
$("#mouse_move").css({
'display': 'block'
}).html(data);
}, 200);
}
});
on ajax-functions.php i have just echo the image after update but it will show output that it generates for the first time.
echo '<img src="'.$pathToImage.'custom_Text_image.jpg" />';
but internally every thing is going fine. image is successfully updated as i want.
This line:
data = $('#my-form').serialize() + "&" + $.param(data);
will add the current form a second time to data on each run. It will only run once properly.
Assumed, data="abc"
// 1
data = $('#my-form').serialize() + "&" + $.param(data);
// <formadata>&abc
// 2
data = $('#my-form').serialize() + "&" + $.param(data);
// <formadata>&abc<formdata>&abc
// etc.
Change:
datatosend = $('#my-form').serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "html",
url: "source/ajax-functions.php",
//Relative or absolute path to response.php file
data: datatosend,
success: function(
...
I want to display data function name and function description from database and display it in div which will be created dynamically using jquery. How can I display data with dynamic div using jquery...
code for dynamically created div is:
$(document).ready(function () {
$.ajax({
type: "POST",
url: 'FunctionListing.aspx/CountFunction',
data: "{}",
contentType: 'application/json; charset=utf-8',
datatype: 'json',
success: function (result) {
//alert(result.d);
for (var i = 1; i <= result.d; i++) {
$('body').append("<div id='div" + i + "' />");
}
},
error: function (result) {
alert(result);
}
});
});
dataType :"json"
Not datatype :"json"
Hope, it'll helps you.