Develop Reference

Button click event only works when page is reloaded or alert in function

It seems that a couple of buttons I have on my HTML page only work when there is an alert in the function of the event, or when I navigate to another page and then back to the home page. From other similar problems I've read about, it seems as though the home page is attempting to finish some task and that the alert is buying it more time. However, I am not sure that is true in my case.
I have a Javascript file actions.js that is loaded by the HTML page in the header as a source. The file is as follows (only showing relevant code) :
$(document).ready(function() {
//This function only works with an alert before the Ajax call or when page is reloaded
$("button[name='delete_deck']").click(function() {
var id = this.id;
$.ajax({
url: "delete_decks.php",
type: "GET",
data: {selection:JSON.stringify(id)},
async: false,
success: function(data) {
location.reload();
}
});
});
//This function is for a button on the same page, but works fine without the alert or reloading the page
$("#study").click(function() {
var selection = getDeckSelections();
if(selection.length > 0) {
//Get the selected side of the card
var selected_side = $('input[name=side_selection]:checked', '#side_selection_form').val();
//Store the selected side in session storage
sessionStorage.setItem("selected_side", selected_side);
//Ajax call to get cards from database
$.ajax({
url: "get_cards.php",
type: "GET",
data: {selection:JSON.stringify(selection)},
cache: false,
async: false,
success: function(data) {
json = JSON.parse(data);
//Store the cards in session storage
sessionStorage.setItem("cards", JSON.stringify(json));
}
});
}
});
}

$(document).on('click',"button[name='delete_deck']",function() {
var id = this.id;
$.ajax({
url: "delete_decks.php",
type: "GET",
data: {selection:JSON.stringify(id)},
async: false,
success: function(data) {
location.reload();
}
});
});

JQuery form submit not calling success

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
});
});

Ajax request reloads page in IE10

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

Ajax call multiple time onclick event on bootstrap modal

By clicking a button Its loaded a bootstrap modal. On the modal there have a form and on click save button I am trying to submit form by ajax call. At first time the ajax call trigger one time, but 2nd time the ajax url trigger two times. I see on firebug console section the post url is called multiple times.
Here Is my jquery code.
$(".show-modal").click(function() {
$('.upload-modal').modal();
$(".save-logo").click(function(e) {
e.preventDefault();
$.ajax({
type : "POST",
data : data,
contentType: false,
cache : false,
processData: false,
url : "../../io/upload/"
}).done(function(rawData) {
$('.modal-header .close').click();
})
});
})

The problem is that you have your .save-logo click handler inside the .show-modal click handler. So every time the modal is shown, you attach another click handler to the .save-logo element. The code below should fix that problem:
$(".show-modal").click(function () {
$('.upload-modal').modal();
});
$(".save-logo").click(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
data: data,
contentType: false,
cache: false,
processData: false,
url: "../../io/upload/"
}).done(function (rawData) {
$('.modal-header .close').click();
})
});

$(function(){
var editUserId;
$('#edit-user-modal').on('show.bs.modal', function(e) {
editUserId = $(e.relatedTarget).data('userid');
});
$("#edit-user-form").submit(function(event) {
event.preventDefault();
var form = $(this);
var route = "/edit-user/" + editUserId;
if(validateEditUserForm()){
$.ajax({
type: "POST",
url: route,
data: form.serialize(),
success: function(Response)
{
if(Response){
console.log(Response.status);
console.log(Response.message);
if(Response.status == 'success'){
$('#adduser-alert-box').hide();
$("#add-user-form")[0].reset();
$('#adduser-success-box').show();
$('#adduser-success-box').html(Response.message);
}
else{
console.log('User could not be added');
$('#adduser-alert-box').show();
$('#adduser-alert-box').html(Response.message);
}
}
else{
console.log('No Response');
$('#adduser-alert-box').show();
$('#adduser-alert-box').html('No Response');
}
}
});
}
else{
console.log('Validation Error');
$('#adduser-alert-box').show();
$('#adduser-alert-box').html('Please Fill All the Fields Correctly');
}
});});
I faced the same issue and randomly i tried something .
so if you create a global variable to store the 'id' you pass from your button then store the id from the 'data' attribute of your button then it won't make multiple requests when clicked since you have declared the variable globally!
Hope it helps.

jQuery on success, reload the page and then append?

I have the following code:
$.ajax({
type: 'GET',
url: 'edit_slides.php',
data: { user_id: user_id },
success: function() {
location.reload();
$('#messageContent').append('<p>success</p>');
}
});
What happens right now is that it appends and then reloads real quick so it loses the message.
Now, I could take out the reload and it will append but in order for my changes to take affect, the page needs to be reloaded.
Is there anything else I can do? I want to show a success message after reloading the page.
Thanks!

location.reload() will reload your page, which creates a new request to your server and the browser then loads the response. You could add a parameter to the query string for the message, e.g.
$.ajax({
type: 'GET',
url: 'edit_slides.php',
data: { user_id: user_id },
success: function() {
window.location = "?message=success";
}
});
Then in server side code, you could display the message if the parameter exists. In ASP.NET MVC, it would look like this:
#if(Request["message"] == "success")
{
<p>success</p>
}
If you don't have server side scripting available, you can also parse the querystring with javascript.

You can have some delay before you reload the page. Try this
$.ajax({
type: 'GET',
url: 'edit_slides.php',
data: { user_id: user_id },
success: function() {
$('#messageContent').append('<p>success</p>');
setTimeout(function(){
location.reload();
}, 500);
}
});

Send it to a location but with a hash in the url to indicate a success:
$.ajax({
type: 'GET',
url: 'edit_slides.php',
data: { user_id: user_id },
success: function() {
window.location = window.location + "#success";
}
});
Now when the page loads, check for the hash:
$(document).ready(function(){
if(window.location.hash) {
$("#messageContent").append("<p>success</p>");
}