Weird JS flow in firefox - javascript

My JS code is as follows
if (fileControl != NoFileMessage) {
if (fileControl.val() != NoFileMessage) {
var valid_extensions = /(.xlsx)$/i;
if (!valid_extensions.test(fileControl.val())) {
alert($("#txtInvalidFileFormatMsg").val());
return false;
}
...
}
}
During first execution the alert is shown and then the control "jumps back" to the first if statement instead of continuing to return false, due to which the code is executed twice and the alert is shown twice
Due to this, the alert box is shown twice. Any pointers on how I can fix this? It's working fine in other browsers (including IE !)
UPDATE:
Some more insight, this piece of code is being called on the .change() event of a <input type='file />'
As I've stated earlier, the code snippet is executed twice, after some digging in, I figured out that the .change() event is being fired twice. Why does this happen in FX only?

Related

JavaScript code is not executed during the runtime of the code, but when I debug it and execute in console, it works

I have a following code:
var e = document.getElementById("overlay");
e.parentNode.removeChild(e);
This code is supposed to remove the DOM element, but it doesn't. So I removed the code and added a breakpoint in its stead and input the code in the console during the pause manually, and it worked (i.e. the element was successfully removed).
This behavior seems rather strange for me, so I wanted to ask, why does it happen and what can I do to inspect this peculiar issue?
Thanks in advance.
EDIT: Thanks for quick replies. Nonetheless, I want to make it perfectly clear that the element #overlay does exist at the time of the execution of the code. Moreover, when I put a debugging breakpoint at that place in the code and execute these two lines of code, it does have an effect on this particular existent element (which it doesn't without debugging).
EDIT 2: I was asked to clarify the code. I execute the following code before the body (part of the queryloader2 plugin, which ensures image preloading):
window.addEventListener('DOMContentLoaded', function() {
new QueryLoader2(document.querySelector("body"), {});
});
No errors present (except for a 404 error because of missing image, which has no impact on Javascript).
As Teemu mentioned #overlay more than likely doesn't exist when the code is run.
For a test.. Try wrapping your code in either of these...
Javscript
window.onload = function () { /*your code*/ };
Jquery (if included)
$(document).ready(function () { /* your code*/ });
You should execute your code after the DOM tree has finished loading. One option is to wrap your code in a function that executes after the DOMContentLoaded event has been fired.
document.addEventListener("DOMContentLoaded", function(event) {
// your code
});
Look at this answer for more information: $(document).ready equivalent without jQuery

JQM .bind function call hangs on a method, but script still completes

I'm just getting started with Javascript, jQuery, and jQuery Mobile. I'm trying to go through a tutorial online, but I'm getting caught up on the mobileinit event handler. Here is the code:
<script type="text/javascript">
$(document).bind("mobileinit", function() {
Notes.testHelper.createDumyNotes();
Notes.controller.init();
});
</script>
If I put an alert before and right after Notes.testHelper.createDummyNotes(); the alert is called. However, if I put the alert right after Notes.controller.init(), the alert isn't called. I imagine this means the code stopped in that function. However, if I put an alert right before the closing script tag outside of the function, that alert is called--This is what confuses me. How can a method hang and not allow the rest of a function to complete but still let the script complete?
As an interesting aside, I forgot to put the script tags around this .bind function at first, and the html was styled correctly. However, once I put the tags around this function, the html appeared but wasn't styled.
Any suggestions? As I said, I'm new to javascript, so this could be a fundamental misunderstanding of the way the language executes.
Thanks for your help!
The contents of $(document).bind("mobileinit", function() { ... } will be called when the mobileinit event is triggered, which will be AFTER the code between the script tags are read. This is why the alert you placed just before the closing script tag is executed.
If you put alert(1); before the closing tag, and alert(2); after the function() { and alert(3) after the createDumyNotes(), you will probably get 1 and 2 but not 3.
I think you're on the right path in that the error is occurring in the createDumyNotes() function. I suggest you get into that function with some try { ... } catch(e) { ... } and pinpoint where the error is occurring (assuming Notes and Notes.testHelper are valid objects, and Notes.testHelper.createDumyNotes() is an existing function.
EDIT
I just noticed that your function is createDumyNotes() instead of createDummyNotes(). Is this nothing more than a misspelling?

Chrome is not executing all lines in callback for jQuery animation

I have some code that animates a <div>. When the animation is complete, several things need to happen (mostly manipulation of CSS on various elements), so I naturally put them callback provided by jQuery's .animate();
It behaves as expected in Firefox. I can't tell whether or not it's an issue in IE because there are still some CSS issues preventing it from displaying properly there - I can't tell if it's the CSS or the same problem I'm having with Chrome. Regardless, for the moment, I'm focusing on Chrome.
One thing to note is that it doesn't happen if I do a console.log right before the line that's not being executed. Same if I insert a breakpoint and then let it continue.
$sliders.animate($thisSlideConfig, 250, function() {
$newPg.removeAttr('style');
$curPg = $newPg;
$curPgInf = plugin.getPgInf($curPg);
plugin.setIndTxt();
load2nav();
plugin.adjustNavState();
doCleanup();
});
The line nor being run is $newPg.removeAttr('style');
It doesn't seem to matter where in the block I put that line or how I select $newPg.
Oh yeah, I'm on Chrome 19.0.1084.52.
Removing the style attribute is unreliable. It may not trigger redrawing of the page (whereas a console log or a breakpoint force it to). Instead, try manually calling:
$newPg.style.XYZ = "";
For each style property you defined, if you can list them. If not, try this:
for( var x in $newPg.style) $newPg.style[x] = "";
These will trigger the correct redraw, and should hopefully stop the problem.

Greasemonkey addEventListener not firing?

I've looked through various other questions about this and they are all fixed by using addEventListener rather than onclick. My problem now is, the events dont fire at all.
Basically I have an array of elements on my page which are "buttons", I then loop through that with this code:
for (var i = 0; i < buttons.length; i++) {
buttons[i].className = "button";
buttons[i].style.width = "50px";
buttons[i].href = "#";
$(buttons[i]).bind('click',function (e) { alert("Hi"); }); //I have even tried jQuery. This isnt here when the line below is here.
buttons[i].addEventListener('click',function (e) { alert("Hi"); },false);
}
Heck I even tried loading it into a tag it just never works and I am unsure as to why. I have another user script on the same page which is able to bind on to things perfectly fine with the same method.
There is no errors in the console, just nothing happens. However when I make the function self invoke by adding () to the end of it, it runs the code when the page loads resulting in the alerts being shown.
Hmm, this is more about how to debug your greasemonkey code I think. I can't see anything wrong with the code.
I usually have 1 function to throw things to firebug:
function GM_log(element) {
unsafeWindow.console && unsafeWindow.console.log(element);
}
In this case, I'd be curious whether there are any buttons selected, so I'd log the buttons-array, and log something (in stead of an alert) in the click-functions.
Another possibility is to set the userscript in chrome, which allows you to debug the code there (firebug doesn't know the greasemonkey scripts code). But locating/altering the script is harder there, so it's only for when you are really lost.

JQuery .show() and equivalent CSS modification not working with IE 8

There are several posts relating to this, but none actually gives a solution.
What actually happens is as follows:
function LoadSpinner()
{
$("#divSpinner").css('display','block'); // could have done with .show()
}
function UnloadSpinner()
{
$("#divSpinner").css('display','none'); // could have done with .hide()
}
function OnClickMyButton()
{
LoadSpinner();
AnAjaxCall(); // it's set to async: false, that means the ajax call must finish before execution continues
UnloadSpinner();
}
I tried commenting the UnloadSpinner() and it does show in IE 8. Could it be that it happens so fast that I don't see it. But I am not too sure about that, cause even for some slower operation it does not show up.
It's working fine on Firefox though.
Is the issue that you're doing a synchronous ajax call? I believe this freezes the browser from executing any other actions including repainting the screen to show your spinner. Try making your ajax call asynchronous and hide the spinner in the callback. I bet you that works. Something like this:
function OnClickMyButton()
{
LoadSpinner();
AnAjaxCall(function() { UnloadSpinner() } );
}
function AnAjaxCall(callback)
{
//do ajax. On complete, call callback. check the web for examples.
}
I would bet you the issue has nothing to do with jquery, but with the synchronous ajax call.
To test my theory try this code:
function OnClickMyButton()
{
LoadSpinner();
setTimeout(function() { UnloadSpinner() }, 2000);
}
I bet you the spinner appears for 2 seconds just fine. If it doesn't then ignore this post.. I'm completely wrong.
$(function() {
$("#d").hide();
$('#b').click(function() {
$('#d').show();
});
});
<div id="d">hello</div>
<input type="button" id="b" />
Works fine for me in IE.
Do you have a specific example ? I don't recall encountering that problem despite I use show() quite often.
I have done a bit of debugging on it and found that the Browser wasn't doing the necessary updates on time. That is why by the time it was suppose to be visible, the Unloader() was called and it got hidden again.

Categories