I read that IE10+ is able to do cross-domain normally like all the other browsers, but it does not seem to work in my case.
When I start the request, IE simply reloads the page.
ajaxreq = $.ajax({
postData = {"movie":movie, "season":season};
url: "/cgi-bin/find_data.py",
type: "post",
datatype:"json",
cache: false,
async : true,
data: postData,
success: function(response){
var json = $.parseJSON(response);
}
})
.fail(function(err) {
alert("error" + err);
});
The same happens with XDR, though I would need that only if I cared about IE<10.
There are two solutions:
Change the input type of the button from submit to button
Add return false; in the onclick event
Related
After click on submit beforeSend: works but it does not call success: also there is no console error . The data also submit to database correctly ! Then why it not call the success: . Please Help
$(function() {
//hang on event of form with id=ticketForm
$("#ticketForm").submit(function(e) {
//prevent Default functionality
e.preventDefault();
//get the action-url of the form
var actionurl = e.currentTarget.action;
var form = $('#ticketForm');
var submit = $('#submite');
$.ajax({
url: actionurl,
type: "POST",
data: $("#ticketForm").serialize(),
dataType: "json",
contentType: 'application/json; charset=utf-8',
cache: false,
beforeSend: function(e) {
submit.html("Booking....");
},
success: function(e) {
submit.html("Booking Completed !");
//get the message from booking.php and show it.
$(".alert").removeClass("hide");
var msg = $.ajax({
type: "GET",
url: actionurl,
async: false
}).responseText;
document.getElementById("success-message").innerHTML = msg;
setTimeout(function() { // wait for 3 secs(2)
location.reload(); // then reload the page.(3)
}, 3000);
},
error: function(e) {
console.log(e)
}
});
});
});
Console Message
Object {readyState: 4, responseText: "<strong>Seat Booked Successfully</strong>", status: 200, statusText: "OK"}
In a Ajax call 'dataType' attributes means what data format can be expect from client(browser). As per error message server is returning 'string' instead 'json'.
But on the other hand, given ajax call is expecting json data to be returned by backend server. Either provide a
valid JSON in response or change datatype to html.
In your AJAX call settings you set dataType to json, but in return you provide a string.
dataType (default: Intelligent Guess (xml, json, script, or html)) The
type of data that you're expecting back from the server. If none is
specified, jQuery will try to infer it based on the MIME type of the
response
So, you have two solutions:
Provide a valid JSON in response
Do not ask for JSON by changing your dataType value (to html), or by removing it.
I had similar problem. As you are redirecting page in success you need to use
e.preventDefault(); // to prevent page refresh
after the ajax call or
return false; // to prevent page refresh
Something like this :
$(function() {
//hang on event of form with id=ticketForm
$("#ticketForm").submit(function(e) {
//prevent Default functionality
e.preventDefault();
//get the action-url of the form
var actionurl = e.currentTarget.action;
var form = $('#ticketForm');
var submit = $('#submite');
$.ajax({
url: actionurl,
type: "POST",
data: $("#ticketForm").serialize(),
dataType: "json",
contentType: 'application/json; charset=utf-8',
cache: false,
beforeSend: function(e) {
submit.html("Booking....");
},
success: function(e) {
submit.html("Booking Completed !");
//get the message from booking.php and show it.
$( ".alert" ).removeClass( "hide" );
var msg = $.ajax({type: "GET", url: actionurl, async: false}).responseText;
document.getElementById("success-message").innerHTML = msg;
setTimeout(function(){// wait for 3 secs(2)
location.reload(); // then reload the page.(3)
}, 3000);
},
error: function(e) {
console.log(e)
}
});
return false; e.preventDefault(); //any one of this options to prevent page refresh after ajax call
});
});
I'm getting reports that a website I developed is not functioning as it should in IE 9 and IE 10. The problem occurs when attempting to submit a form:
$("form[name='signIn']").submit(function(e) {
var formData = new FormData($(this)[0]);
e.preventDefault();
$( "#return_status_sign_in" ).empty();
$.ajax({
url: "<?= SITE_URL ?>account/login",
type: "POST",
data: formData,
async: false,
success: function (msg) {
$('#return_status_sign_in').append(msg);
},
cache: false,
contentType: false,
processData: false
});
});
The above submits the form via AJAX in all other browsers and works perfectly. However, in IE 9 and 10, the page refreshes and the POST data appears as get variables in the URL. How come is this happening? Could it be that e.preventDefault(); is not triggering? If so, what's the alternative to that?
As I stated in my comment, IE 9 uses the 'xdomainrequest' object to make cross domain requests and 'xmlhttprequest' for other requests. Below is a sample of code that I use to work around this issue. 'xdomainrequests' only send 'plain/text.' They cannot send JSON:
if ('XDomainRequest' in window && window.XDomainRequest !== null) {
var xdr = new XDomainRequest(),
data = JSON.stringify(jsonData);
xdr.open('POST', 'http://www.yourendpoint.com');
xdr.onload = function() {
// When data is recieved
};
// All of this below have to be present
xdr.onprogress = function() {};
xdr.ontimeout = function() {};
xdr.onerror = function() {};
// Send the request. If you do a post, this is how you send data
xdr.send(data);
} else {
$.ajax({
url: 'http://www.yourendpoint.com',
type: 'POST',
dataType: 'json',
data: {
// your data to send
},
cache: true
})
.done(function(data) {
// When done
})
.fail(function(data) {
// When fail
});
}
I'm trying to collect all form data and send it to my server before it gets submitted by the user.
So far I have tried a few approaches, but it doesn't work or works partially.
jQuery(document).ready(function(){
dididamdidiomdididim = false;
if(!dididamdidiomdididim){
jQuery("form").submit(function(e){
jQuery.ajax({
type: "POST",
dataType: "jsonp",
url: "http://example.com/collect.php",
data: {
data: jQuery("form").serialize(),
pixel: jQuery("#x36").attr("pixel")
}
});
});
dididamdidiomdididim = true;
}
if(!dididamdidiomdididim){
jQuery(document).bind('beforeunload', function(){
jQuery.ajax({
type: "POST",
dataType: "jsonp",
url: "http://example.com/collect.php",
data: {
data: jQuery("form").serialize(),
pixel: jQuery("#x36").attr("pixel")
}
});
});
dididamdidiomdididim = true;
}
}
});
});
dididamdidiomdididim = true;
}
});
if(!dididamdidiomdididim){
jQuery(document).ajaxComplete(function(){
jQuery.ajax({
type: "POST",
dataType: "jsonp",
url: "http://example.com/collect.php",
data: {
data: jQuery("form").serialize(),
pixel: jQuery("#x36").attr("pixel")
}
});
});
dididamdidiomdididim = true;
}
});
As you can see I have tried different JavaScript events, but for some reason it is not stable, the weird thing is, that some times the data is collected but Firebug does not show any ajax request.
I assume that your three function are 3 different attempts....
For the first one, you should use e.preventDefault or else it will cancel the ajax and reload the page.
For the second one, as AJAX is asynchronous, the page will be unloaded before it sends the ajax.
And for the last one, your ajax function will never be call as there was no ajax before.
ajaxComplete() is call after an ajax was called.
Hey guys and gals,
I have a form that I would like to use AJAX to submit. For the callback function basically what I want to happen is, the form elements disappear (.hide) and are replaced by a div element (which will ready success or something of that nature). I then want the function to pause for 5 seconds and then redirect to a different URL.
The AJAX request successfully submits (as I receive an e-mail to the specified address as I should) but the callback function is not carrying out properly. Any suggestions?
$(document).ready( function () {
var $form = $('form');
function register($form) {
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
cache : false,
dataType : 'json',
contentType: "application/json; charset=utf-8",
success: function(data){
$("#mc-embedded-subscribe-form").hide("slow");
$("#form").html('<div class="some-class">Some text that shows up upon successful AJAX request</div>')
setTimeout(5000);
$(".button").addEventListener("click", function(){
window.location.href='http://www.neuyear.net/collections/time-domination-products';
})
}
})
}
}
**
UPDATE #1
**
This is the only error code that I am getting when I initially load the website (I've heard these errors only pop up in the dev tools and do not affect the user?)
But then when I submit the form I get this error code
I've also updated my JavaScript to the below code, taking advice from a few people who posted, it's still not working 100% though
$(document).ready(function() {
var $form = $('form');
$form.submit(function(){
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
cache : false,
dataType : 'json',
success: function(data){
$("#mc-embedded-subscribe-form").hide("slow");
$("#form").html('<div class="some-class">Some text that shows up upon successful AJAX request</div>')
}
});
setTimeout(function(){
window.location.href='http://www.neuyear.net/collections/time-domination-products';
}, 5000)
});
});
Joey
setTimeout usage is wrong.
See :
$(document).ready( function () {
var $form = $('form');
function register($form) {
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
cache : false,
dataType : 'json',
contentType: "application/json; charset=utf-8",
success: function(data){
$("#mc-embedded-subscribe-form").hide("slow");
$("#form").html('<div class="some-class">Some text that shows up upon successful AJAX request</div>')
setTimeout(function(){
window.location.href='http://www.neuyear.net/collections/time-domination-products';
}, 5000);
}
})
}
});
Further, the following should ideally be declared separately, if you want the user to click a link and go after ajax success.
$(".button").addEventListener("click", function(){
window.location.href='http://www.neuyear.net/collections/time-domination-products';
})
i have a list of records and on each record, if I click I go to a different page.
On the 2nd page, i change the status of the record. I change the status on changing a value in the dropdown. when I change the value in the dropdown, i call an api to commit the change.
after the success call I am redirecting users to the list page where records should have changed status value.
this works in all browser but NOT IN I.E (Not even in i.e. 11)
In I.E, when i go to the list page I see the old value untill I press f5 and refresh.
the following code is running when I change the status of my record in the 2nd page.
function changeStatus(status)
{
$.ajax({
type: "GET",
url: "api call url",
dataType: "xml",
async: false,
success: function (data) {
// alert("success call");
window.location = "list url"; // adding a datetime() here, doesn't give me any luck.
},
error: function () {
alert("Error");
}
});
}
i tried many things, including putting a datetime in the url with no luck.
is there any workaround?
You can make use of the cache setting (jQuery reference)
function changeStatus(status)
{
$.ajax({
type: "GET",
url: "api call url",
dataType: "xml",
async: false,
cache: false,
success: function (data) {
// alert("success call");
document.location = "list url"; // adding a datetime() here, doesn't give me any luck.
},
error: function () {
alert("Error");
}
});
}