I am adding a div around a link on click of a button. but when i click button multiple times, it adds multiple divs.
<li>
<label> </label>
<div class="deletebutton">
<label> </label>
<div class="deletebutton">
<label> </label>
<div class="deletebutton">
<input type="button" id="ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1" value="Remove" class="ruButton ruRemove" name="RemoveRow">
</div>
</div>
</li>
How can i make sure that it first checks if there is a div around link and then adds.
I am using following code:
var parentTag = $(".ruRemove").parent().get(0).tagName;
if (parentTag == 'LI') {
$(".ruRemove").wrap("<div class='data deletebutton'></div>");
$(".deletebutton").before("<label></label>");
} else {
var par = $('.deletebutton').parent();
if (par.is('div')) par.remove();
$(".ruRemove").wrap("<div class='data deletebutton'></div>");
var prev = $('.deletebutton').prev();
if (prev.is('label')) prev.remove();
$('.deletebutton').before("<label></label>");
}
it should become this:
<li>
<label> </label>
<div class="deletebutton">
<input type="button" id="ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1" value="Remove" class="ruButton ruRemove" name="RemoveRow">
</div>
</li>
when i click button. before clicking html is:
<li>
<input type="button" id="ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1" value="Remove" class="ruButton ruRemove" name="RemoveRow">
</li>
Here is a solution shown in a jsFiddle.
The code story is
HTML
<button id="myButton">My Button</button
JavaScript
$(function() {
$("#myButton").click(function() {
if ($(this).parent().get(0).tagName !== "DIV") {
$(this).wrap("<div class='myDiv'>");
}
});
});
What the code does is register a callback for a button click. When clicked, we ask for the parent of the button that was clicked and ask if the parent node has a tag name of "DIV" meaning it is a <div>. If it is not a div, then we wrap the button in a div and end. On the next call, the detection of the parent being a div will be true and no new div will be added.
Why don't you just use for example a function that does what you want only on the first click?
So only on the first click of that button adds the div, if you click other times the button, it wont do anything. This way you wont add multiple divs.
To do that you could use for example jQuery:
<script type="text/javascript">
$("#firstclick").one("click",function() {
alert("This will be displayed only once.");
});
</script>
You can check even the jQuery API Documentation regarding one:
http://api.jquery.com/one/
Related
html code:
<button id="add"></button>
<div id="count_search">
<span class="total_count">Total: <span id="record_count"></span></span></span>
<input type="text" class="txtbox search" placeholder="Search" id="search">
</div>
Jquery code:
$("#add").click(function(){
$("#count_search").empty();
})
I want to show count_search div once again on clicking on any other button execpt to add button
In above code add is button on which empty() is implimented. On clicking on add button count_search is got hide. Then after I want to restore that div content
.empty() deletes the elements in your container (count_search).
Instead, you can use .hide()/.show() or better approach, you can use .toggle() that show or hide your element.
$("#add2").click(function() {
$("#count_search").toggle();
});
$("#add").click(function() {
if ($("#count_search").is(":visible")) {
$("#count_search").hide();
} else {
$("#count_search").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Show/Hide</button>
<button id="add2">Toggle</button>
<div id="count_search">
<span class="total_count">Total: <span id="record_count"></span></span></span>
<input type="text" class="txtbox search" placeholder="Search" id="search">
</div>
By empty() you are deleting an item in DOM.
Instead of empty, you can use toggle(), which hides the element and If you click once again, the item will show.
$("#add").click(function(){
$("#count_search").hide();
})
I want to use JQuery on my Coldfusion application for showing/hiding div elements with checkbox checked/unchecked within the div.
Basically, in a view I show multiple divs elements, every div have also more divs inside, one of these internal divs contains an input type checkbox that could come checked or unchecked.
I also have three buttons in that view 'Active, Inactive, All'. When clicking on Active I want to show all div elements with checkbox checked, not showing the unchecked, and the other way around when clicking on Inactive.
<div class="btn-group ">
<button id="actives" type="button">Actives</button>
<button id="inactives" type="button">Inactives</button>
<button id="all" type="button">All</button>
</div>
<div id="apiDiv">
<cfloop array="#apis#" index="api">
<div class="card card-found">
<div class="card-header">
<cfif Len(api.iconClass)>
<i class="fa fa-fw #api.iconClass#"></i>
</cfif>
#structKeyExists( api, "name" ) ? api.name : api.id#
</div>
<div class="card-body">
<p>#api.description#</p>
</div>
<div class="card-button">
<input class="#inputClass# ace ace-switch ace-switch-3" name="#inputName#" id="#inputId#-#api.id#" type="checkbox" value="#HtmlEditFormat( api.id )#"<cfif ListFindNoCase( value, api.id )> checked="checked"</cfif> tabindex="#getNextTabIndex()#">
<span class="lbl"></span>
</div>
</div>
</cfloop>
</div>
I´m not an expert at all with JQuery. The only thing I have done is what follows and I do not know whether if is a good beggining or not:
$("#actives").click(function (e) {
$("#apiDiv .card").filter(function() {
<!--- code here --->
});
});
Someone please that can help me with it? Thanks a lot in advance!
After your CF code executes, it will generate a .card for each loop iteration of your apis array. So you jQuery code will need a click handler for the #actives button and that will loop through each() iteration of the checkboxes to determine the checked/unchecked state. At that point find the closest() ancestor .card and show()/hide() the .card depending upon the checkbox state.
$("#actives").click(function (e) {
$('input[type=checkbox]').each(function() {
if (this.checked) {
$(this).closest(".card").show();
} else {
$(this).closest(".card").hide();
}
});
});
If you want to do it with jQuery code:
$('#actives').click(function(){
$('#apiDiv').show();
});
Working Fiddle
The code you are probably looking for is in these event handlers for your buttons:
function activesHandler() {
jQuery(".card-button > input:checked").parents(".card.card-found").show();
jQuery(".card-button > input:not(:checked)").parents(".card.card-found").hide();
}
function inactivesHandler() {
jQuery(".card-button > input:checked").parents(".card.card-found").hide();
jQuery(".card-button > input:not(:checked)").parents(".card.card-found").show();
}
function allHandler() {
jQuery(".card.card-found").show();
}
jQuery("#actives").click(activesHandler);
jQuery("#inactives").click(inactivesHandler);
jQuery("#all").click(allHandler);
I reproduced some of your ColdFusion by replacing it with JavaScript and provided a demonstration of the above event handlers in this JSFiddle.
Call the checkbox by its id and when it's checked, write a function to display the divs you want to display:
<input type="checkbox" id="check">
$document.getElementById("check").onclick = function(){
$document.getElementById("div_name").style.display="block"; // block displays the div.
}
This question already has answers here:
jQuery Click fires twice when clicking on label
(17 answers)
Closed 4 years ago.
I have some code listening for a onclick event on a particular radio button/label. However the click on the label/radio "doubletaps" the click event and bugs out my code. - the ".custom_block" appears and disappears, it only appears and stays visible if I press the same radio button the second time. I've tried prevent default event - it works, but then the radio button is not selected. Whats the best solution in this case?
$('#trigger').live('click', function (event) {
clicked_id = event.target.id;
clicked_class = $('#' + event.target.id).attr('class');
if(event.target.id == 'flat.flat' || event.target.id == "flat\\.flat"){
console.log("GOOD");
$(".custom_block").css("display", "block");
//event.preventDefault(); // this works - but the radio itself is not checked after the click.
}else{
console.log("BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD");
$(".custom_block").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div class="surrounding-div">
<div id="trigger">
<div class="radio-input radio">
<input type="radio" name="shipping_method" value="flat.flat" id="flat.flat" checked="checked" data-refresh="5" class="styled">
<label for="flat.flat" data-label="flat.flat">
<span class="text">some text</span><span class="price">1.90 €</span></label>
</div>
</div>
<div class="custom_block">
some content I want visible.
</div>
</div>
I simplified the HTML (you should do too in your "autogenerated" backend).
Basically, wrap all that should trigger the input change inside that <label>
$(document).on('change', '.radio_show_block', function(event) {
$(this).closest('label').next('.custom_block').show();
});
.custom_block {
display: none;
}
<label>
<input class="radio_show_block" type="radio" name="bla" value="bla">
<span class="text">some text</span>
<span class="price">1.90 €</span>
</label>
<div class="custom_block">some content I want visible.</div>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
TL;DR:
I use $(..).append(node), but newly added nodes are not considered for inclusion despite them (supposedly) matching jQuery selectors.
Question
I have some code below that uses checkboxes but emulates radio button behavior. In other words, only one checkbox can (validly) be selected at any time. No more than one should be selected.
If you run the example below and click on the first 3 checkboxes, they will behave like radio buttons. Only one will be selected, no matter how many you click.
However, if you Add Point, newly added points will not be considered for the JS even though in theory it should grab them too...
Specifically: You can select the newly added checkbox, and it will be selected in addition to one already selected previously. That is incorrect as only 1 should be selected at any time and all others should be unselected.
What is happening and how can I have newly added nodes be included into jQuery selectors?
$(function() {
//check first box
$("input.duty:first").prop("checked", true);
//clicking unchecked box should check that box
//unchecks all others
$(".duty").on('click', function(event) {
$("input.duty").prop("checked", false);
$(this).prop("checked", true);
});
$("#addCasePoint").on("click", function() {
var newRowIndex = $('#newRowIndex').text();
var template = $('#casePointTemplate').data('template');
template = template.replace(/__index__/g, newRowIndex);
$('#casePointsFieldset').append(template);
$('#newRowIndex').text(++newRowIndex);
return false;
});
//deletes case point
$("#selection").on("click", ".removeCase", function() {
var caseCount = $('#selection .casePointFieldset').length
if (caseCount === 1) return false; //keep at least one row
$(this).closest("fieldset").remove();
return false;
});
});
.casePointFieldset {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="selection">
<fieldset id="casePointsFieldset">
<legend>Case Points</legend>
<div id="pointFieldset">
<fieldset class="casePointFieldset">
<div>
<label><span>Duty:</span> <input name="point[1]" class="duty" value="1" type="checkbox"></label>
</div>
<button class="removeCase">Remove</button>
</fieldset>
<fieldset class="casePointFieldset">
<div>
<label><span>Duty:</span> <input name="point[1]" class="duty" value="1" type="checkbox"></label>
</div>
<button class="removeCase">Remove</button>
</fieldset>
<fieldset class="casePointFieldset">
<div>
<label><span>Duty:</span> <input name="point[1]" class="duty" value="1" type="checkbox"></label>
</div>
<button class="removeCase">Remove</button>
</fieldset>
</div>
<!-- include template -->
<span id="casePointTemplate" data-template="<fieldset class="casePointFieldset"><div><label><span>Duty:</span> <input name="point[__index__]" class="duty" value="1" type="checkbox"></label></div><button class="removeCase">Remove</button></fieldset>">
</span>
</fieldset>
<button id="addCasePoint">Add Point</button>
</form>
The problem is how you're binding to them. The .click function (or .on('click')) basically works like this:
Find all of the currently existing elements which match a selector ($('.your.selector.here'))
Attach an event handler to each of those elements
Notice how I mentioned it binds to ones which already exist? That means it won't bind to newly created ones automatically. However, you can use .on to bind to the parent of those elements then listen for events on a selector. I'll show you what I mean:
$('#addItem').click(function() {
$('.container').append('<button class="item">Item</button>');
});
// Notice that I'm binding to the parent
// then specifying which events from it's children
// I want to listen to (click events from .item elements)
$('.container').on('click', '.item', function() {
console.log("I'm an item");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button class="item">Item</button>
</div>
<button id="addItem">Add New Item</button>
If you change your on('click' to work like that then you'll have no problems.
Easiest way will be, attaching the event to the document. In the past this was done with the live() method.
$(document).on('click', '.duty', function(event) {
$("input.duty").prop("checked", false);
$(this).prop("checked", true);
});
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();
});