We Keep Coding

Auto Trigger a button in Javascript. Lightbox Popup in featherlight.js

HTML Part
<a class="btn ban-default loginsignupbutton" href="#" data-featherlight="#fl1">Login/Signup</a>
<div class="lightbox" id="fl1">
<h2>Login</h2>
<input name="loginuserphone" placeholder="MOBILE NUMBER" type="text">
<input name="loginuserpassword" placeholder="PASSWORD" type="password">
</div>
What I want to do:
actually the basic script is working fine, when user clicks on the button, the lightbox popup is coming... but I want to AUTO open the popup, on page loads.
I Tried
$('.loginsignupbutton').trigger('click');
did't worked, then i tried.
$('a.loginsignupbutton').featherlight({
openTrigger: 'click',
});
did't worked.
Any help is appreciated.

Hidden div shows and disappears in a flash

I have a form with two div elements see code below:
DIV1 id="hide_onclick": should hide when a submit button is clicked
DIV2 id="show_onclick": should display when a submit button is
clicked
However when the Javascript executes on onClick, DIV2 displays query results in a flash and hides back. If i change the input type="submit" to type="button", DIV2 shows properly but i wont be able to get query results.
I could not figure out how to fix this.
<!--Form uses vehicle registration to pull record from database -->
<form class="form-horizontal" method="post">
<div class="row" style="padding-bottom:10px;">
<div class="col-sm-4">
Vehicle Registration
</div>
<div class="col-sm-8">
<input type="text" class="form-control" name="vehiclereg" value="<?php echo $vehiclereg;?>" />
</div>
</div>
<!--Visible div to hide on button click -->
<div id="hide_onclick">
<div class="row" style="padding-bottom:10px;">
<div class="form-group">
<div class="col-xs-12">
<input type="submit" name="retrieve_vehicle" value="Click to retrieve vehicle" onclick="show_hideDiv();" />
</div>
</div>
</div>
</div>
<!--Hidden div to display after the onclick event from the button above and displays the records-->
<div id="show_onclick" style="display:none;">
Upadates from database
</div>
</form>
<!--Javascript to hide the first div and display the second div -->
<script>
function show_hideDiv() {
document.getElementById("hide_onclick").style.display = "none";
document.getElementById("hide_onclick").disabled = true;
document.getElementById("show_onclick").style.display = "block";
}
</script>

It's because when you submit a form, it redirects the page to the action attribute. In your case, since you have none, it will refresh the page.
So, you are changing the div2 to visible, but then the page refreshs and goes back to the initial state...

There is a basic difference between type ="submit" and type="button". type="submit" will submit your form and reload the page. Thats why your div2 shows up untill the page load back.
On the other hand type="button" do not submit the page ( page does not reload) , it only calls your show_hidediv() function. My suggestion is to use ajax for this kind of situation where you dont want to reload your page but want to retrieve data from database.

The explanation is as LcSalazar says.
The solution (or perhaps a hack) I found, is using the display code from within the hidden div AGAIN.
Remember, you should keep all the rest of your codes.
<!--Hidden div to display after the onclick event from the button above and displays the records-->
<div id="show_onclick" style="display:none;">
<!-- keeps the div visible after the page refresh -->
<script>$('#show_onclick').css('display','block');</script>
<!-- Updates from database -->
</div>

Loading Placeholder tag in FORM when variables are set

I have a simple user settings form written in HTML5 which commits user defined settings to local storage.
I want it so that if someone access the settings page again, and the user settings are defined the placeholders and/or values prefill the form with those settings.
I have tried using window.load, document.ready at the end and the beginning, but I can only get the form to load thre values if I click reload. I need these value to prefil if the page is visited.
Here is my version of the form which loads the values if you RELOAD the page
Script first
function loadUserSettings() {
$("#full_name").attr("placeholder", db_user.full_name);
$("#mobile_number").attr("placeholder", db_user.mobile_number);
$("#email_address").attr("placeholder", db_user.email_address);
$("#full_name").attr("value", db_user.full_name);
$("#mobile_number").attr("value", db_user.mobile_number);
$("#email_address").attr("value", db_user.email_address);
}
and now the form
<body>
<div data-role="page" data-control-title="Settings" data-theme="b" id="settings" class="global_page">
<div data-theme="b" data-role="header" data-position="fixed" class="global_topbar">
<a data-role="button" data-transition="flip" href="index.html" data-icon="back" data-iconpos="left" class="ui-btn-left global_button">
Back
</a>
<a data-role="button" data-transition="flip" href="help_settings.html" data-icon="info" data-iconpos="left" class="ui-btn-right global_button">
Help
</a>
<h3 class="global_header">
Settings
</h3>
</div>
<div data-role="content" style="padding: 1%">
<form id="postSettings" action="" class="global_form">
<div data-role="fieldcontain" data-controltype="textinput" class="full_name">
<label for="full_name">
Name
</label>
<input name="full_name" id="full_name" type="text" data-mini="true"/>
</div>
<div data-role="fieldcontain" data-controltype="textinput" class="email_address">
<label for="email_address">
Email Address
</label>
<input name="email_address" id="email_address" type="email" data-mini="true"/>
</div>
<div data-role="fieldcontain" data-controltype="textinput" class="global_text_input">
<label for="mobile_number">
Mobile Number
</label>
<input name="mobile_number" id="mobile_number" type="tel" data-mini="true"/>
</div>
<input id="store_posting" type="submit" data-icon="plus" data-iconpos="left" value="Store Information" class="global_button" onclick="dbGoUser()"/>
</form>
</div>
</div>
</body>
<script language="JavaScript">
document.ready = loadUserSettings();
</script>
I have managed a workaround using a function that I attach to my settings buttons which basically
function loadSettingsPage() {
window.location.href = "settings.html";
}
and this works everytime prefilling the placeholders / values no problem, however I am using a datatransition link of 'FLIP' which is lost using the above function.
SO ideally I want to either fix injection of the placeholders when I click a normal link (which I suspect is just a page refresh type option that does not loop) or make my loadSettingsPage use the JQuery flip transition.
Thanks in advance for any assistance.

OK, I was able to get around the issue with some custom functions. I had to lose the flip effect, and move to a simple fade but I ended up using
function fadeIn() {
$("body").hide();
$("body").fadeIn(500);
}
function loadPageSettings(urlvar) {
$("body").fadeOut(500, function(){ window.location.href = urlvar; });
}
for the custom functions
All hyperlinks used something like this
<a id="home_new_journey" data-role="button" onclick="loadPageSettings('journey_info.html')" data-icon="plus" data-iconpos="left" class="global_button">New Journey</a>
and at the footer of every page I just had
<script language="javascript">
window.onload = fadeIn();
</script>
So now I have pages loading properly with all dynamic content an a consistent fading effect.

href inside a modal window

basically I have a webpage which triggers a modal containing an HTML form, this form has tabs that you can control with href values, however whenever I click on an anchor link it affects the parent page, but no the modal form.
Normally if the form is not in a modal and is implemented directly on an HTML page the href links work into moving the tabs of the form. However when I make the form into a modal from another page I have this problem.
Any solutions or javascript workarounds?
Here is the form inside the modal
<div class="tab-content ">
<div class="tab-pane active" id="panel6-1">
<div class="row-fluid">
<div class="span5"> <h4><i class="icon-user"></i> Property Details</h4>
<label>Selected Address : </label>
<input type="text" value="<?php $result = getAdressFromLatLng($_GET["lat"],$_GET["lng"]); echo $result->address; ?>" class="input-block-level" />
<label>Property Type </label>
<select>
<option id="">Residential</option>
</select>
<label>Property Subtype </label>
<select>
<option id="">Residential</option>
</select>
<label>
<button type="button" data-toggle="button" class="btn btn-mini custom-checkbox active"><i class="icon-ok"></i></button>
</label>
<br />
//here is the href that when I click on I want to show the panel6-2
Go to next tab<i class="icon-chevron-sign-right"></i>
</div>

Perhaps setting the target of the href in the modal to the name or id of the modal window? Otherwise could wrap in modal form in an iframe.

How to change the label of button after you login

I'm working on a school project in Java. I'm able to login user successfully who registered. But when he/she loged-in how can I hide Login and Register page link and replace them with MyAlumni. And after sign-out how can I show them again.
Here is the coding of my links on MasterPage
<td id="menucontainer" align="center">
<br>
<button id="homeBtn" onclick="window.location.href='Main.do'"></button>
<br>
<button id="loginBtn" onclick="window.location.href='ForwardGeneralAction.do?page=Login'"></button>
<br>
<button id="signupBtn" onclick="window.location.href='ForwardGeneralAction.do?page=SignUp'"></button>
<br>
<button id="helpBtn" onclick="window.location.href='ForwardGeneralAction.do?page=Help'"></button>
<br>
<button id="contactBtn" onclick="window.location.href='ForwardGeneralAction.do?page=Contact'"></button>
<br>
Please explain me step by step what I have to do. Many thanks

Most of the time, site will have a login.master to handle the login stuff, and like a site.master or default.master to handle the rest of it. I would suggest this in your case, too. You'd just put the login/register menu in login.master, and then the other menu in site.master.
In response to your comment, wherever your current master page is, add another one (right click, add, new item, master page) and copy the header type stuff from your other master page (sorry, I haven't done any web dev in java so I don't know the exact syntax)
And then your login master page (at least the menu part of it) will look like this:
<td id="menucontainer" align="center">
<br>
<button id="homeBtn" onclick="window.location.href='Main.do'"></button>
<br>
<button id="loginBtn" onclick="window.location.href='ForwardGeneralAction.do?page=Login'"></button>
<br>
<button id="signupBtn" onclick="window.location.href='ForwardGeneralAction.do?page=SignUp'"></button>
and then your other master page (the menu part) will look like this:
<td id="menucontainer" align="center">
<br>
<button id="homeBtn" onclick="window.location.href='Main.do'"></button>
<br>
<button id="alumniBtn" onclick="window.location.href='MyAlumni.do'"></button>
<button id="helpBtn" onclick="window.location.href='ForwardGeneralAction.do?page=Help'"></button>
<br>
<button id="contactBtn" onclick="window.location.href='ForwardGeneralAction.do?page=Contact'"></button>
The rest of the master page stuff is up to you!