Here is code..
$.ajax({
type: "POST",
url: "<?php echo rootpath()?>/show.php",
data: {
'url': url,
'type': 'rawdata'
},
cache: false,
dataType: "json",
success: function(data) {
$('#preloader').fadeOut('slow', function() {
$(this).remove();
});
alert(data);
}
})
data 'll be loaded on background which i get through alert only that fadeout function some time works.. not always
Related
I have a situation where I make an ajax call, on returning from which (successfully), I make an another ajax call with the returned data and submit the page. The pseudo code looks something like this:
$.ajax({
url: 'first_page.jsp',
type: 'POST',
dataType: 'JSON',
data: {...}
}).done(function(response) {
$.ajax({
url: '2nd_page.jsp',
type: 'POST',
dataType: 'JSON',
data: {...}
});
thisPage.submit();
});
The inner ajax call is not executed if I do not comment out the 'submit' line. I do not understand the behaviour. Can someone please help me with this.
Thanks
You need to execute submit on second ajax sucess.
For example
$.ajax({
url: '',
type: 'GET',
data: {
},
success: function (data) {
$.ajax({
url: '',
type: 'GET',
data: {
},
success: function (data) {
//do your stuff
}
$("input[type='submit']").click(function(event){
event.preventDefault();
$.ajax({
url:'abcd.php',
method:'post',
type:'json',
async:false,
success:function(response){
$.ajax({
url:'abcde.php',
method:'post',
type:'json',
data:{res:response},
success:function(response){
console.log(response);
}
});
$("form").submit();
}
});
});
Try this one.Its working correctly.
Has anyone used Globalize with Devexpress dateboxes? Cannot find how to make it work, obviously I would like to localize date format for countries like England/Germany/USA etc...
The sample below applies to AngularJS/Jquery, but you can extrapolate to Angular2
First of all you have to download the CLDR
Once you downloaded it in json format you have to load it into the Globalize and set your locale see sample code below (see at the bottom of the sample code to check the locale in my case it is es for spanish).
GlobalizeFunc: function () {
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/supplemental/likelySubtags.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/dates/es/ca-generic.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/dates/es/ca-gregorian.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/dates/es/dateFields.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/dates/es/timeZoneNames.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/numbers/es/numbers.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
Globalize.locale("es");
},
At this point your controls have been globalized, including calendars and date pickers.
I need to add a fade-in-out transition animation to this ajax loading code. Could someone explain me how to do it please?
JS :
function loadPage(url)
{
url=url.replace('#page','');
$('#loading').css('visibility','visible');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page='+url,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#pageContent').html(msg);
$('#loading').css('visibility','hidden');
}
}
});
}
Use beforeSend() function of ajax request to fadeIn() and in success fadeOut()
$('#loading').css('visibility', 'visible');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page=' + url,
dataType: "html",
beforeSend: function () {
$('#loading').fadeIn();
},
success: function (msg) {
if (parseInt(msg) != 0) {
$('#pageContent').html(msg);
$('#loading').fadeOut();
}
}
});
I hope you want to show the effects on success of the ajax result. You may try this.
$.ajax({
type: "POST",
url: "institutions-filter.action",
data: data,
cache: false,
success: function(msg)
{
if(parseInt(msg)!=0)
{
$('#loading').css('visibility','hidden');
$("#pageContent").fadeOut(400, function()
{
$("#pageContent").html(msg).fadeIn(400);
});
}
}
});
I'm doing a (simple) ajax call on window load:
$(window).load(function () {
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
...........
How can I do something, for instance a function or event after this ajax proces is finished. The problem is I have to append something to the data recieved by the ajax call. But I can't append on window load because the data is still being processed.
Put it in the success handler of the ajax call:
$(window).load(function () {
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
// do whatever you want with data
}
});
});
You can call that in the success callback function of Ajax request
success: function(data) {
myFunction() ; // If function
$('#elementID').click() // If you want to trigger a click event
}
You may use the
`$(document).ready`
So it will be similar to this:
$(document).ready(function(){
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
//Your code should be here
After
success: function(data) {
for (var ii = 0; ii < data.length; ii++){
building html here
}
your code here
}
you want to enter in your functions within the success function for the ajax call but before the call is complete.
You could also do
$.ajax({
url: someUrl,
type: "get",
dataType: "",
context: document.body
}).done(function() {
// do whatever when is done
onCompleteFunction();
});
this should execute your request when page is just loaded.
$(function(){
$.ajax({
url: someUrl,
type: "get",
dataType: "",
success: function(data) {
// do whatever you want with data
}
});
});
or you can do:
$(function(){
$.ajax({
url: someUrl,
type: "get",
dataType: "",
complete: function(data) {
// do whatever you want with data
}
});
});
I'm having an issue with IE8 (nothing new there). The error I'm getting is not making much sense as it does not occur on FF or Chrome. Here's the code:
function remComp(id, trade) {
$.ajax({
url: "functions/removePriceSurveyComparison.php",
type: "POST",
async: true,
data: "id="+id,
dataType: "xml",
success: function(xmlData) {
if ($("success", xmlData).text() == "true") {
loadComps(trade);
}// TODO create error handler
}
});
}
In this function it is complaining about the line where the success callback is defined. This function has not even been called yet though? But when it does get called, it works perfectly fine, although still creates new errors?
The function that is being called though is:
function loadComps(trade) {
$.ajax({
url: "functions/loadPriceSurveyComparisons.php",
type: "POST",
async: true,
data: "trade="+trade,
cache: false,
dataType: "html",
success: function(comps) {
$("#current"+trade).html(comps);
}
});
}
The second function is basically getting called 3 times when the page loads. Any advice?
Here is the complete script block as well:
function remComp(id, trade) {
$.ajax({
url: "functions/removePriceSurveyComparison.php",
type: "POST",
async: true,
data: "id="+id,
dataType: "xml",
success: function(xmlData) {
if ($("success", xmlData).text() == "true") {
loadComps(trade);
}// TODO create error handler
}
});
}
function addComp(trade, albId, compId) {
$.ajax({
url: "functions/addPriceSurveyComparison.php",
type: "POST",
async: true,
data: "trade="+trade+"&albId="+albId+"&compId="+compId,
cache: false,
dataType: "xml",
success: function(xmlData) {
if ($("success", xmlData).text() == "true") {
loadComps(trade);
}// TODO add an error handler
}
});
}
function updateComp(id, trade) {
var albId = $("select#albProd"+id).val();
var compId = $("select#compProd"+id).val();
$.ajax({
url: "functions/updatePriceSurveyComparison.php",
type: "POST",
async: true,
data: "id="+id+"&albId="+albId+"&compId="+compId,
cache: false,
dataType: "xml",
success: function(xmlData) {
if ($("success", xmlData).text() == "true") {
// reload table for this trade
loadComps(trade);
}// TODO create error handler
}
});
}
// function that loads all of the comparisons for a specific trade
function loadComps(trade) {
$.ajax({
url: "functions/loadPriceSurveyComparisons.php",
type: "POST",
async: true,
data: "trade="+trade,
cache: false,
dataType: "html",
success: function(comps) {
$("#current"+trade).html(comps);
}
});
}
// define document.ready function
$(document).ready(function() {
// load all of the comparisons for each trade
<?php
foreach ($trades as $trade) {
echo "loadComps(\"$trade\");\n";
?>
$("#addComp<?php echo $trade; ?>").click(function(e) {
e.preventDefault();
addComp("<?php echo $trade; ?>", $("#albProd<?php echo $trade; ?>").val(), $("#compProd<?php echo $trade; ?>").val());
});
<?php
}
?>
});
JSLint's error message "Implied Global" means that there are variables defined that are missing the "var" definition... this is especially problematic for IE8. You need to go through and add "var" to the line numbers listed (yes, there are lots).
Are you using an Asset Packager? The order of how assets are listed in your asset packager could be at fault here.