Loading image in ajax call is not working in chrome - javascript

I have a html page where i want to display processing with loading image between ajax call for save and its success.
And that page i put in dynamics crm as webresourse.
Problem is that Loading works fine in mozilafirefox but not working in
chrome.
Script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Other Code:
<img src="sm_loading.gif" id="loading" style="display:none" />
<input class="custom-btn" id="btnsave" value="Save" onclick="SaveData();" type="button">
function SaveData() {
$('#loading').show();
var stocktrack = {};
stocktrack.sm_Description = descval;
var jsonPO = window.JSON.stringify(stocktrack);
var oDataUri = serverUrl + "/XRMServices/2011/OrganizationData.svc/sm_stocktrackingSet";
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
datatype: "json",
url: oDataUri,
data: jsonPO,
async: false,
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json");
},
success: function (data, textStatus, XmlHttpRequest) {
debugger;
$('#loading').hide();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
}
Please suggest if any solution is there.

I ran your code in Firefox and it worked. I also ran in Chrome and got nothing, just as you said. However, by turning on the debugger in Chrome, using F12, I got the following error.
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
To fix this set the async flag inside your ajax call equal to true.
If you want to keep your user from pressing things during your async call, which is perfectly understandable, I suggest you use a transparent blocking layer.

I Got my answer.
With the use of setTimeout(function(){..our code..},10); I am able to display loading in chrome with async:false.
Reference Link:
https://www.experts-exchange.com/questions/25187194/jQuery-async-false-with-beforeSend.html

Loading Panel only work with async:True,
Other wise it will only work on firefox and most other browsers does not show loading panel.
But with asynchronous false all the code below other than success and error(call back functions) will be execute.

Related

jQuery ajax post is sending request using get method on ipad chrome

When this code runs on chrome on ipad, it ignores the type "POST" and sends the ajax request using the get method. Is it a compatibility issue? Seems like chrome doesnt support post ajax requests?
$.ajax({
type: "POST",
url: "/ajaxCall",
data: sentData,
success: success,
dataType: "text",
error: function (jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
}
});
I was testing the page on k-tunnnel/v-tunnel. I found out that the problem is becaouse of these sites. Without tunneling, my calls reaches the server properly.

RESTful request in ajax and react

good day, im trying to consume a web service in react, but im having problems with the ajax function, i'm not sure if is working my code is this:
prox= {"email":email, "password": password};
//tag comment
$.ajax({
type: 'POST',
url: (web service url),
data: JSON.stringify(prox),
contentType: "application/json; charset=utf-8",
crossDomain: true,
dataType: 'json',
success: function(data) {
this.setState({success: true, result: data});
alert("success");
this.setState({prueba: 'success'});
}.bind(this),
error: function() {
this.setState({failure: true});
alert("failure");
this.setState({prueba: 'failure'});
}.bind(this)
});
but i dont have any alert, when i click the button only re-render the form, the function handdle submit works, i try it putting a confirm() in the space where the //tag comment is and the confirm pop up, but the alerts dont, i think that i have an error in the function or something, thank's for the help.
I didn't run the script but just looking at it I imagine the problem could be your bind(this)
this.setState to me should be an error “is not a function” as this is not the react object. To get an alert try placing the alert as the first state.
To be sure just look at your browser console.
It looks like its working for the most part. I threw it into a JSBin and nothing seems to be out of the ordinary.
http://jsbin.com/rulaguxote/1/edit?html,js,output
I kept your JSX mostly the same, and added a few things in the component to help you visualize its state. Click the button to send a fake ajax request. Depending on the state, it will either send back an HTTP status of 200 or 400 (success or failure). This way, you can see how the success() and error() functions behave.
Another thing to note: If you are concerned that your .bind(this) is the reason your code is not working, you can specify the context like this:
$.ajax({
type : 'POST',
url : '/test',
data : JSON.stringify(prox),
contentType : "application/json; charset=utf-8",
context : this, //use this instead of .bind
success : function (data) {
this.setState({success : true, failure : false});
alert("success");
},
error : function () {
this.setState({failure : true, success : false});
alert("failure");
}
});
Let me know if you have any questions.
Doing some extensive research i see that my real problem whas the same origin policy, now im working fine in the localhost version of the project, thank you.

jQuery AJAX request getting response but no callbacks are fired

I have code as such:
$.ajax({
method: "GET",
url: page,
dataType: 'html',
data:data,
success: function(data){
console.log(data);
},
error: function(){
console.log('error');
}
});
Using either Chrome or Firefox's debugger I can see that the request is successful with a response of 200 OK and the response contains the expected data.
My problem is, however, that no callbacks fire whatsoever. "Success" does not fire nor does "Error". Furthermore, no deferred methods fire either, such as "done", "then", or "always".
I've been trying to trouble shoot this for the past few hours to no avail. I'm at a total loss. I've also tried using methods such as "$.get" with the same result.
In short, I'm getting the response, but the code in jQuery is not firing any callbacks and all without any visible errors in the console.
One thing I see wrong in your code is that:
method: "GET",
should be:
type: "GET",
I don't see any documented property for method in the jQuery doc. The type property is supposed to default to "GET" so this may not be the only thing wrong here.
In addition, there are cases where the error callback will not be called even if the ajax call fails (in cross-domain requests). From the jQuery doc for the error callback:
This handler is not called for cross-domain script and cross-domain JSONP requests.
This is because jQuery is expecting the server to send back a particular form of javascript and if the server doesn't do what is expected, then jQuery never knows when the request comes back and can't process it.
In these cases, you often have to figure out what might be going wrong from looking at the network trace in the debugger.
Other things to check to make sure you aren't accidentally cross domain:
Make sure the domain/subdomain are exactly the same between ajax call and the page. For example, one common mistake is for one to have www. on it and the other not.
Make both page and ajax URL are both same http or https.
If using a non-standard port number, make sure both page and ajax URL are using the same port.
The following code works. Also note that AJAX will not work with cross site scripting.
If you want to get the error you can print the "errorThrown"
<script>
$(document).ready(function () {
$('#getLink').on("click", function () {
var url = $("#myUrl");
alert(url.val());
$.ajax({
type: "GET",
url: url.val(),
dataType: 'html',
success: function (data, textStatus, xhr) {
$("#data").text(textStatus);
},
error: function (data,textStatus, errorThrown){
$("#data").text(errorThrown);
}
});
});
});
</script>
<input id="myUrl" name="myURL" type="text" value="http://localhost:35460/Home/TestPage.cshtml" />
<input type="button" value="getLink" id="getLink">
<span id="data"></span>

jQuery AJAX not receiving JSON from http request

I ame using html with some jQuery to try out some JSON requests. I did a bit of research and tried making something small just to test it out. but when i run the script in my browser(Google Chrome) i dont get anything besides my html/css stuff. here is the code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
console.log("Test");
console.log($.get("https://prod.api.pvp.net/api/lol/euw/v1.1/summoner/by-name/kerrie?api_key=[key]"));
</script>
*[key] is my key from the api owners(not to be shared on the internet).
when i check the network tab it says "304, not modified" i dont if this has anything to do wit it.
I'm just starting with websites and JavaScript/jQuery any help would be helpfull.
For better understanding you can call ajax method as below
$.ajax({
url: 'https://prod.api.pvp.net/api/lol/euw/v1.1/summoner/by-name/kerrie?api_key=[key]',
type: 'GET',
dataType: 'JSON',
async: false,
error: function(){},
success: function(resp){
// resp variable will be your JSON responce
}
}
});

jQuery $.ajax call works in Chrome, but not any other browser

The following call works perfectly in Chrome, but fails in every other browser.
function getInfo(r,c,f){
return $.parseJSON($.ajax({
url: baseURL + 'somethingAPI/getInfo',
data: {
"data_r": r,
"data_c": c,
"data_f": f
},
//success: function(data){},
dataType: "json",
async: FALSE
}).response);
}
Yes, I'm using a synchronous ajax call and I believe it is necessary as I don't want any of the other JS to run without this executing and returning data. Although, I'm not entirely sure if something else should be happening with the success callback.
Anyway, in Chrome I get the response object (JSON) and can access the data within just fine.
Does anyone know what I'm doing wrong?
Regarding your point about not knowing how to avoid async: false, is this something like what you're looking to accomplish?
function getInfo(r, c, f, callback) {
$.ajax({
url: baseURL + 'somethingAPI/getInfo',
data: {
"data_r": r,
"data_c": c,
"data_f": f
},
dataType: "json",
success: callback,
});
}
getInfo('foo', 'bar', 'baz', function(response) {
console.log(response);
});
Rather than parsingJson on the ajax query, here's the syntax I use to conquer these challenges
$.ajax({
url: "pagegoeshere.php",
timeout: 30000,
type: "POST",
data: 'data1='+data1+'&data2='+data2,
dataType: 'json',
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("An error has occurred making the request: " + errorThrown)
},
success: function(returnjson){
var returnstuff = returnjson.returnstuff;
//Do next Javascript step here
}
});
You can run ensuing javascript/jquery in the success and "stack" events together on success of your Ajax call. That way, if it works, it proceeds. Otherwise, the error handling can occur in the provided error section in a manner that you define. I generally fire my ajax calls on a click handler, but it's certainly doable to run it in a function as you have chosen. Be sure to check your return JSON (could be mailed from your processing page, for example) to make sure it's valid JSON. Jsonlint is your friend!
I've had chrome effectively parse bad HTML and JSON while the other browsers don't on several occasions. I'd suspect it's something along those lines that's specifically causing your issues.

Categories

Resources