I am working on a webpage. In one page we have 3 tabs A B and C. each tab contains some table with dynamic content and a Refresh button to reload the page(here we use window.location.reload() as we get the data as a single dump from data model).
The issue i'm facing is that even if i reload the tab C my page is going back to tab A. I need a method to store the status of which tab is active before reload.
The tab is called within an iframe with id 'mainFrame'
HTML:
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab A</label>
<div id="tab-content1" class="tab-content">
<div class="btn-div">
<input type="button" value="Refresh" onclick="refresh();">
</div>
<table class="x_table" >
</table>
</li>
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab B</label>
<div id="tab-content1" class="tab-content">
<div class="btn-div">
<input type="button" value="Refresh" onclick="refresh();">
</div>
<table class="x_table" >
</table>
</li>
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab C</label>
<div id="tab-content1" class="tab-content">
<div class="btn-div">
<input type="button" value="Refresh" onclick="refresh();">
</div>
<table class="x_table" >
</table>
</li>
</ul>
SCRIPT:
$(function(){
$(window ).unload(function() {
sessionStorage.setItem("tab1", $('#tab1').checked);
sessionStorage.setItem("tab2", $('#tab3').checked);
sessionStorage.setItem("tab3", $('#tab3').checked);
});
$(window).load(function() {
if (tab1){
document.getElementById("tab1").checked="true";
} else if (tab2){
document.getElementById("tab2").checked="true";
} else if (tab3){
document.getElementById("tab3").checked="true";
}
});
});
Thanks in advance
Store the active tab status in session, localStorage or as http request parameter and based on that hide/show the tab content on page load.
For example, if it is localStorage, then,use:
Before reload page:
localStorage.setItem("ActiveTabID" , "tab2");
Then on load:
$(window).load(function() {
var activeTab = localStorage.getItem("ActiveTabID");
if(activeTab=="tab1"){
$('#tab1Content').show();
$('#tab2Content').hide();
$('#tab3Content').hide();
}else if(activeTab=="tab2"){
$('#tab2Content').show();
$('#tab1Content').hide();
$('#tab3Content').hide();
}
likewise tab3, also show if it is active.
Related
INTRO:
Providing a little context: I am trying to create workaround solutions in a HTML/CSS/JS based webticket builder.
This means I am creating online forms with a drag and drop tool that automatically generates titles, names, ids and all that in the general HTML code. So what I can't do is change the overall set up.
Every selection field I create though gives me a small textfield which is supposed to be used as a help field for this particular selection field. So for example I have a text field "mail adress" - the help text would then show "please use the format firstname.lastname#mailprovider.com" underneath it.
This "help" textbox is plain HTML, providing me with the possibility to add extra code inbetween - hence it's everything but pretty.
the html layout is not my idea, and I can only partially change it.
What I want to do:
Create an extra list with empty links, so I can use "onclick" on each item:
<!-- automatically visible -->
<!-- Checkbox im Status checked -->
<input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested:
<!-- Modal / Pop Up Fenster -->
<div id="mymodal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- List items as links to make them clickable -->
<ul id="myUL">
<font size="3em">
<li><a id="li1" title="item1" href="#" onclick="returncontent(this);return false;showitem1();">Item 1</a></li>
<li><a id="li2" title="item2" href="#" onclick="returncontent(this);return false;showitem2();">Item 2</a></li>
<li><a id="li3" title="item3" href="#" onclick="returncontent(this);return false;showitem3();">Item 3</a></li>
</font>
</ul>
</div>
</div>
The selection list then has 3 triggering functions:
1. returning the selected item to another textfield (works)
2. not opening a "#" site (works)
3. show further selection fields based on the selected list item (does not work)
This is basically an attempt to create a dynamic webform, as the tool itself doesn't provide such options
So this is what I additionally have:
- a fieldset with class "item1" and two textfields:
This code is copied directly from the tool, hence the intuitive ids and layout in general.
<fieldset class="item1"><legend>Item 1 Selections</legend><div id="d_000000001845952" class="field text"><label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div><div id="d_000000001844977" class="field text "><label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" /></div></fieldset>
a CSS code hiding the fieldset "item1" when the webform is opened:
.item1 {
display: none;
}
and my js functions:
The first to return selected item to a specific textfield:
<script type = "text/JavaScript">
function returncontent(elem) {
document.getElementById("f_000000001845521").value=elem.title;
document.getElementById("mymodal").style.display = "none";
document.getElementById("check").checked = false;
}
returncontent();
</script>
And the second to show me the necessary selection fields for list item 1:
<script type = "text/JavaScript">
function showitem1() {
document.getElementsByClassName("item1")[0].style.display = "block";
}
</script>
And now the latter is, what doesn't work and I don't understand why.
I have build several checkboxes that display/hide individual fields and fieldsets via ID or class so for my understanding I didn't do anything different this time except triggering two functions at once.
Here you can find a fiddle of what I am trying to do.
I do not know why you do it, but your problem will be solved by changing the order of functions in your onclick. I changed the place of return false; after showitem1()
Check workable version here
<ul id="myUL">
<font size="3em">
<li><a id="li1" title="item1" href="#" onclick="returncontent(this);showitem1();return false;">Item 1</a></li>
<li><a id="li2" title="item2" href="#" onclick="returncontent(this);showitem2();return false;">Item 2</a></li>
<li><a id="li3" title="item3" href="#" onclick="returncontent(this);showitem3();return false;">Item 3</a></li>
</font>
</ul>
I've change a couple parts of your code here but the most notable is that you can call the first (almost global type of function) from the the second function. I did also combine the three showitem functions into one and set which fieldset to show based off the clicked elements title.
You can call each function from the onclick. You would simply need to change the order of return false;, placing it at the end (or just remove it and return: false; from the function!?!).
function toggleBoxVisibility() {
if (document.getElementById("check").checked == true) {
document.getElementById("mymodal").style.display = "block";
var els = document.getElementsByClassName("item");
Array.prototype.forEach.call(els, function(el) {
el.style.display = "none";
});
} else {
document.getElementById("mymodal").style.display = "none";
}
}
toggleBoxVisibility();
function returncontent(elem) {
document.getElementById("f_000000001845521").value = elem.title;
document.getElementById("mymodal").style.display = "none";
document.getElementById("check").checked = false;
}
function showitem(elem) {
returncontent(elem);
document.getElementsByClassName(elem.title)[0].style.display = "block";
return false;
}
.item1,
.item2,
.item3 {
display: none;
}
<input id="f_000000001845521" name="id12" value="This field is set automatically, based on chosen element from the list below." />
<div class="help">
<script type="text/JavaScript">
document.getElementById("f_000000001845521").readOnly = true;
</script>
</div>
<!-- automatically visible -->
<!-- Checkbox im Status checked -->
<input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested:
<!-- Modal / Pop Up Fenster -->
<div id="mymodal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- List items as links to make them clickable -->
<ul id="myUL">
<font size="3em">
<li><a id="li1" title="item1" href="#" onclick="showitem(this);">Item 1</a></li>
<li><a id="li2" title="item2" href="#" onclick="showitem(this);">Item 2</a></li>
<li><a id="li3" title="item3" href="#" onclick="showitem(this);">Item 3</a></li>
</font>
</ul>
</div>
</div>
<fieldset class="item item1">
<legend>Item 1 Selections</legend>
<div id="d_000000001845952" class="field text">
<label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div>
<div id="d_000000001844977" class="field text ">
<label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" />
</div>
</fieldset>
<fieldset class="item item2">
<legend>Item 2 Selections</legend>
<div id="d_000000001845952" class="field text">
<label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div>
<div id="d_000000001844977" class="field text ">
<label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" />
</div>
</fieldset>
<fieldset class="item item3">
<legend>Item 3 Selections</legend>
<div id="d_000000001845952" class="field text">
<label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div>
<div id="d_000000001844977" class="field text ">
<label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" />
</div>
</fieldset>
document.getElementById("f_000000001845521").readOnly = true;
function toggleBoxVisibility() {
if (document.getElementById("check").checked == true) {
document.getElementById("mymodal").style.display = "block";
} else {
document.getElementById("mymodal").style.display = "none";
}
}
toggleBoxVisibility();
function returncontent(elem) {
if(elem)
document.getElementById("f_000000001845521").value = elem.title;
document.getElementById("mymodal").style.display = "none";
document.getElementById("check").checked = false;
}
returncontent();
function showitem1() {
document.getElementsByClassName("item1")[0].style.display = "block";
}
.item1 {
display: none;
}
<input id="f_000000001845521" name="id12" value="This field is set automatically, based on chosen element from the list below." />
<div class="help">
<script type="text/JavaScript">
document.getElementById("f_000000001845521").readOnly = true;
</script>
</div>
<input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested:
<div id="mymodal" class="modal">
<div class="modal-content">
<ul id="myUL">
<font size="3em">
<li><a id="li1" title="item1" href="javascript:void(0)" onclick="returncontent(this);showitem1();">Item 1</a></li>
<li><a id="li2" title="item2" href="javascript:void(0)" onclick="returncontent(this);showitem2();">Item 2</a></li>
<li><a id="li3" title="item3" href="javascript:void(0)" onclick="returncontent(this);showitem3();">Item 3</a></li>
</font>
</ul>
</div>
</div>
<fieldset class="item1">
<legend>Item 1 Selections</legend>
<div id="d_000000001845952" class="field text"><label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div>
<div id="d_000000001844977" class="field text "><label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" /></div>
</fieldset>
sorry i do want tag to link to login.
only the register and login page is suppose to drop down. the register code is the same. this is the html code for the page
<header id ="logo_nav">
<img class="logo" src="logo.png" width=" 382" height="122 " alt="voucher">
<ul id= "main_nav">
<li> Home </li>
<li id ="login">
<a id="login-trigger" href="login.php">
Login here <span> ▼ </span>
</a>
<div id="login-content">
<form action = "log.php" method="post">
<label id="user"> Username </label>
<br/>
<input id="inputbox"type="text" name="username">
<br/>
<label id="pass"> Password </label>
<br/>
<input id="pinput" type="password" name="password"> <br/>
<input id="submit" type="submit" value ="log in">
</form>
Below is the jquery code thats not allowing me to drop down and
close.
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
You have to add href="#", since you don't want tag to link anywhere.
I am using jquery UI tabs. I have 2 tabs with id #tab1 & #tab2 respectively. Both tab
contains 2 checkbox (total 4). And currently all are unchecked. Now i wrote this jquery code :
$("#tab2").find("input:not(:checked)").each(function () { alert("1"); });
My problem is that, the alert come 4 times, but it should come 2 times. Whats the problem here?
EDIT
<div class="dialog">
<div id="tab">
<ul>
<li>A</li>
<li>B</li>
</ul>
<div id="tab1">
<input type="checkbox" />
<input type="checkbox" />
</div>
<div id="tab2">
<input type="checkbox" />
<input type="checkbox" />
</div>
</div>
</div>
check this fiddle . it is working fine for me..
http://jsfiddle.net/kabichill/6XmYn/
I have an Html code as such
<li>
<ul>
<li id="6"><input type="radio" name="sell" value="sell" id="sell" />Sell</li>
<li id="7"><input type="radio" name="rent" value="rent" id="rent" />Rent</li>
<li id="8"><input type="radio" name="donate" value="donate" id="donate" />Donate</li>
</ul>
<div id="selltab" style="display:none;">
eeeeeeeee
</div>
<div id="renttab" style="display:none;">
ffffffffff
</div>
<div id="donatetab" style="display:none;">
ggggggggg
</div>
</li>
I need to show each div only while clicking the corresponding radio button, else it should be hidden. Right now I have written a JavaScript, but its not working properly:
$(document).ready(function(){
$("radio[#name='sell']").click(function(){
if ($("radio[#name='sell']:checked").val() == 'sell')
$("#selltab").css("display","block");
});
});
This was written to test whether selltab can be shown when clicking radio button of value sell, but seems to have some mistake somewhere.
By using toggle function you can do it.
$('#selltab').hide();
$('#renttab').hide();
$('input[name=sell]').click(function(){
$('#selltab').toggle();
})
$('input[name=rent]').click(function(){
$('#renttab').toggle();
})
I think this is what you want : http://jsfiddle.net/Wsg3q/
<form>
<input type="radio" name="group" value="sell" id="sell" /> sell <br/>
<input type="radio" name="group" value="rent" id="rent" /> rent <br/>
<input type="radio" name="group" value="donate" id="donate" /> donate <br/>
</form>
<div id="selltab" >
eeeeeeeee
</div>
<div id="renttab" >
ffffffffff
</div>
<div id="donatetab" >
ggggggggg
</div>
Javascript :
$('div').hide();
$("input[name=group]:radio").change(function() {
$( '#' + $(this).attr('id') + 'tab' ).show();
$('div:not(#' + $(this).attr('id') + 'tab)' ).hide();
});
I have 2 pages(i.e., page_1 and page_2) in the container page(i.e., page.html).In the first page i have only one button if you click on that then it will navigates to the second page.when you come back from the second page to First page and once again click on the button for navigating to the second page at this time i want to reload/refresh the page. i tried but i am not getting please can anybody help me.
Here the code:
<div data-role="page" id="page_1" >
<div data-role="content" id="contentlogin">
Navigation
</div>
</div>
<div data-role="page" id="page_2" >
<div data-role="content" id="contentlogin">
//Some Form elements are there
</div>
</div>
<script type="text/javascript">
function refresh()
{
$.mobile.changePage($("#page_2"), {transition: "pop",reloadPage: true});
}
</script>
thanks
You could try something like this:
http://jsfiddle.net/sJdfy/4/
JS
$('#page_3').live('pageshow',function(event, ui) {
// refresh specific element
$('#refresh').val('');
});
$('#page_2').live('pageshow',function(event, ui) {
// refresh all elements
var allInputs = $(':input');
allInputs.val('');
});
HTML
<div data-role="page" id="page_1" >
<div data-role="content" name="contentlogin">
Navigate to page 2
Navigate to page 3
Yeah Page 1
</div>
</div>
<div data-role="page" id="page_2" >
<div data-role="content" name="contentlogin">
Navigate to page 1
<!-- Some Form elements are there -->
Hello we are on Page 2<br />Refresh All Elements<br /><br />
<label for="basic1">Text Input 1 (Refresh):</label>
<input type="text" name="name1" id="basic1" value="" />
<label for="refresh1">Text Input 2 (Refresh):</label>
<input type="text" name="name21" id="refresh1" value="" />
<br /> Enter in some values, Navigate to Page 1 and back to Page 2
</div>
</div>
<div data-role="page" id="page_3" >
<div data-role="content" name="contentlogin">
Navigate to page 1
<!-- Some Form elements are there -->
Hello we are on Page 3<br />Refresh Specific Elements<br /><br />
<label for="basic">Text Input 1:</label>
<input type="text" name="name" id="basic" value="" />
<label for="refresh">Text Input 2 (Refresh):</label>
<input type="text" name="name2" id="refresh" value="" />
<br /> Enter in some values, Navigate to Page 1 and back to Page 3
</div>
</div>