Code not running synchronously in IE with Jquery - javascript

I'm having major difficulties getting IE to run jscript code synchronously. Other browsers have no problems. Here's an example of the code:
function renew_order() {
$.ajaxSetup({async:false});
// These 3 lines are to disable 2 buttons and show a progress indicator. This never happens,
// which is the main problem.
$('#cancel_order_button').attr("disabled", "disabled");
$('#renew_order_button').attr("disabled", "disabled");
$('#renew_order_load').show();
// Make some Ajax call to do some processing
$.getJSON(url, function(json) {
$.each (json, function (type, name) {
new_order_id = json.OrderId;
});
});
// Close the modal box this is diaplyed on and display some results on the web page
$.modal.close();
display_new_order(order_list);
}
Basically, the code runs, the modal box is closed, and the results are displayed. But the buttons on the modal box never show as disabled while the process is running. This only seems to be a problem with IE.

Try using the prop function instead.
$(".example").prop("disabled", true);
And if that doesn't work do
document.getElementById("example").disabled = true

I don't think this has anything to do with synchronicity, since the buttons should be disabled before the ajax call is even made. Check for javascript errors in the console window -- my guess is you're running into something there.

Related

Added data disappear

jQuery Core 3.1.0
Chrome, Firefox
Below is a model of jquery.ajax() success behaviour.
Shortly: I managed to fetch data via AJAX. In this model example the data is represented by "Just something" placeholder. Now I want to add the data to the document.
<script>
var add_date = $("#add_date");
function add_date_ajax(){
$('.frame_date').append("Just something");
debugger; // 1
}
debugger; // 2
add_date.click(add_date_ajax);
</script>
A problem: the data appear and then disappear in half a second.
I placed breakpoints.
When the page is loading, it stops at breakpoint 2. That is correct.
When I click #add_date element, the script stops at breakpoint 1. That is also correct.
But when I click "resume script execution", the script again goes to breakpoint 2. This seem strange to me. As if the page is reloaded. Maybe that is why the added text disappears.
Could you help me cope with the problem?
Added later:
https://jsfiddle.net/mv1yu3zw/1/
It disappears because you are reloading the page. The html
Add date
should be
Add date
To bind all your events, you should use the ready on document.
To avoid the reloading of your page (because of the href of the a tag), you have to call preventDefault or use a button.
You should write your code like this:
$(document).ready(function() {
$("#add_date").on("click", add_date_ajax);
});
function add_date_ajax(event) {
event.preventDefault();
$('.frame_date').append("Just something");
}

framework 7 on click not working while navigation

I have used framework built-in formToJSON() to get the form values. I have used click event to console the value.
$$("#query-submit").on("click", function () {
var queryForm = app.formToJSON("#query-form");
console.log(JSON.stringify(queryForm));
});
It works fine when page loads first time. But if I changed navigation to other page and return back to first page.
On debug, I found click event is not working when I went back to form page.
Also found this warning in console.
What is wrong here.
Note All pages were loaded via AJAX
Try this:
$$(document).on('click', '#query-submit', function(){
// your code
});

javascript window confirm pops up several times

i am trying to use the confirm method but for some reason the confirm window pops up several times. I googled and tried different things but unfortunately I can't get it running properly. The code is the following:
//user clicks on the delete button
$("#deletePopUpImage").click(function(){
console.log("deletePopUpimageCalled");
//get the id of the image
id = ($(this).parent().prop("id"));
//create the ajax request
data = "typ=function&functionType=deleteUserImage&id="+id;
//open the confirm box
var r = confirm("Are you sure that you want to delete this image?");
if (r == true) {
console.log("loadAjaxCAlled");
//Ajax call
loadAjax(data);
//hide the image and the loader
hideImagePopup();
} else {
//do nothing
}
});
The strange thing is that sometimes the confirm window pops up twice, sometimes three times and sometimes as expected once. That's why inserted the two console.logs.
"deletePopUpimageCalled" always appears just once. However "loadAjaxCAlled" appears several times.
In the success callback of the Ajax request I am just hiding the thumbnail div.
Do you know what's wrong with my code above?
Thanks
Stefan
Probably the code that attaches the event:
$("#deletePopUpImage").click(function(){...});
is invoked several times. Every invocation of .click(...) makes a new handler that fires when the button is clicked.
Some browsers stack up log the same entries into one (so the log doesn't extend so fast), that could be the reason you don't see "deletePopUpimageCalled" many times.
It would the best to check this by debugging it in the browser.
Ok I found the problem. In the Ajax success handler I set the div of the image, that was deleted, to display:none instead of deleting it. Thus divIds could occur twice, three times, etc. After changing the code to delete, it worked smoothly.

AJAX response caching / onclick-event inside of a function

I´m using AJAX to execute some server-side actions and refresh a table inside the page without reloading the page itself. All works fine at first view. But I wrote a function in PHP to send an email and execute it via AJAX. When I´m starting this action for a second time old responses gets triggered.
What exactly happens:
I´m clicking a Button to execute the "Sendmail-Action"
a Modal asks me if I want to execute the action and I´m clicking yes
a PHP-Script gets executed and sends the email
the Modal gets closed after the PHP-Script finishes (~2s)
the table (with emails and so on) gets refreshed and the status updated
What happens next:
I´m clicking a Button to execute the "Sendmail-Action" for the same
or another entry in my table
a Modal asks me if I want to execute the action and I´m clicking yes
the Event triggers twice / 4xAjax-Request instead of 2 (I can see it in my Chrome-Console)
the Modal closes and 2 Mails sended
What I´ve tried to get rid of this behaviour:
checked my JS with JSHint
checked my PHP-Code (no errors in apache error.log)
redesigned the PHP-Script (Sendmail), now the AJAX executes a function
tried different browsers
deactivated AJAX-Caching
completely deactivated Caching with Apache (correct Headers)
deactivated Session-Caching in my php.ini (I don´t use sessions)
unset all variables in PHP
cleared the cache for all of my browsers
checked all headers
searched several hours for solutions
More information about my setup:
jQuery 2.1.4
php 5.4
Apache 2.2
I can´t find a solution to my problem and maybe this is caused because I´m adding the content dynamically to the table. I had the same problem in the past and I´m thinking the Modal (which is also dynamic) triggers the click on the "Yes-Button" twice.
You can put your ajax click handler outside of that function:
$(document).on('click', '.email-resend, .email-send, .show-doc, .show-acc, .more-acc, .no, .yes, .termin', function(){
$.fn.doAction(classname, comEntry);
});
As you mentioned that you have placed this in the function. Instead you should put this outside of it:
$(document).on('click', '.bt-ok', function(){
$.ajax({
....
});
});
Edit by #pandora: Or just use a second function (in my case) like this:
$(document).on('click', '.bt-ok', function(){
$.fn.sendRequest($('#modal').attr('data-1'), $('#modal').attr('data-2'));
});
Then I can call the function like this and execute the AJAX:
$.fn.sendRequest = function(data1, data2) {
$.ajax({
url: 'target.php',
cache: false,
data: { gimme1 : data1, gimme2 : data2 },
success: function(response) {
// Show Error
if(response.length > 0){
alert(response);
}
// Reload Content
$.fn.Reload('','');
// Close Modal
$('#modal').css({'display' : 'none'});
}
});
};

Function not being bind at page load

I am trying to avoid my page being refreshed after submitting my form. In order to do this I've added into my javascript section
$("body").on('click',"#register",new_user_pop);
$("body").on('click',"#screen",pop_out);
$("body").on('click',"#new-user",pop_registration);
$('form[name=new-user-form]').on('submit',function(event) {
event.preventDefault();
alert("Not refreshing");
The function works properly as in order to debug it I pasted it on the Terminal from the Chrome's developer tools and it started working.
But for some reason I do not know it does not work it does not get loads at the beginning.
The previous function $("body").on('click')... work all fine.
Make sure your code runs after you've defined the HTML elements you want to attach your events to.
You can either do this by placing your script below the HTML bit you need.
Or you can wrap your code in an onready/load callback:
$(document).ready(function () {
/* code goes here */
});

Categories

Resources