I had a long question along with my complete code but now it is shorter one.
function showRecord(tbl) {
myDataTable.fnDestroy();
$.ajax(
{
data: "tableName=" + tbl,
url: "showTable.php",
dataType: "html",
success: function (data) { $("#example").html(data); }
});
alert('I get desired output as long as I do not comment/remove this alert');
myDataTable = $('#example').dataTable();
}
BUT if i just comment the alert I do not get data from database
If I do not use $('#example').dataTable(); (a jquery plugin for pagination from datatables.net ) then code works fine without alert.
function showRecord(tbl) {
//myDataTable.fnDestroy();
$.ajax(
{
data: "tableName=" + tbl,
url: "showTable.php",
dataType: "html",
success: function (data) { $("#example").html(data); }
});
//alert('I get desired output as long as I do not comment/remove this alert');
//myDataTable = $('#example').dataTable();
}
I need to know why alert is necessary in first sample of code. If it causes delay, why delay is necessary here and how to achieve this without using alert
Ajax calls are asynchronous. In the first block of code (if there is no alert) ajax call get executed and then immediately after that (before server responds) this line executes:
myDataTable = $('#example').dataTable();
and since server did not return result yet $('#example') is empty. You can put it it like this:
function showRecord(tbl) {
myDataTable.fnDestroy();
$.ajax(
{
data: "tableName=" + tbl,
url: "showTable.php",
dataType: "html",
success: function (data) {
$("#example").html(data);
myDataTable = $('#example').dataTable();
}
});
}
Try this.
function showRecord(tbl) {
//myDataTable.fnDestroy();
$.ajax(
{
data: "tableName=" + tbl,
url: "showTable.php",
dataType: "html",
success: function (data) {
$("#example").html(data);
myDataTable = $('#example').dataTable(); }
});
//alert('I get desired output as long as I do not comment/remove this alert');
//
}
Related
Good day, i'm having a problem with my code, can't get to show the loading image for few seconds, while POST code is getting in database and gives backinformation to show.
$("#poll_vote").click(function(){
var answer = $("input.panswer:checked").val();
var p_id = $("#p_id").val();
$("#poll_load").html("<tr><td align='center'><img src='/images/ajax/ajax4.gif'/></td></tr>");
$.ajax({
type: "POST",
data: "action=poll_vote&p_id="+p_id+"&answer="+answer+"&module="+module+"",
dataType: 'html',
url: "/ajax.php",
success: function(data)
{
$("#poll_content").html(data);
}
});
});
I would hope on your fast help, i'm begginer in java, so can't dicide it myself.
If what you want is to create a delay so the loading animation shows (I believe that is... mmm different, I'm going with that...)
what you need is to set a timeout like so:
setTimeout(function(){ alert("Hello"); }, 3000);
now in your code the function could contain the ajax call:
$("#poll_vote").click(function(){
var answer = $("input.panswer:checked").val();
var p_id = $("#p_id").val();
$("#poll_load").html("<tr><td align='center'><img src='/images/ajax/ajax4.gif'/></td></tr>");
setTimeout(function(){
$.ajax({
type: "POST",
data: "action=poll_vote&p_id="+p_id+"&answer="+answer+"&module="+module+"",
dataType: 'html',
url: "/ajax.php",
success: function(data)
{
$("#poll_content").html(data);
}
});
}, 3000);
});
or be inside the success function, which I believe is better:
$("#poll_vote").click(function(){
var answer = $("input.panswer:checked").val();
var p_id = $("#p_id").val();
$("#poll_load").html("<tr><td align='center'><img src='/images/ajax/ajax4.gif'/></td></tr>");
$.ajax({
type: "POST",
data: "action=poll_vote&p_id="+p_id+"&answer="+answer+"&module="+module+"",
dataType: 'html',
url: "/ajax.php",
success: function(data)
{
setTimeout(function(){$("#poll_content").html(data);}, 3000, data);
}
});
});
I didn't test it, so check if in the second case data can be seen inside the callback function (it should I think...)
Hope it helps.
I have a webpage that dynamically creates URLs on page load. The first time these links are clicked, they call a ajax query to load page data and it works perfectly. However, the second time the query is not executed and the data remains the same from the previous load.
Here is HTML code in activitylog.aspx where the URL items are added:
<ul class="ver-inline-menu tabbable margin-bottom-10 incidentlist"></ul>
Here is the jQuery Code in activitylog.aspx that is run on startup:
$(document).ready(function () {
// Get Parameter Values
var paramShiftId = getURLParameter('shift_id');
var paramIncidentId = getURLParameter('incident_id');
// Run Data Handler Query
$.ajax({
url: "queries/dataHandler_getShiftInfo.ashx",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { shift_id: paramShiftId, incident_id: paramIncidentId },
responseType: "json",
success: OnViewComplete,
error: OnViewFail
});
return false;
function OnViewComplete(result) {
//Cycle Through JSON Rows
$.each(result.aaData, function (i, row) {
$(".incidentlist").append("<li>" + row.INC_NUMBER + " </li>");
}
}
});
How do I create dynamic URLs that will load a refreshed page each time?
Ajax is something about no need to reload a page...
$(function(){
var paramShiftId = getURLParameter('shift_id');
var paramIncidentId = getURLParameter('incident_id');
loadData(paramShiftId, paramIncidentId);
})();
function loadData(paramShiftId, paramIncidentId) {
// Run Data Handler Query
$.ajax({
url: "queries/dataHandler_getShiftInfo.ashx",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { shift_id: paramShiftId, incident_id: paramIncidentId},
responseType: "json",
success: OnViewComplete,
error: OnViewFail
});
}
function OnViewComplete(result) {
$.each(result.aaData, function (i, row) {
$(".incidentlist").append("<li>" + row.INC_NUMBER + " </li>");
});
}
function OnViewFail(err){console.error(err);}
I am working on a dynamic page with multiple forms that can be added and removed by the user. My jquery script goes and finds all 'form' elements and submits them with jquerys ajax method. Here is the script
$(document).ready(function () {
(function (){
var id = $(document).data('campaign_id');
$(document).on('click', '#save-button', function () {
$('form').each(function (){
var data = new FormData(this);
var form = $(this);
if(!form.parent().hasClass('hideme'))
{
$.ajax({
url: form.attr('action'),
type: 'POST',
data: data,
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
success: function(data, textStatus, jqXHR)
{
console.log('form submitted '+count);
}
});
}
});
window.location.replace('/campaign');
});
})(); //end SIAF
});//end document.ready
The problem occurs that only sometimes the form submits, I can get it to if I click the save button a few times or if I remove the window.location.redirect that runs at the end, I suspect it is something to do with the redirect occurring before the submit, but I am not sure of a solution after going through some of the documentation
You are being caught out by the asynchronous nature of Ajax. Ajax does not work in a procedural manner, unfortunately. Your success method is called as and when the Ajax request has completed, which depends on your internet connection speed and how busy the server is.
It is entirely possible, the javascript completes its each loop and the first ajax request is still sending or waiting for a response. By when the javascript is ready to do a window.location call.
Edit:
Added code to check the number of forms, and the number of ajax requests, once they have all run, it will redirect
$(document).ready(function () {
(function (){
var id = $(document).data('campaign_id');
var numForms = $('form').length;
var numAjaxRequests= 0;
$(document).on('click', '#save-button', function () {
$('form').each(function (){
var data = new FormData(this);
var form = $(this);
if(!form.parent().hasClass('hideme'))
{
$.ajax({
url: form.attr('action'),
type: 'POST',
data: data,
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
success: function(data, textStatus, jqXHR)
{
console.log('form submitted '+count);
numAjaxRequests++;
if(numAjaxRequests == numForms) {
window.location.replace('/campaign');
}
}
});
}
});
});
})(); //end SIAF
});//end document.ready
my problem is when i try to show a value by ajax calling,it shows the value to "generic" class but when i try to show it on the parent row it is not showing anything.
here is my ajax code
$.ajax({
type: 'POST',
url: 'http://localhost/medical/index.php/purchase/test',
data: 'data=' + pid,
success: function() {
$.get('http://localhost/medical/index.php/purchase/test', function(data) {
$(this).parents('tr').find('.generic').html(data); // doesn't show the value
$( ".generic" ).html(); // this show the value but in all table row
});
}});
Thanks in Advance
The problem is called scope. this in context of the anonymous function means something else than it means outside. You can do it like this
var that = this;
$.ajax({
...
success: function() {
$.get(..., function(data) {
$(that).parents('tr').find('.generic').html(data);
});
}
});
I have a simple jquery function that I am trying to get ajax to run dynamically. The function works fine when called as such
function widget1() {
console.log("test");
}
$(function () {
$('#thisbutton').bind('click', function() {
var htmlString = $("#uid").html();
$.ajax({
type: "GET",
url: "/getappobj",
data: {id:htmlString},
success: function(data) {
widget1();
}
});
});});
but if I try to get the function called dynamically I get an error that the string is not a function
$(function () {
$('#thisbutton').bind('click', function() {
var htmlString = $("#uid").html();
$.ajax({
type: "GET",
url: "/getappobj",
data: {id:htmlString},
success: function(data) {
var findit = data[0].widget;//returns "widget1"
findit();
}
});
});});
I have tried this every way that I can think of. Using jquery-1.9.1.min.js.
If widget1 is global, you can call window[findit]() to get the function from the window object by name.
You are trying to call a string as a function which of course won't work. You need to use the string to look-up the function to execute.