Develop Reference

What could cause window.onload to fire infinitely?

I have a web page with a bunch of automatically generated contents (I can't touch the HTML). Usually, what happens is:
User selects something on the web page (ex. enter donation amount)
User clicks a button to enter personal information (as far as I know, the inputs are loaded after the button is clicked and takes around 1-2 seconds to load)
I'm trying to add some code to allow the user to enter some information before clicking the button, and the logic basically works like this:
the web page is loaded
place mydiv between some automatically generated contents
when user selects an option, put that information in local storage
when user clicks the button to generate personal informations, use setinterval to try to put the value in local storage in the corresponding field every 100ms, and call clearInterval when it succeeds (basically, it should work with 100ms of the personal information fields being loaded)
<style>
/* some styles */
</style>
<div id="mydiv">
<span style="font-weight:bold; margin-left: 12px;">
Please select an option
</span>
<div id="mydiv-options" style="margin-left: 14px;">
<input id="getinfo-mydiv" type="radio" name="mydiv-question" onclick="setstorage(0)">
</input>
<label for="getinfo-mydiv">
option1
</label>
<br>
<input id="future-mydiv" type="radio" name="mydiv-question" onclick="setstorage(1)">
</input>
<label for="future-mydiv">
option2
</label>
<br>
<input id="already-mydiv" type="radio" name="mydiv-question" onclick="setstorage(2)">
</input>
<label for="already-mydiv">
option3
</label>
<br>
<div id="clear-selection" onClick="clearSelection()">
Clear selection
</div>
</div>
</div>
<script>
// some functions
let repeatTryCheck = null
function setstorage(x) {
console.log("setstorage")
window.localStorage.setItem('selected', x)
}
function tryClickInput() {
console.log('tryClickInput')
let elementLoadedAfterUserClicksButton = document.getElementById("some-input")
if (elementLoadedAfterUserClicksButton == null) {
return
} else {
clearInterval(repeatTryCheck)
}
// do stuff with the value from storage
}
function tryClickUntilLoaded() {
console.log("tryClickUntilLoaded")
repeatTryCheck = setInterval(tryClickInput, 100) // 10x per second
}
function placeBeforeGeneratedDiv() {
console.log("placeBeforeGeneratedDiv")
let comments = document.getElementById("generateddiv")
comments.insertAdjacentElement('beforebegin', document.getElementById("mydiv"))
document.getElementById("mydiv").style.display = "block"
}
var i = 0;
function init() {
console.log("init")
placeBeforeGeneratedDiv() // place mydiv before generateddiv
document.getElementById('button-to-load-personal-info').addEventListener('click', tryClickUntilLoaded)
setstorage(null)
console.log(i)
i = i + 1
}
window.onload = init
</script>
The problem I keep getting is that the init function keeps getting called and I can't figure out what's causing it (I used this code on another page and it worked well)
Thanks

Dialog appears on every refresh

I have to build a dialog in my entry site. The problem is, it appears every time and I can't close it (click on the button just refreshes the site, with the dialog appearing again). I also thing that I know the reason, but I'm able to fix it.
This is my dialog
<p:dialog id="ac-wrapper" widgetVar="test" style='display: none; background:white;' modal="true"
resizable="false" closeOnEscape="true" closable="true" visible="true">
<div id="popup">
<h2>Some Content</h2>
<input type="submit" name="submit" value="Submit"
onclick="DialogBox('hide')" />
</div>
</p:dialog>
Here is the javascript that should handle this:
<script type="text/javascript">
$ = jQuery;
function DialogBox(hideOrshow) {
if (hideOrshow == 'hide') {
localStorage.setItem("isShown",1);
document.getElementById('ac-wrapper').style.display = "none";
document.getElementById('ac-wrapper').visible="false";
$("#ac-wrapper").close();
}
else if(localStorage.getItem("isShown") == null) {
document.getElementById('ac-wrapper').removeAttribute('style');
localStorage.setItem("isShown",1);
}
}
window.onload = function () {
setTimeout(function () {
if(localStorage.getItem("isShown") != 1 ){
DialogBox('show');
}
else if(localStorage.getItem("isShown")){
$("#ac-wrapper").remove();
}}, 1000);
}
</script>
By rendering the site, the dialog always appeares because the visible attribute is set on "true". I guess the order is incorrect. It should frist check the local storage and then render the elements, I'm not getting it to work correctly. I also looked for answeres here with similar problems, but nothing helped.

The issue is this
<input type="submit" name="submit" value="Submit"
onclick="DialogBox('hide')" />
because its an input type submit, its defaulting to the form behavior... which is to redirect to the same url using GET. Change the type and value to "button" and "close" and your problem will be resolved

Unable to prevent user from going back to previous Log In page

Currently the users see login page when they open the application. Upon signing in, they get into the main page. I want to prevent the user from going back to the login page once they are logged in which the user can easily do by just clicking on the back button on the phone or the web browser.
The following method does that by preventing me from going back or forth to the page I want. For example if I identify the id as #home, it is going to prevent me from going back to homepage. Problem is this works for all my pages in my application less the one page I actually want to enforce this on which is my login page. When I use the login page's id, nothing happens and I am able to go back to the login page by clicking the back button. Please advise what I am doing wrong.
JS
// triggers when leaving any page
//this doesn't work cos I am using the id of my loginpage. Other page's ids works.
$(document).on('pagebeforechange', function (e, data) {
var to = data.toPage;
if (typeof to === 'string') {
var u = $.mobile.path.parseUrl(to);
to = u.hash || '#' + u.pathname.substring(1);
if (to === '#loginForm') { //will work if I use #benefits for example.
alert('Can not transition the page!');
$.mobile.changePage("#home", {
transition: "flip"
});
e.preventDefault();
e.stopPropagation();
// remove active status on a button, if transition was triggered with a button
$.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-shadow').css({
'box-shadow': '0 0 0 #3388CC'
});
}
}
});
HTML for LOG IN Page
<div data-role="page" id="loginForm" data-theme="e" data-add-back-btn="false">
<header data-role="header">
<h1>Log In</h1>
</header>
<form id="form1" name="form1" method="GET" action="http://example.com">
<label for="id">Username </label>
<input type="text" name="id" id="id" />
<label for="password">Password </label>
<input type="password" name="password" id="password" />
<input type="hidden" name="rank" id="rank" value="123">
<input type="submit" name="submit" value="Login"/>
</form>
</div>
HTML for Benefits Page
<div data-role="page" id="benefits" data-theme="e">
<header data-role="header">
<h1>Benefits</h1>
</header>
<article data-role="content" >
<div data-role="collapsible-set" id="benefitsList">
<!--will fill up with info from database-->
</div>
</article>
</div>
EDITED:
$(document).on('pagebeforechange', function (e, data) {
var to = $.mobile.path.parseUrl(data.toPage);
if (typeof to === 'object') {
var u = to.href;
if (u === $.mobile.navigate.history.stack[0].url) {
alert('You are logged in!');
var current = $.mobile.pageContainer.pagecontainer("getActivePage");
$.mobile.pageContainer.pagecontainer("change", current);
}
}
});

The problem that the code above works on all pages except for first page loaded, is because - by default - jQM doesn't change hash in URL for first page. The code above checks if there retrieves hash from URL, since there is no hash for first page, it returns false and thus doesn't prevent user from going back to "login page".
The code below checks URL and compares it with .url of first page loaded. The .url is stored in $.mobile.navigate.history.stack and it has 0 index, since it is first page.
jQuery Mobile 1.4
$(document).on('pagebeforechange', function (e, data) {
var to = $.mobile.path.parseUrl(data.toPage);
if (typeof to === 'object') {
var u = to.href;
if (u === $.mobile.navigate.history.stack[0].url) {
alert('You are logged in!');
var current = "#" + $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
window.location.hash += current;
return false; /* this will stop page change process */
}
}
});
jQuery Mobile <= 1.3
Change
$.mobile.navigate.history.stack[0].url
to
$.mobile.urlHistory.stack[0].url
Change
$.mobile.pageContainer.pagecontainer("getActivePage")[0].id
to
$.mobile.activePage[0].id
Demo - Code

How to Input and Output Javascript?

Ok Guys I need help in this case and please help if you can :(
I have following div created with text-type input
<div class="footer">
<div id="footerInner">
<form>
<input type="text" name="enter" value="" id="input"/>
</form>
</div>
</div>
I have also created above .footer .mainBody
<div class="mainBody">
<script src="Scripts/main.js">
var h = document.getElementById('input').value;
document.write(h);
</script>
</div>
And I have included Javascript in it
I want to work it this way: when I input text in input tag to appear in .mainBody div.
And also do I need button to submit input or it can be done with key press for Ex. "Enter"?
Guys onkeyup="writeThis()" isn't working it just reloads page :(

To execute some events on keyevents, you need to write the onkeyup or onkeydown or any other key function in the element. And in that attribute you can add the function's name which would respond to the event. I will write my function's name as writethis() which will write the value to the div.
You then need to use this:
<input type="text" id="input" onkeyup="writethis()" />
And the function would be:
function writethis() { // the function
var h = document.getElementById('input').value; // the value
document.getElementsByClassName('mainBody').innerHTML = h; // the input
}
This way, you will get the input written on a keypress!
You can also try and use some keyevents such as:
if(event.keyCode == 13) { // enter key event
/* key code for enter is 13
* do what so ever you want */
}

Ok, try this as your JS script content in html head section:
function writeOnBody() {
var inputText = document.getElementById('input').value;
var mainBodyEl = document.getElementById('mainBody');
mainBodyEl.innerHTML = inputText;
}
your HTML code:
<div class="footer">
<div id="footerInner">
<form>
<input type="text" name="enter" value="" id="input" onkeyup="writeOnBody()" />
</form>
</div>
</div>
<div id='mainBody' class="mainBody"></div>
I hope it helps. JSFiddle sample: http://jsfiddle.net/amontellano/JAF89/

var h = document.getElementById('input').value; // the value
document.getElementsByClassName('mainBody').innerHTML = h;
avoid using getElementsByClassName instead give you div a id and use getElementById..
rest is in my opinion the best solution..
and yes you can also you a button also all you have to do is call you function on onclick event like this
<button onclick="functionZ()">click me</button>
and define that functionZ in your java script
What we are doing here is..
Adding a button and a click event upon it..such that when that button will be clicked it will call a function for us..
Make sure to add your scripts in lasts part of your page as page loads from top to bottom so its good practice to add scripts just near to end of body

form in popover not working

I'm using bootstrap and I want to create a form in a popover. I've done this but I can't type in the textfield of the form. Does anyone know why?
*update It's inside a modal. Outside the modal it works but inside it doesn't...
*update2 Almost there I think. When I open modal and popover, I can't type in the textfield. After I close modal, popover is still open and then I can type in the textfield. So there must be some z-index between the textfield and popup. Real sloppy but I tried input{z-index:9999;} but it didn't work
<a href="#" class="add_nr" data-nummer-id="nr_1" rel="popover">
<div id="add_number" class="popover">
<div class="addnr" id="nr_1">
<form class="form-inline">
<div class="controls">
<input type="text" placeholder="Artist">
</div>
<div class="controls">
<input type="text" placeholder="Number">
</div>
cancel
<button type="submit" class="btn">add number</button>
</form>
</div>
</div>
$(function(){
$('.add_nr').on('click', function(event){
var $this = $(this);
event.preventDefault();
$('.add_nr').not($this).popover('hide');
$this.popover('show');
}).popover({
trigger: 'manual',
placement: 'bottom',
content: function(e) {
var $this = $(this),
nr_id = $this.data('nummer-id');
return $('#' + nr_id + '.addnr').html();
}
})
});

When a Modal is launched it maintains focus upon itself, preventing the elements in the form from obtaining focus. A simple workaround would be to disable the listener when the modal launches:
$('body').on('shown','.modal', function() {
$(document).off('focusin.modal')
});

For anyone coming to this issue (popovers with forms not working modals) and who are using Bootstrap 4, you can fix this by using data-modal="false" on the button/controller that opens the modal. E.g.:
<button type="button" class="btn" data-toggle="modal" data-target="#new" data-focus="false">
If you're opening your modal using JS, you can pass in a focus option. Full docs on the options here