Why would my jquery/javascript be buggy? - javascript

Why would my jquery/javascript be buggy?
(using foundation 4.3.2 with Jquery 1.10.2)
Firefox always gives a message to stop the script:
"A script on this page may be busy, or it may have stopped responding..."
Here is the function that gives the problems
function preparePlz() {
$('#plzform').on("submit", function (event) {
event.preventDefault();
var plzVal = $('#plz').val();
var regex = new RegExp("^([0-9]{5})$");
if (!regex.test(plzVal)) {
$('.errormessage').addClass("error");
if ($('.errormessage').hasClass("hide")) {
$('.errormessage').removeClass("hide");
}
$("#plz ").addClass("error");
}
else if(regex.test(plzVal)) {
$('.errormessage').addClass("hide");
$('.errormessage').removeClass("error");
$('#plz').removeClass("error");
$('#message').removeClass("hide");
var plzZone = plzVal.substring(0, 2);
$('#plzModal').foundation('reveal', 'open', {
url: 'http://vaeplan.com/kontact/zone',
data: {showtemplate: false, r: plzZone}
});
}
});
preparePlz();
}
$(document).ready(function () {
preparePlz();
});

You have infinite recursion. Think about it, what happens on document ready? preparePlz is called. What happens inside preparePlz? preparePlz is called. What happens inside preparePlz? preparePlz is called.

The last thing function preparePlz does is run itself:
preparePlz();
When the page loads preparePlz is run once, then goes into an infinite loop.
Change
});
preparePlz();
}
to
});
}

Related

Turbolinks: How to stop running functions when you leave the page?

In my Rails 5.2.2 app I am using Turbolinks.
I have discovered that when I leave a page, the functions that were started continues.
I have organised my functions below a return statement that checks the body class. In my example below, if the body class is not foobar the functions below do not run.
// assets/javascripts/pages/foobar.js
var goLoop;
$(document).on("turbolinks:load", function() {
if (!$("body").hasClass("foobar")) {
return;
}
return goLoop();
});
goLoop = function() {
return setTimeout((function() {
console.log("Hello");
return goLoop();
}), 1000);
};
First time I visit the page, the goLoop function is triggered.
When I follow a link away from the page, the function runs. If I had not used Turbolinks, this would not have happened.
If I follow another link back to the page, the function is triggered again, so now it runs twice.
How can I avoid this, without disabling Turbolinks?
Use the turbolinks:before-cache to teardown your timeout using clearTimeout. You will need to keep a reference of the current timeout ID. So your solution might look like:
var goLoop;
var timeout;
$(document).on("turbolinks:load", function() {
if (!$("body").hasClass("foobar")) {
return;
}
return goLoop();
});
goLoop = function() {
return timeout = setTimeout((function() {
console.log("Hello");
return goLoop();
}), 1000);
};
$(document).on("turbolinks:before-render", function() {
clearTimeout(timeout);
});
You can use PageVisibilityAPI to see is current page active or not.
and for the loop issue, you should check whether it's exist or not then run timeout function.

How to start javascript setinterval once cleared?

I have a setinterval that runes every 5 seconds. this works fine on page load.
I have the following scenarios:
Load page with interval (WORKS)
press button and load new content and stopp interval(WORKS)
Once the new content is no longer desiered, dissmiss it, return to first content and start interval again(DOES NOT WORK)
I have saftys suchs as events for window.blur that also stops the interval so that the browser does not commponsate for all the missing intervals if i would change tabs or something. Keep in mind that step 3 did not work BUT if i would after step 3 change a tab and then return to my original page(execute blur) the interval would start working again.
NOTE all content loading here exept page load is done with ajax calls.
My code:
initializing:
$.automation.worker.bindIntervalEvent("#TanksContent", "/Tank/GetTanks", function() {
$.automation.tanks.tableInit();
});
binding function:
bindIntervalEvent: function (target, url, callback) {
$(window)
.on("focus.mine",
function() {
$.automation.worker.setUpdateInterval(target, url, callback);
})
.on("blur",
function() {
$.automation.worker.stopUpdateInterval();
}).trigger("focus.mine");
}
interval function:
setUpdateInterval: function (target, url, callback) {
if ($.automation.globals.globalInterval.value.length === 0) {
$.automation.globals.globalInterval.value.push(window.setInterval(
function () {
var options = {
loadTarget: target
}
$.automation.worker.getView(url,
function() {
if (callback)
callback();
},
options);
},
5000));
}
}
the function that stops the interval:
stopUpdateInterval: function () {
if ($.automation.globals.globalInterval.value.length === 0)
return;
console.log("deleting");
for (var i = 0; i <= $.automation.globals.globalInterval.value.length; i++) {
window.clearInterval($.automation.globals.globalInterval.value[i])
$.automation.globals.globalInterval.value.splice(i, 1);
console.log($.automation.globals.globalInterval.value.length);
}
}
when stopping the interval i also remove the window bindings:
unBindIntervalEvent: function() {
$(window).off("focus.mine");
$(window).unbind("blur");
}
Back to step 3:
My sucess method in the callback to my getviewfunction is identical to what i execute in the beginning
code:
$(".updatelatest")
.on("click",
function () {
var _this = $(this);
var options = {
loadTarget:"#TanksContent"
}
$.automation.worker.getView("/Tank/GetTanks",
function (data) {
$(_this).switchClass("col-md-5", "col-md-1", 1000, function() {
$(_this).addClass("hidden");
$(".search").switchClass("col-md-5", "col-md-12", 1000, "easeInOutQuad");
})
$.automation.tanks.tableInit();
$.automation.worker.bindIntervalEvent("#TanksContent", "/Tank/GetTanks", function () {
$.automation.tanks.tableInit();
});
$(window).trigger("blur");
}, options);
});
but this does not start the interval. it is clearly initialized since it works when window.blur is executed for example when I change tab but for some reason this is not working beyond that.
i tried triggering the windows blur event and nothing happened, i tried triggering my custom window event "focuse.mine" but nothing happens.
I did not notice this while developing since I had firebug open and every time i checked scripts or css or the console the blur function was executed so I assumed that my code worked as intended but now that it is deployed I notice this.
My head is pounding beyond reason and I can't for figure out where I have gone wrong.
Well this was a fun one. I simply found that when calling the setUpdateInterval(); function directly it gave me the desiered result.
I realized that the reason I had them split like I did was becaouse of the blur event. "Focus.mine" is triggered to start the inteval again ocne a user comes back to the page.

Restrict amount of times jQuery slider fires change event?

I have the problem that the jQuery mobile slider fires too often to get handled properly on the server. I have something like this:
$("#testSlider").change(function( event, ui ) {
$.getJSON($SCRIPT_ROOT + '/_update_sliders', {
c: $('#testSlider').val()
}, function(data) {
g4.updateOptions( { 'file': data.result } );
});
This works perfectly fine, /_update_sliders starts a function in python which sends data.result back to the site. The problem occurs if I change the slider too fast - too many requests are send, when I stop the slider it takes quite some time too catch up and it even mixes up the requests - so the end state might not even present the actual slider value.
What is a clean solution to this? Anyway to restrict the amount of times the change event fires up?
Thank you and kind regards
lakerz
You could put a throttle on it using following concept. Uses setTimeout() to add delay, and if changes are constantly happening delay gets pushed back and it will not fire until a full delay period has ended
var sliderTimer,
sliderAjaxDelay = 100;
$("#testSlider").change(function (event, ui) {
if (sliderTimer) {
clearTimout(sliderTimer); /* if already a timeout, clear it */
}
// throttle requests using setTimeout
sliderTimer = setTimeout(sliderAjaxUpdate, sliderAjaxDelay);
});
function sliderAjaxUpdate() {
$.getJSON($SCRIPT_ROOT + '/_update_sliders', {
c: $('#testSlider').val()
}, function (data) {
g4.updateOptions({
'file': data.result
});
});
}
Adjust the delay variable to what suits you
I found a solution in jQuery which works, but I'm not sure if this is a "clean" way:
var complete = 0;
$("#testSlider").change(function (event, ui) {
if (complete == 1) {
sliderAjaxUpdate();
complete = 0;
};
});
function sliderAjaxUpdate() {
$.getJSON($SCRIPT_ROOT + '/_update_sliders', {
c: $('#testSlider').val()
}, function (data) {
g4.updateOptions({
'file': data.result
});
});
};
$( document ).ajaxComplete(function() {
complete = 1;
});

Sequencing two action on a button click

Problem: I have a asp.net button and on click of that I am displaying another window using window.open() at the client side using <script></script>
"I actually, need a popup (alert message) to be displayed on my parent page where my button is located once the user closes the child window."
Couple of things I tried are as follows:
I tried using setTimeOut() to have a time out for some milliseconds. This does not work as the control is not waiting until the time out is complete. It just proceeds to execute next set of code.
I tried using setInterval() but for some reason it is not working for me. Below is the code snippet of that:
$(document).ready(function () {
$('#<%=btnClick.ClientID%>').bind('click', function () {
var newWindow = window.open("http://www.google.com/", "google", 'resizable=1,width=900,height=800,scrollbars=1', '_blank');
newWindow.moveTo(0, 0);
var test = setInterval(function (e) {
if (newWindow.closed) {
alert("HEYY");
clearInterval(test);
__doPostBack("<%= btnClick.UniqueID %>", "");
}
else {
e.preventDefault();
}
}, 5000);
});
});
.
I also tried making an ajax call to open the new window and make it async : false, it again did not help me.
Bring your window and timer variable out of scope of the event handler. You need to do a polling i.e. periodically keep on checking if the windows has been closed. Using setInterval to do a polling will do the job.
var newWin, pollTimer;
$('#btnId').bind('click', function () {
newWin = window.open("...", "...", "");
pollTimer = window.setInterval(function() {
if (newWin.closed) {
window.clearInterval(pollTimer);
callCodeWhenPopupCloses();
}
}, 5000);
});
function callCodeWhenPopupCloses() {
alert("Popup closed.");
...
}

NightwatchJS .waitForElementPresent abortOnFailure not working

I'm using NightwatchJS with NodeJS: http://nightwatchjs.org/api
I have a modal dialog, which may or may not appear. It has a #close_button that needs to be clicked (if the modal does appear) to continue.
I set the abortOnFailure parameter of waitForElementPresent to false so the script continues if the modal does not appear. However I can't get it to work.
Any suggestions?
module.exports = {
"Test" : function (browser) {
browser
.url("http://domain.com/")
.waitForElementPresent('#close_button', 5000, false, function() {
this.click('#close_button')
})
.setValue('#username', 'test#email.com')
//more code here
.end(); //does end() go here or inside .waitForElementPresent() above?
}
}
abortOnFailure works fine, however waitForElementPresent has a bug now in which the callback you passed it's not called in the correct context. That will be fixed.
In the mean time you can write your test like this, with placing the click outside, which is the same thing and looks cleaner:
module.exports = {
"Test" : function (browser) {
browser
.url("http://domain.com/")
.waitForElementPresent('#close_button', 5000, false)
.click('#close_button')
.setValue('#username', 'test#email.com')
//more code here
.end(); // end() goes here
}
}
I ran into something similar, I was waiting for an iframe to be present. I created a function to actually close it:
pageObject function:
Home.prototype.closeIframe = function(browser) {
var self = this;
console.log('Checking for iframe');
this.browser
.isVisible(iframeSelectors.iframe, function(result) {
if (result.value === true) {
self.browser
.log('iframe visible')
.frame(iframeSelectors.name)
.waitForElementVisible(iframeSelectors.closeLink)
.click(iframeSelectors.closeLink)
.assert.elementNotPresent(iframeSelectors.iframe)
.frame(null)
.pause(2000); //allow for proper frame switching
} else {
console.log('iframe is not visible');
}
});
return this;
In my test I wait for the page to fully load before executing the above function.

Categories