Develop Reference

Ajax method does not fire on initial page load

Note: Please see edit at the bottom after reading this question.
This issue is only happening in IE 11, and only started occurring after a recent Windows update. There were 5 updates, one of which was specific to IE, so I uninstalled that one. However, the issue still exists. Before I consider rolling back the remaining updates, is there something inherently wrong in my code? The following is inside the document ready function:
$('#leftmenu>li').click(function () {
var clickedId = this.id;
$.ajax({
url: "Session/Index/",
cache: false,
success: function (result) {
if (result.length > 0)
{
performListItemAction(clickedId);
}
else
{
window.location.href = 'Home/Index/'
}
}
});
});
And the following is the performListItemAction method (a separate function not in document.ready):
function performListItemAction(item)
{
alert("clicked");
$(".tabui").each(function ()
{
$(this).hide();
});
$(".listitem").each(function ()
{
$(this).css("background", "transparent");
});
$(document.getElementById(item)).css("background-color", "#C8C8C8");
var targetId = $(document.getElementById(item)).data('target');
var target = $(document.getElementById(targetId));
target.show();
}
The alert clicked never appears when this problem happens, and that is how I concluded the ajax call is not working.
A few other notes:
This issue isn't happening on Firefox.
This only happens if I directly login to the page with a direct URL. If I log in via the application's home screen, and then go to the page that uses the above javascript, the issue doesn't occur.
Thank you.
EDIT: I just now see that the same issue is now occurring in Firefox as well. It's just much less frequent.

After trial and error, I think I fixed the issue by adding a forward slash to the beginning of each of the URLs, and added the type: "POST", to the ajax call. I don't know why it was working fine before, but now this works in all my attempts.

jQuery.when.done() seems to not work in IE9. No console error either

I have written a jquery addon, with a little help from the internet, which retrieves data from Facebook and does as intended on all browsers tested so far apart from IE9.
I work for local government and unfortunately we still use IE9 in our builds (It was still IE8 a few weeks back!! So could have been a lot worse I expect :).
Anyways, I digress, I have added the section of code below which never completes in IE9, but does in IE10, and other browsers...
Can anyone explain/help me adapt or fix this snippet so that I can get it working in IE9?? And not break it in any other browsers in the process :)??
$.when($.getJSON(ogUSER), $.getJSON(ogPOSTS)).done(function (user, posts) {
// user[0] contains information about the user (name and picture);
// posts[0].data is an array with wall posts;
var fb = {
user: user[0],
posts: []
};
var idxLimit = 0;
$.each(posts[0].data, function () {
// We only show links and statuses from the posts feed:
if (this.type != 'link' && this.type != 'status') {
return true;
}
// Copying the user avatar to each post, so it is
// easier to generate the templates:
this.from.picture = fb.user.picture.data.url;
// Converting the created_time (a UNIX timestamp) to
// a relative time offset (e.g. 5 minutes ago):
this.created_time = relativeTime(this.created_time * 1000);
// Converting URL strings to actual hyperlinks:
this.message = urlHyperlinks(this.message);
//remove all anchors
//var content = $('<div>' + this.message + '</div>');
//content.find('a').remove();
//this.message = content.html();
fb.posts.push(this);
idxLimit++;
if (idxLimit === 2) {
return false;
}
});
In all browsers, not including IE9, if I insert a breakpoints anywhere within the .done() callback it stops execution and I can debug. With IE9 the breakpoint is not reached leading me to believe there is an issue with IE9 script engine and jQuery.when() API call, or the .done() callback method...
But, I'm just guessing at the mo... I've been searching the web for the last few hours to see if anyone else has happened upon a similar issue but to no avail. I hope some of the more experienced coders here can help... would be very much appreciated. Until then the search goes on :)
Thanks for your time folks ;)
PS. I don't receive any console errors what so ever in IE9 running the script...
TartanBono

Javascript: Why sometimes alert() does not work but console.log() does?

From time to time, I face a very intriguing bug. My javascript code does not display an alert(msg) during execution, but if I use a console.log(msg) it does show up in the console. What could prevent alert() from displaying?
Thanks a lot

This is a very common problem, and everyone has faced this problem atleast once.
The reason alert() does not work is because previously you have checked "prevent this page from creating additional dialoug" checkbox.
lets take a look at this code.
<script type="text/javascript">
var js_name = ['elem1', 'elem2']
for (var i = 0; i < js_name.length; i++) {
alert(js_name[i]);
};
</script>
There will be two alert boxes if you run the code. If you check the "prevent this page from creating additional dialoug" checkbox and then refresh the page again you won't get alert box ever again.
Solution is you need to close that webpage and reopen again in the browser(don't need to close the entire browser).
I am assuming you are using chrome.
Internet Explorer or FireFox doesn't have this checkbox feature.

If you override alert function so it won't work
alert = function()
{
...
};
alert('hello') // won't show any alert

To my knowledge alert() is always shown unless it is repetitive in which case you are asked if you want to continue showing alerts.
I suppose the specifics on how this is handled depends on your browser. Care to share any more details? :)

This also happens in ColdFusion. If you use anywhere after the script tag a cflocation tag (instead of location.href) the alert will not show.

This can also happen in Firefox if you have Dev Tools open and Responsive Design Mode enabled. It sounds like it's a bug.

In Firefox: go to Options -> Content and uncheck "block pop-up windows" check box. Restart browser.

Another reason why alert, confirm, and prompt may be ignored by the browser, is if the document is in an iframe that has a sandbox-attribute without allow-modals in its value.
For example, Firefox silently ignores this, however Chromium shows a warning.

If you try to execute javascript alert function in a Chrome browser address URL, you will not get the message if the the tab has no page previously loaded.
You will get the alert box only if it is not a fresh tab.
If there exists a web page that is previously loaded, and then you try to run the javascript in the address bar, you will get the expected result.
Hope it clarifies this difficult to detect behavior in Chrome.

If you have a location.reload() after the alert() function as shown below, JavaScript somehow skips the alert and reloads the page.
$.ajax({
url:'xxx',
type : 'POST',
data : datavalues,
dataType: 'json',
contentType: 'application/json',
success: function(response){
if(response.status == '200')
{
alert("updated");
}
}
});
location.reload();
To tackle this situation, I moved the reload function into the if block and this solved the issue.
$.ajax({
url:'xxx',
type : 'POST',
data : datavalues,
dataType: 'json',
contentType: 'application/json',
success: function(response){
if(response.status == '200')
{
alert("updated");
location.reload();
}
}
});

I have a similar problem here, when I replace the console log with "alert" it is not working but console.log does work.
The not working code is :
request(options, function(error, response, body) { // Requesting API
var statusCode = response.statusCode;
if(statusCode === 200){
alert("Success");
} else {
alert(error);
}
and the working code is:
request(options, function(error, response, body) { // Requesting API
var statusCode = response.statusCode;
if(statusCode === 200){
console.log("Success");
} else {
console.log(error);
}

Browser Window close detection

This is something that's been driving me nuts.
I'm trying to detect whether the uses closes or navigates away from a page in order to do an ajax response upon the event. I have tried almost every possible method to invoke this but no luck. The only thing I can think of is that the activate window in question was fired using: window.open() method. Could that cause any issues? What I have so far:
window.onbeforeunload = function() {
//ajax stuff here
};
However, I've noticed that this does not work after the page is fully loaded. The event fires within the first few milliseconds (if I open the window and try to close it right away) during the page load and won't work after that.
Any ideas?

I once ran into this issue, and found it worked for me only by setting async : false on the ajax, like this:
jQuery(window).bind('beforeunload', function () {
jQuery.ajax({
url: 'your.url',
async: false,
data: yourdata
timeout: 2000 // or whatever timeout in milliseconds you want
success: function(data){
// Do whatever you want
}
});
});
As Ian mentioned on the comments, it's a good idea to set a timeout to prevent the window for taking too long to close in case the request takes a while. And keep in mind it won't work in all browsers...

This also supports old versions of IE and Firefox.
window.onbeforeunload = function (e) {
var message = "Your confirmation message goes here.",
e = e || window.event;
// For IE and Firefox
if (e) {
e.returnValue = message;
}
// For Safari
return message;
};

Jquery script not working with IE

I written this script, to add JavaScript functionality to my online shop, the script works fine with Firefox and Chrome, but will not run on ie, and i am not sure why?
i am using jQuery(function( $ ){ instead of .ready due to script conflicts, i have tested the script using .ready and it still does not work with ie.
if anyone has an ideas they would be much appreciated.
jQuery(function( $ ){
setInterval(function(){ updatecart(); },8000);
$('.addtobag').on('click', function(){
event.preventDefault();
var postdata = new Object();
var action = $(this).closest('form').attr('action');
$(':input',$(this).closest('form')).each(function(evt){
var L = $(this).attr('name')
postdata[L] = $(this).val();
});
$.post(action, postdata);
generate('success'); //display banner
updatecart(); //update cart
});
var postdata = new Object();
postdata['basket'] = phpbasket;
function updatecart() {
$.post("/get_cart_details.php", postdata, function (data) {
var obj = $.parseJSON(data);
$('#qty_js').text(obj.items_qty);
$('#amt_js').text(obj.items_value);
});
}
function generate(type) {
var n = noty({
text: 'The item(s) have been added to your basket.',
type: type,
dismissQueue: true,
layout: 'topCenter',
theme: 'defaultTheme'
});
console.log('html: '+n.options.id);
setTimeout(function() {
$.noty.closeAll();
}, 5000);
}
});

Get rid of the console.log() statement. IE < 9 chokes on it and 9 only works if the console is open.

Try adding an event parameter in your click callback
$('.addtobag').on('click', function(event){

A couple things that might be tolerated in some browsers and not IE are that line 12 is missing a semicolon at the end, and the variable phpbasket is not defined (although if you defined it outside of the closure with 'var phpbasket' then you should be ok. If you debug it in IE 9 or higher, you should be able to see line numbers of errors in the console.

Not a complete answer, but it may point you in the right direction. I was actually about to ask a similar question - I found how to get IE 11 to load the jquery, but it required the user to hit "f12" and then "run activex" because apparently IE considered my code potentially unsafe. But when the user tells the activex to run, it works fine.
I am trying to learn how to use jquery to make touchscreen-friendly dropdown menus, so my code was basic - no css, no doctype, just basic html and js. If anyone else could shed some light on this it would be great.