Show a hidden div on click a link after page reload in ajax jquery
Question
In my page I have many hidden divs. On page load the divs are hidden. while clicking a link the particular divs will display. I need it as after page reload the divs should display.
My code is here:
<li><a class="add_new" href="javascript:void(0);" onClick="showdivs()">Add </a></li>
<li><a class="info" href="javascript:void(0);" onClick="showdivs()">info</a></li>
<div id="add_new">hai.....</div>
<div id="info">heloo..</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(window).load(function() {
$("#info").hide();
$("#add_new").hide();
});
function showdivs() {
var divs = $("#info,#add_new");
//Show chosen div, and hide all others
$("li a").click(function() {
$(divs).hide();
$("#" + $(this).attr("class")).show();
});
</script>
The code works but the page is not getting refreshed. I need the page to reload and then show the hidden div.
3 answers
solution1
0 2015-09-18 07:56:57
I don't know if this is what you're looking for, but I think you want to reload the page, because the divs are not show up, and the problem ist, that you add your clickhandler to show the divs "onClick":
function showdivs() { //this is called, when you click a link
var divs = $("#info,#add_new");
//Show chosen div, and hide all others
$("li a").click(function() {// here the clickhandler is added, so the first time it won't work
$(divs).hide();
$("#" + $(this).attr("class")).show();
});
So you have to click twice to show the div. So here is my aproach:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(window).load(function () {
$("#info").hide();
$("#add_new").hide();
});
function showdivs( element ) {// element is this param
$("#" + $( element ).attr("class")).show();
}
</script>
<!-- add parameter this-->
<li><a class="add_new" href="javascript:void(0);" onClick="showdivs(this)">Add </a></li>
<li><a class="info" href="javascript:void(0);" onClick="showdivs(this)">info</a></li>
<div id="add_new">hai.....</div>
<div id = "info">heloo..</div>
You can also do it like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(window).load(function () {
$("#info").hide();
$("#add_new").hide();
$("li a").click( function () {
$("#" + $( this ).attr("class")).show();
});
});
</script>
<li><a class="add_new" href="javascript:void(0);">Add </a></li>
<li><a class="info" href="javascript:void(0);">info</a></li>
<div id="add_new">hai.....</div>
<div id = "info">heloo..</div>
solution2
0 2015-09-18 08:00:23
When you show a div, store the class in a cookie using document.cookie = "divToShow=" + idOfTheDivToShow; .
If you want to refresh the page, use Location.reload() in your javascript.
Then, use this function to get your divToShow cookie and show the related div:
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
solution3
0 2015-09-18 10:48:52
Try this code
<body>
<li><a class="add_new" href="javascript:void(0);" onClick="showdivs()">Add </a></li>
<li><a class="info" href="javascript:void(0);" onClick="showdivs()">info</a></li>
<div id="add_new">hai.....</div>
<div id="info">heloo..</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
jQuery(window).load(function() {
jQuery("#info").hide();
jQuery("#add_new").hide();
});
function showdivs() {
var divs = jQuery("#info,#add_new");
//Show chosen div, and hide all others
jQuery("li a").click(function() {
jQuery(divs).hide();
jQuery("#" + $(this).attr("class")).show();
});
}
</script>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.