I have this problem let say I click an event (e.g. radio button 2) to show() div2 and hide() div1. After that I click a link to redirect to the next page.
Then I click back button (browser <-). Radio button 2 is checked, but the display is div1 instead of div2. Here is a sample source code. Could anyone help me if this can be fix.
<!-- test.php START -->
<div id="div_1" style="display: block;">
<p>First Paragraph</p>
</div>
<div id="div_2" style="display: none;">
<p>Second Paragraph</p>
</div>
<div>
<input type="radio" id="rdo1" name="radio" checked/>First
<input type="radio" id="rdo2" name="radio" />Second
</div>
<div>
Just to reload the page or go to other page
</div>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function() {
$("#rdo1").click(function () {
$("#div_1").show();
$("#div_2").hide();
});
$("#rdo2").click(function () {
$("#div_1").hide();
console.log('test');
$("#div_2").show();
});
});
</script>
<!-- test.php END-->
<!-- test1.php START -->
DISPLAY SOMETHING
<!-- test1.php END -->
Web is stateless and by default the browser does not remember any settings of the previous page.. SO when you press the back button it is just like a page refresh like you opened the default page with default HTML
This is the expected and default behaviour
If you want the behavior you are expecting then you need to cache the page or store the state , either in a session or a cookie..
You can on DOMReady check which radio input is selected.
$(document).ready(function() {
var ind = $('input[name=radio]:checked').index();
$('div[id^=div]').hide().eq(ind).show()
$("#rdo1").click(function () {
$("#div_1").show();
$("#div_2").hide();
});
$("#rdo2").click(function () {
$("#div_1").hide();
console.log('test');
$("#div_2").show();
});
})
You would have to save the state somehow, either server-side with ajax or form posts or via client-side with cookie or localStorage.
You can set cookies easily with the jquery-cookie plugin or you can use vanilla javascript to set localStorage like this quick example:
<!doctype html>
<meta charset="utf-8">
<title>html5 notepad</title>
<textarea></textarea>
<script>
var n = document.getElementsByTagName('textarea')[0];
n.onchange = function(){localStorage.setItem("n",n.value);}
n.value = localStorage.getItem("n");
</script>
if ($('#rdo1').attr('checked')){
$("#div_1").show();
$("#div_2").hide();
}
if ($('#rdo2').attr('checked')){
$("#div_1").hide();
$("#div_2").show();
}
$("#rdo1").click(function () {
$("#div_1").show();
$("#div_2").hide();
});
$("#rdo2").click(function () {
$("#div_1").hide();
console.log('test');
$("#div_2").show();
});
Related
So I have div as follows and what I am doing is basically load a default PHP file on ready of document and than i load different PHP files based on div clicked.
<div class="menu">
<div id="home" class="menu_align active_one">Home</div>
<div id="write" class="menu_align">Write</div>
<div id="activity" class="menu_align">Notifications</div>
</div>
<div id="main_content"></div>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#main_content").load('home.php');
});
$("#home").click(function(){
$("#main_content").load('home.php');
});
$("#write").click(function(){
$("#main_content").load('write.php');
});
$("#activity").click(function(){
$("#main_content").load('notifs.php');
});
So what I want is that if user clicks on Write and refresh the page then main_content should load write.php and same for all other div.
Your click() event is outside $(document).ready() add it inside $(document).ready(). Those function which are inside .ready() function will be execute when the DOM is fully loaded. To track clicked page, save it to localStorage or cookies. And on page load check if the localStorage has value or not, if it has load that page else load default page. Here is working example.
$(document).ready(function(){
if(localStorage.getItem("clicked")){
var clickedPage = localStorage.getItem("clicked");
$("#main_content").load(clickedPage);
} else {
$("#main_content").load('home.php');
}
$("#home").click(function(){
$("#main_content").load('home.php');
localStorage.setItem('clicked', 'home.php');
});
$("#write").click(function(){
$("#main_content").load('write.php');
localStorage.setItem('clicked', 'write.php');
});
$("#activity").click(function(){
$("#main_content").load('notifs.php');
localStorage.setItem('clicked', 'notifs.php');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<div id="home" class="menu_align active_one">Home</div>
<div id="write" class="menu_align">Write</div>
<div id="activity" class="menu_align">Notifications</div>
</div>
<div id="main_content"></div>
I have this code and since it will contain many images, I wanted to prevent these images from loading when the page loads to decrease page loading time. My idea was to prevent this code from running unless the user asks to do so by clicking a button. Thus loading the images only when the user wants to see them.
<div style="margin-top:40px;">
<h3><a href='{parse url="showuser={$member['member_id']}&tab=jawards" seotitle="{$member['members_seo_name']}" template="showuser" base="public"}'>{$this->lang->words['awards_title_post']}</a></h3>
<div class="row2" style="padding:7px;">
<foreach loop="profileawards:$awards as $a">
<img class="tooltip" src='{$this->settings['upload_url']}/jawards/{$a['icon']}'
<if test="size:|:$a['width']">
width='{$a['width']}' height='{$a['height']}'
</if>
<if test="toolTip:|:$a['toolTip']">
title='{$a['toolTip']}'
</if>
/>
<if test="awardCount:|:$a['count'] > 1">
<span class='JLogicaAwardsCount'>{$a['count']}</span>
</if>
{$a['hook']['settings']['padding']}
</foreach>
</div>
</div>
You can try following js
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><<<< this goes in the header
</script>
<script>
$(document).ready(function(){
$(".button").click(function(){
$(".hiddendiv").slideToggle();
});
});
</script>
</head>
<body>
<input type="button" class="button" >123</button>
<div class="hiddendiv">
your data to show
</div>
</div>
</body>
<style>
.hiddendiv {
display:none;
}
</style>
Whatever data that you want to show only when user clicks the button, collect it in a javascript variable.
var myHeavHtml = ""; \\all data with images.
Say there is button on the page id btnLoadImages
var isImagesLoaded = false;
$('#btnLoadImage').on('click', function(e)
{
if(!isImagesLoaded)
{
$('#imgContainer').html(myHeavyHtml);
isImagesLoaded = true;
}
else
{
$('#imgContainer').toggle();
}
});
On the page load, declare a variable isImagesLoaded set to false, means you have not loaded the images. So when it is false, add the html to container div.All other times, just toggle the hide & show.
In this way, the images will not be loaded when the page is loading, it will inserted only when you click the button.
Hope this suffice your requirements.
I am creating an admin panel and I have a panel on the left side of my page that I want to bring up different data.
I created a JSFiddle to show what I am doing.
The issue I am having is I want the dashboard home message...
<div id="dashboard_home">Welcome to the Admin Dashboard</div>
To be the only div that shows up on page load. Then when a panel seletion is clicked on, for the dashboard home message to go away and then only that new panel selection's div to show up.
Then once another panel selection is clicked on, I want the previous selection to hide and the new one to display and so fourth for all of the selections.
What do I need to do?
HTML
<div class="panel_out">
<div class="panel">
<input type='button' class="panel_buttons" id='user_request_button' value='User Requests'>
<input type='button' class="panel_buttons" id='message_button' value='Message Center'>
<input type='button' class="panel_buttons" id='draft_order_button' value='Draft Order'>
<input type='button' class="panel_buttons" id='draft_input_button' value='Draft Input'>
<input type='button' class="panel_buttons" id='announcements_button' value='Announcements'>
<input type='button' class="panel_buttons" id='dues_button' value='League Dues'>
</div>
</div>
<div class="dashboard_selection">
<div id='user_requests'>User Requests</div>
<div id='message_center'>Message Center</div>
<div id='draft_order'>Draft Order</div>
<div id='draft_input'>Draft Input</div>
<div id='announcements'>Announcements</div>
<div id='dues'>Leauge Dues</div>
</div>
JS
jQuery(document).ready(function () {
jQuery('#user_request_button').on('click', function (event) {
jQuery('#user_requests').toggle('hide');
});
jQuery('#message_button').on('click', function (event) {
jQuery('#message_center').toggle('hide');
});
jQuery('#draft_order_button').on('click', function (event) {
jQuery('#draft_order').toggle('hide');
});
jQuery('#draft_input_button').on('click', function (event) {
jQuery('#draft_input').toggle('show');
});
jQuery('#announcements_button').on('click', function (event) {
jQuery('#announcements').toggle('show');
});
jQuery('#dues_button').on('click', function (event) {
jQuery('#dues').toggle('show');
});
});
Demo
You're adding far too many bespoke events when you don't need to. Normalise your IDs to match the button IDs and derive one from the other,
e.g. <input id='user_requests_button' /> finds <div id="user_requests">
Show the div you want, then use siblings() to get the elements that you want hidden, and hide them.
Trigger the click event on the first button on load to show the first one only when the page loads (if you don't do this with CSS).
jQuery(document).ready(function () {
$('.panel_out input').on('click', function(){
// derive the ID
var id_to_show = '#' + this.id.replace('_button', '');
// show one and hide the others
$(id_to_show).show().siblings().hide();
}).first().trigger('click'); // trigger the first on page load
});
Trigger the click event on the first button on load to show the first one only when the page loads (if you don't do this with CSS).
On a click hide all panels first. And then open the desired one with .show()
So i would do it this way:
$('.panel').click(function(e){
$('.panel').hide();
$(e.currentTarget).closest('panel').show();
});
how do i use a html check box to toggle two different links in a html button?
(IE) a button contains two links. with the use of a check box, if set to true, on click of button should go to xyz site and when check box false, on click of same button should go to abc site ?
Please help as i am new to j query. using this on a share point site.
This may help you,
$('button').on('click',function(){
var url=$('input:checked').length ? 'abc.com' : 'xyz.com';
alert(url);// use window.location.href=url; to open that url
});
Try Demo
On checkbox change switch link href:
HTML
<input type="checkbox">
<a href="#" data-url1='lala' data-url2='lolo'>button</a>
JQUERY
$(function(){
$('a').attr('href',$('a').data('url1'));
$('input').on('change',function(){
if($(this).is(':checked')){
$('a').attr('href',$('a').data('url2'));
}else{
$('a').attr('href',$('a').data('url1'));
}
})
})
This is the proper code try and run it in your browser, you can even try this in jsfiddle
Two concepts here used is how to check the checkbox checked or not in jquery, there are many ways i illustrate the one way by using is(':checked')
and other is binding the click event of a button, which is quite simple. I hope you like it.
<html>
<head>
<title></title>
</head>
<body>
<input type="checkbox" id="myCheckbox" />
<button id="myButton">Click</button>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myButton').click(function(){
if($('#myCheckbox').is(':checked')){
window.location.href = "http://www.google.co.in";
}else{
window.location.href = "http://jforjs.com";
}
})
})
</script>
</body>
</html>
Demo
HTML
<input id="choice" name="choice" type="checkbox" data-yes="http://www.xyz.com" data-no="http://www.abc.com"/>
<button id="submit">submit</button>
jQuery
$('#submit').on('click',function(){
var url ='';
if($('#choice').is(':checked')){
url = $('#choice').data('yes');
}
else{
url = $('#choice').data('no');
}
alert(url);
//Uncomment below for redirecting automatically to the desired url
//location.href = url;
});
I want to disable link button after clicking of it & other enable. toggle enable/ disable between both link buttons using javascript
<a id="a1" href="page1.aspx">One</a><a id="a2" href="page2.aspx">Two</a>
Simple, just add listeners to the onclick events on both links, that disable the link in question and enable the other one.
Something like
document.getElementById('a1').onclick = function() {
document.getElementById('a1').disabled = true;
document.getElementById('a2').disabled = false;
};
document.getElementById('a2').onclick = function() {
document.getElementById('a2').disabled = true;
document.getElementById('a1').disabled = false;
};
Of course if you're going to be extending this to multiple buttons then you could easily abstract the above out to registration methods, looping over arrays of buttons etc. (possibly those that implement a particular class rather than explicitly specifying the array).
The simplest way is to hide the link rather than to make it disabled.
You can use this code to hide the link after click on it.
Its tested code & it worked perfect for me. :-)
<script type="text/javascript">
onclick = function() {
var chk= document.getElementById('myElementId');
chk.style.display="none";
};
</script>
To disable a LINK rather than a BUTTON, the only thing you can do apart from hiding it is to set it not to go anywhere.
onclick="this.href='javascript: void(0)';"
Your question can have any one of the following 3 possible scenario. Choose whichever suites your problem.
Case1) A catch in your question is that since they are links pointing to page1.aspx and page2.aspx respectively once you click on a link a new page loads in the browser. So the effect you want to achieve doesn't really matter.
Case 2) If, you have both the links 'One' and 'Two' on each of aspx pages then you can as well hardcode the disabling of the link pointing to itself. (Or as well not have the link at all).
Case 3) If you have a frame to display the links 'One', 'Two' and you have a another frame to load content of both links then your question has a meaning disabling the other link. Here is the code for the same.
<html>
<a id="a1" href="javascript:void(0)" onclick="toggle(objA1,objA2,'page1.aspx')">One</a>
<a id="a2" href="javascript:void(0)" onclick="toggle(objA2,objA1,'page2.aspx')">Two</a>
<br><iframe id="ifrm" src=""></iframe>
<script>
var objA1 = document.getElementById('a1');
var objA2 = document.getElementById('a2');
// d=element to disable, e=element to enable
function toggle(d,e,link)
{
//if already disabled do nothing(don't follow url)
if(d.disabled) return;
//enable/disable
d.disabled = true;
d.style.cursor = 'default';
e.disabled = false;
e.style.cursor = 'hand';
//follow link
ifrm.src = link;
}
</script>
</html>
You can access and set the "disabled" attribute like this:
if(somebutton.disabled == true){
somebutton.disabled = false;
}
I recommend using a JavaScript framework like jQuery.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
.submit{
padding:8px;
border:1px solid blue;
}
</style>
</head>
<body>
<h1>Disabled submit form button after clicked with jQuery</h1>
<form action="#">
<p>
I'm a form ~
</p>
<input type="submit" value="Submit"></input>
<button>Enable Submit Button</button>
</form>
<script type="text/javascript">
$('input:submit').click(function(){
$('p').text("Form submiting.....").addClass('submit');
$('input:submit').attr("disabled", true);
});
$('button').click(function(){
$('p').text("I'm a form ~").removeClass('submit');
$('input:submit').attr("disabled", false);
});
</script>
</body>
</html>
<script type="text/javascript">
function validateForm(formObj) {
if (formObj.username.value=='') {
alert('Please enter a username');
return false;
}
formObj.submitButton.disabled = true;
formObj.submitButton.value = 'Please Wait...';
return true;
}
</script>
<form name="frmTest" action="" method="post" onsubmit="return validateForm(this);">
Username: <input type="text" name="username" value="" /><br />
<input type="submit" name="submitButton" value="Submit" />
</form>