Persist state of dynamic expand buttons - javascript

I have got Javascript function to show content if you click on <div id = button1/2/3>.
But after refreshing the page, all is hidden. I would like to remember last action - cache it.
Please, help.
$(document).ready(function() {
$("#button1, #button2, #button3").hide();
$("#news1").click(function() {
$("#button1").show();
$("#button2, #button3").hide();
});
$("#news2").click(function() {
$("#button2").show();
$("#button1, #button3").hide();
});
$("#news3").click(function() {
$("#button3").show();
$("#button1, #button2").hide();
});
});

You can use locastorage for that. localstorage will persist in between http calls. So you will be able to persist the state easily. I have updated your code also to follow best practises also.
Here goes the HTML :
<input id="button1" type="button" class="expand" value="b1">
<input id="button2" type="button" class="expand" value="b2">
<input id="button3" type="button" class="expand" value="b3">
<input class="news" type="button" data-id="1" value="n1">
<input class="news" type="button" data-id="2" value="n2">
<input class="news" type="button" data-id="3" value="n3">
Here is the javascript. Please follow that i have used classes in the most of the cases :
(function () {
function resetLocalStorage() {
$('.expand').each(function () {
delete localStorage[$(this).attr('id')];
});
}
$(".expand").each(function () {
if (localStorage.hasOwnProperty($(this).attr('id'))) $(this).show();
else if (localStorage.hasOwnProperty('trackingIsOn')) $(this).hide();
});
$(".news").click(function () {
$('.expand').hide();
var buttonElem = $('#button' + $(this).data('id'));
buttonElem.show();
resetLocalStorage();
localStorage[buttonElem.attr('id')] = true;
localStorage.trackingIsOn = true;
});
})();
You can find the full working example here

Related

checkbox change not fired at page load time

I have a button and checkbox(terms of use) in my page.
The button should be disabled if the checkbox is not checked.
I want to reset the situation in every load. (first load or using back btn or etc) the reset state is: checkbox shouldn't be checked, and btn is disabled.
But the function is called just when I click the checkbox, and not at load time.
Update: Also I tested .trigger('change'), too. It did't work too
$(function() {
$('#termsOfUse').removeAttr('checked');
$('#termsOfUse').change();
$('#termsOfUse').change(function() {
if ($(this).is(":checked")) {
$('#createBtn').prop('disabled', false);
} else {
$('#createBtn').prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<input id="termsOfUse" type="checkbox" />
<label for="termsOfUse" style="display: inline;">
<span>rules</span> I am agree with</label>
</div>
<div class="create">
<input id="createBtn" type="button" value="create" class="btn btn-default btn-success"
onclick="location.href = '#Url.Action("Create","NewOne ")'" />
</div>
You are calling the .change before you assign.
$(function() {
$('#termsOfUse').prop('checked',false);
$('#termsOfUse').change(function() {
$('#createBtn').prop('disabled', !this.checked);
}).change(); // execute at load
});
You can also put
<script>
$('#termsOfUse').prop('checked',false);
$('#termsOfUse').change(function() {
$('#createBtn').prop('disabled', !this.checked);
}).change(); // execute at load
</script>
</body>
at the end of your document

Checking if an input file has been selected?

I am currently working on a website, where you are able to upload a file:
<input type="file" name="file" id="file" class="form-control" />
I then have a button which you can press to upload the selected file:
<button class="btn btn-primary" type="submit">Upload CV</button>
Here I would like the button to be clickable ONLY if a file has been selected. Is this possible using JS, and how?
Thanks in advance!
Using Jquery:
$(document).ready(
function(){
$('input:file').change(
function(){
if ($(this).val()) {
$('input:submit').attr('disabled',false);
// or, as has been pointed out elsewhere:
// $('input:submit').removeAttr('disabled');
}
}
);
});
Add disabled attribute in button tag.
You can use JQuery as FullOfQuestions said, but it would be also good to verify that the file was selected before executing button code!
<input type="file" name="file" id="myFile"/>
<!--Add disabled attribute to the button so that is appears disabled at page load-->
<button id="myBtn" type="submit" disabled>Upload CV</button>
<script type="text/javascript">
$(function () {
//when input's value changes
$("#myFile").change(function () {
if($(this).val())
{
$("#myBtn").prop("disabled", false);
}
else
{
$("#myBtn").prop("disabled", true);
}
});
//when button is clicked
$("#myBtn").click(function () {
if($("#myFile").val())
{
console.log("file selected");
}
});
});
</script>
You can do this with native JS below. The button is enabled when a file has been selected, but if a file has not been selected, the button is disabled.
var button = document.querySelector('button[type=submit]');
button.disabled = true;
document.getElementById('file').addEventListener('change', function () {
if (this.value.length > 0) {
button.disabled = false;
} else {
button.disabled = true;
}
});
<input type="file" name="file" id="file" class="form-control" />
<button class="btn btn-primary" type="submit">Upload CV</button>

Click event open both Popup

I have to show login and register as a slidedown/popup. Following code works for one popup but breaks when i try to add popup for register also. It show both popup
<div class="register-popup">
<a class="button-register" href="#" >Register</a>
<div class="popup-register">
CLOSE
<form>
<P><span class="title">Username</span> <input name="" type="text" /></P>
<P><span class="title">Password</span> <input name="" type="password" /></P>
<P><input name="" type="button" value="Login" /></P>
</form>
</div>
</div>
<div class="login-popup">
<a class="button-login" href="#" >Login</a>
<div class="popup-login">
CLOSE
<form>
<P><span class="title">Username</span> <input name="" type="text" /></P>
<P><span class="title">Password</span> <input name="" type="password" /></P>
<P><input name="" type="button" value="Login" /></P>
</form>
</div>
</div>
I am looking for following functionality
One popup should open at a time and other should close automatically
Popup should open & close when one click on the individual links
Fiddle example http://fiddle.jshell.net/rvepks5q/1/
I tried for sometime, i am doing something wrong.
You may also want to try this
$(document).ready(function(){
$(".button-register").click(function(){
if ($(".popup-login").is(":hidden") && $(".popup-register").is(":hidden"))
{
$(".popup-register").slideDown("slow");
}
else if(!$(".popup-login").is(":hidden"))
{
$(".popup-login, .overlay-register").hide();
$(".popup-register").slideDown("slow");
}
else if(!$(".popup-register").is(":hidden"))
{
$(".popup-register").slideUp("slow");
}
});
$(".button-login").click(function(){
if ($(".popup-login").is(":hidden") && $(".popup-register").is(":hidden"))
{
$(".popup-login").slideDown("slow");
}
else if(!$(".popup-register").is(":hidden"))
{
$(".popup-register, .overlay-register").hide();
$(".popup-login").slideDown("slow");
}
else if(!$(".popup-login").is(":hidden"))
{
$(".popup-login").slideUp("slow");
}
});
});
Try this fiddle
Change document.body to element you want to click on.
http://fiddle.jshell.net/rvepks5q/3/
You can also close opened popup if you open another one.
http://fiddle.jshell.net/rvepks5q/5/
Attach click handlers to individual links instead
$(".button-login").click(function () {
if ($(".popup-login").is(":hidden")) {
$(".popup-login").slideDown("slow");
} else {
$(".popup-login, .overlay-login").hide();
}
});
$(".button-register").click(function () {
if ($(".popup-register").is(":hidden")) {
$(".popup-register").slideDown("slow");
} else {
$(".popup-register, .overlay-register").hide();
}
});
example
js
$(".button-login").on("click", function(){
if(!$(".popup-login").hasClass("opened")){
$(".popup-login").show();
$(".popup-login").addClass("opened");
$(".popup-register").hide();
$(".popup-register").removeClass("opened");
}else {
$(".popup-login").hide();
$(".popup-login").removeClass("opened");
$(".popup-register").hide();
$(".popup-register").removeClass("opened");
}
});
$(".button-register").on("click", function(){
if(!$(".popup-register").hasClass("opened")){
$(".popup-register").show();
$(".popup-register").addClass("opened");
$(".popup-login").hide();
$(".popup-login").removeClass("opened");
}else {
$(".popup-register").hide();
$(".popup-register").removeClass("opened");
$(".popup-login").hide();
$(".popup-login").removeClass("opened");
}
});
You are assigning two click handlers, but both listen to a click on the body.If you want your code to work you have to either assign your listeners to the elements or use event bubbling to see where the click is coming from.
That way you don't have to put unnecessary event-handlers on your dom.
var $body = $(document.body);
var $loginButton = $body.find('.button-login')[0];
var $registerButton = $body.find('.button-register')[0];
var $loginPopup = $body.find('.popup-login');
var $registerPopup = $body.find('.popup-register');
$(document.body).click(function (e) {
if(e.target === $loginButton) {
$registerPopup.hide();
$loginPopup.toggle();
}
if(e.target === $registerButton) {
$loginPopup.hide();
$registerPopup.toggle();
}
});
http://fiddle.jshell.net/rvepks5q/11/

jQuery - Checking which button was clicked

I have two buttons:
<input type="button" name="hideAll" value="Hide Descriptions"/>
<input type="button" name="showAll" value="Show Descriptions"/>
Using jQuery, how do I tell which button was clicked?
Add a class that your buttons share...
<input class="mybutton" type="button" name="hideAll" value="Hide Descriptions"/>
<input class="mybutton" type="button" name="showAll" value="Show Descriptions"/>
$(function() {
$('.mybutton').on('click', function() {
var isClicked = this.attr('name');
if (isClicked === 'hideAll') {
...
}
if (isClicked === 'showAll') {
...
}
});
});
Depending on your needs and scope, you could also make isClicked a global variable which will be available outside the click event.
isClicked = this.attr('name');
$('input[type="button"]').on('click', function() {
// which button was clicked?
alert($(this).attr('name') + ' was clicked');
});

Jquery is not call on button click

i have a jquery for file selection
http://jsfiddle.net/parvathy/e8wr5/
please look the fiddle. when i am clicking on the text box, that jquery is worked .. but when clicking on the "browse" button that is not worked.i am using boot strap css for button and input text please help me..
<input type="text" name="fake_section" id="fake_section" class="form-control" style="float:left;">
<button type="button" id="fake_section" class="btn btn-primary" ">Browse</button>
$(document).ready(function () {
$('#fake_section').click(function (e) {
e.preventDefault();
$('#file').trigger('click');
});
$('#file').change(function (e) {
var filename = $(this).val();
var ext = filename.split('.').pop().toLowerCase();
if ($.inArray(ext, ['xls', 'xlsx']) == -1) {
alert('Only add Excel Files!');
}
else {
$('input[name="fake_section"]').val(filename);
}
});
});
Because you have 2 elements with the id fake_section, use class instead - when you use an id selector it selects the first element with the given id
<input type="text" name="fake_section" class="fake_section form-control" style="float:left;">
<button type="button" class="fake_section btn btn-primary" style="margin-left:10px;">Browse-</button>
then
$('.fake_section').click(function (e) {
e.preventDefault();
$('#file').trigger('click');
});
Demo: Fiddle
Be attention on the ids, your mistake were the same id in two controls. Some IDEs help you with a warning when you have many controls with the same Ids.
<input type="text" name="fake_section" id="fake_section2" class="form-control" style="float:left;">
<button type="button" id="fake_section1" class="btn btn-primary" ">Browse</button>
$(document).ready(function () {
$('#fake_section1').click(function (e) {
e.preventDefault();
$('#file').trigger('click');
});

Categories

Resources