I have a list of items which need to be re-categorised depending on what the user decides.
<li class="indent_padd" data-show-question="53" data-tech-id="1" data-step-id="1" data-show-answers="1">
<p>
<span class="sub_step_title">
Example question text
</span>
</p>
<div class="slidecontainer">
<div class="slide_checkcontainer">
<div class="bs_sliders elRes" id="54_slider"></div>
<script>
$(document).ready(function(){
var slider_54_slider = document.getElementById('54_slider');
noUiSlider.create(slider_54_slider,{"start":0,"range":{"min":0,"max":100},"steps":4,"connect":"lower","direction":"ltr","orientation":"horizontal","pips":{"mode":"steps","stepped":"true","density":4}});
// Set one handled slider
slider_54_slider.noUiSlider.set(0);
slider_54_slider.noUiSlider.on('update',function(values){
$('#result_54_slider').val(values[0]);
})
})
</script>
<input type="text" value="0" id="result_54_slider" class="rangeUpdate" data-toggle="popover" data-trigger="manual" data-content="The permitted value range is 0-100" />
</div>
<div class="radio_container hasSlider">
<input type="checkbox" name="steps[54_4]" value="4" id="id_54_4" class="elRes" />
</div>
</div>
</li>
I then later run the following JS:
$('li[data-type="'+core_row+'"]').each(function(){
var thisID = $(this).data('typeid');
var newList = $(this).find('ul');
$(newList).empty();
var bringIn = $('li[data-'+get_items+'-id="'+thisID+'"]');
$(bringIn).each(function(){
$(newList).append($(this).clone(true,true));
$(this).remove();
})
})
I am using a slider (alt HTML range) as the question and had previously tried Bootstrap-slider (Destroy and re-initialize a bootstrap-slider) believing it was an issue with the slider code. I have since amended the code to use https://refreshless.com/nouislider/).
So what isn't working?? Basically in both instances the sliders lose their attached events - typically these relate to mouse actions as its a drag required. So why, when I'm using deep, deep cloning (and jq 3.5.1) are these events not being copied across when cloned? I would have expected to literally be able to "move" the LI and its entire contents/objects/variables etc and it work. If cloning isnt the answer - what is the best way of doing it?
If it makes a difference - the UL is hidden when it is appended to.
Related
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.
}
I want to make a list of group inputs allow user to dynamically let user add/remove group row:
<div id="div-form-denominations" class="form-denominations">
<div id="row-0" class="form-denomination">
<div class="form-field">
<div class="form-field">
<div class="form-field">
<input id="_denominations[0].id.reference" class="removableHiddenOrder" type="hidden" name="denominations[0].id.reference" value="87-070329-034COP-4444">
<input id="_denominations[0].denomination" class="removableHiddenDenom" type="hidden" name="denominations[0].denomination" value="10000">
<a id="deleteBtn-[0]" class="action-link delete-denomination" href="#">
<div class="spacer"></div>
</div>
<div id="row-1" class="form-denomination">
<div class="form-field">
<div class="form-field">
<div class="form-field">
<input id="_denominations[1].id.reference" class="removableHiddenOrder" type="hidden" name="denominations[1].id.reference" value="87-070329-034COP-4444">
<input id="_denominations[1].denomination" class="removableHiddenDenom" type="hidden" name="denominations[1].denomination" value="">
<a id="deleteBtn-[1]" class="action-link delete-denomination" href="#">
<div class="spacer"></div>
</div>
<div id="row-2" class="form-denomination">
<div class="form-field">
<div class="form-field">
<div class="form-field">
<input id="_denominations[2].id.reference" class="removableHiddenOrder" type="hidden" name="denominations[2].id.reference" value="">
<input id="_denominations[2].denomination" class="removableHiddenDenom" type="hidden" name="denominations[2].denomination" value="">
<a id="deleteBtn-[2]" class="action-link delete-denomination" href="#">
<div class="spacer"></div>
</div>
<div id="row-3" class="form-denomination">
.......
</div>
So each row include a group of form-field which include an input or select component(not show in above code) and some hidden fields and a delete link to remove current row from view.
Also I create a link to dynamic add a new row into the section
var rowTemplate = null;
j(document).ready(function() {
// Save the row template
rowTemplate = j('.form-denomination:first-child').clone();
j("#add_link").click(function() {
add_denomination();
});
});
and here is the content of add_denomination function that clone the first row and replace any cloned id with new index, and append the cloned row after last row of the list.
function add_denomination() {
var index = j('.form-denomination').length;
// set the new row id
var newRowId = 'row-' + index;
var newRow = rowTemplate.clone().attr('id', newRowId);
// Replace the id/name attribute of each input control
newRow.find('div, input, select, a').each(function() {
replaceAttribute(j(this), 'id', index);
replaceAttribute(j(this), 'name', index);
j(this).val('');
});
// add new element to the DOM
newRow.appendTo('.form-denominations');
alert("new list size = " + j(".delete-denomination").length);
console.log("DONE!");
}
each time click on the add-link the pop up alert show the new list size (j(".delete-denomination").length increment by 1), which in my understanding, new row appended successfully.
The problem is the following method
// delete denomination row
j('.delete-denomination').click(function () {
j(this).parent().remove();
}
ONLY WORKS FOR THE NON-CLONED ROW !!! Using firebug I can clearly see the appended row is successfully appended with same structure and same element as original rows but only difference is the id.
However, each time when I click on deleteBtn-[i], in which i is the cloned/appended row's index, the code even not going into the j('.delete-denomination').click() function, which in my understanding, Dom or jquery didn't recognize the new rows hence the failure of identifying the link by jQuery. It's kind of contradictory to the previous alert message that telling the size of list has grown.
But when I click on deleteBtn-[i] where i is the non-cloned row, everything works fine...
So the question is: how to append/add new doms and make them identified by jQuery or Dom? What is wrong in above processing? Is there any way to refresh the list so that Dom/jQuery understand the appended rows from all perspective?
jQuery 1.7+
j(".form-denomination").on("click", ".delete-denomination", function(){
j(this).parent().remove();
});
jQuery 1.3+
j(".delete-denomination").live("click", function(){
j(this).parent().remove();
});
jQuery 1.4.3+
j(".form-denomination").delegate(".delete-denomination", "click", function(){
j(this).parent().remove();
});
The problem is a matter of order and when expressions are evaluated. When you call jQuery with a selector, the selector is evaluated at that time to select the matching elements which exist at that time. The click handler is then registered to only those elements. Elements which are created later are, naturally, not affected.
One solution, demonstrated in another example, uses jQuery's "live events" to apply the selector at the time each event is fired to determine what elements, if any, it would match. There is a performance implication to this approach.
Another solution is to register the desired event handler on the newly created elements when you create them.
Add 'true' to the clone method in order to copy the data as well as the events attached to the original element.
rowTemplate = j('.form-denomination:first-child').clone(true);
This is disabled by default. Here is the clone documentation:
https://api.jquery.com/clone/
P.s. You don't need the click function within the document.ready and it won't bind until after the click.
I have seen lot of questions but none of them seems to have answer for this. I need this help desperately. I am hosted on Magentogo so have no acceess to the core files, however with the help of jquery I want to hide .00 from my store. My codes look like this for example. The price of the item of Rs. is also in HTML could not paste as
<div class="price-block"
<p> The price of this item is
<span class="price" id="oldprice">
<span class="WebRupee"> Rs. </span>3,795.00 </span></p>
</span>
</div>
<script>
$('#price-block').html($('#price-block').html().replace(".00",""));
</script>
</body>
</html>
You have it as a class in your div
<div class="price-block" // <-- also missing >
use the class selector .
$('.price-block')
http://jsfiddle.net/WBsjA/
I think you'll need to loop each .price-block rather than trying to run it on the whole code mat once.
$('.price-block').each(function(){
$(this).html($(this).html().replace(".000","").replace(".00","").replace(".0",""));
});
Also you need to fix up your HTML markup
<div class="price-block">
<p> The price of this item is
<span class="price" id="oldprice">
<span class="WebRupee"> Rs. 3,795.000</span>
</span>
</p>
</div>
http://jsfiddle.net/daCrosby/XK48G/
Here's one approach. Since your price isn't wrapped in its own unique HTML <span> to make it easy to locate and replace, you need to parse the parent element, separate the child nodes from the text nodes, and rebuild it:
var newval;
$('.price').each(function(j, pr) {
// trick to remove the webRupee element for later
var $webRupee = $(pr).find('.WebRupee').remove().wrap('<div>').parent().html();
$(pr).contents().each(function(i, el) {
if (el.nodeType === 3 && el.nodeValue.match(/\.00/)) {
newval = el.nodeValue.replace(/\.00/, '');
}
});
$(pr).html($webRupee + newval);
});
http://jsfiddle.net/mblase75/r2V6r/
I have a form with multiple inputs / radio buttons.
I also have a series of Yes & No radio buttons. When the "Yes" radio button is checked, I have some data slide down beneath.
HTML:
<div class="item seperator first clearfix">
<label>test</label>
<div class="radioWrap">
<label class="yes">
<input class="homepageContent" name="homepageContent" type="radio" value="yes" />
</label>
<label class="no">
<input class="homepageContent" name="homepageContent" type="radio" value="no" checked />
</label>
</div>
</div>
<div class="extrasInner">
<div class="item clearfix">
<label for="theContent">Your Content:</label>
<textarea id="theContent" name="theContent"></textarea>
</div>
</div>
<div class="extrasOuter hide clearfix">
Make Changes
<span>Click "Make Changes" to update.</span>
</div>
The jQuery:
$("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
var value = $(this).val();
if (value == 'yes') {
$(this).parent().parent().parent().next().slideDown();
$(this).parent().parent().parent().next().next().slideDown();
} else {
$(this).parent().parent().parent().next().slideUp();
$(this).parent().parent().parent().next().next().slideUp();
}
});
Question 1) This works absolutely fine in Google Chrome, but not in Firefox and IE. It doesn't seem to recognise the click function?
Solved: I had a function within one of my files that removes the value from input fields on focus and this was stripping the value of the radio buttons as well in IE / Firefox (but not chrome!).
Question 2) Is my DOM traversing for the slideUp / slideDown an acceptable way of achieving what I'm trying to do? Are there any disadvantages to how I'm doing it and can it be improved?
Answer to #1
As Anthony Grist pointed out, there doesn't seem to be an issue with the click function.
Answer to #2
Your DOM traversal seem a bit unnecessary. In fact, your DOM structure is in need of rearrangement.
Using a checkbox instead of radio buttons. A checkbox only accepts two values: true or false, or in your case, yes or no. It seems more suitable.
Encapsulate your extras inner and extras outer divs inside your item div instead of having it next to the checkbox. This way, you make it easier to traverse within the item.
Also, you should read up on the different types of traverse functions JQuery has:
.parent() / .parents()
.children()
.closest()
.next()
.prev()
.siblings()
.find()
and many more.
Knowing all of these traverse functions, you'll most likely never ever do parent().parent().parent()... again. :)
Here's a JSFiddle example | Code
HTML
<ul>
<li class='item'>
<label>
<input class="homepageContent" name="homepageContent" type="checkbox" value="yes" />
Item 1
</label>
<div class='extras'>
<div class='inner'>
<label>
Your Content:<textarea name="content"></textarea>
</label>
</div>
<div class='outer'>
Make Changes
<span>Click "Make Changes" to update.</span>
</div>
</div>
</li>
</ul>
Javascript
$("input:checkbox").click(function() {
var $this = $(this),
$item = $(this).closest(".item");
if($this.is(':checked')){
$(".extras", $item).slideDown();
}else{
$(".extras", $item).slideUp();
}
});
CSS
.extras{
display: none;
}
Value of the radio button will always be same, no matter it is checked or not. If you want to know the particular radio button is checked or not then use this code. Based on the status of the radio button do your stuff.
var value = $(this).attr('checked')
That is working for me in FF (jsfiddle), although the DOM looks a little convoluted (I'm guessing because it's missing a lot of your other CSS/resources).
I think you can simplify the jQuery selectors a lot. Generally, using simple ID or class selectors will make the your page much more performant (and simpler!)
$('.homepageContent').click(function() {
var value = $(this).val();
if (value == 'yes') {
$('.extrasInner').slideDown();
$('.extrasOuter').slideDown();
} else {
$('.extrasInner').slideUp();
$('.extrasOuter').slideUp();
}
});
Hopefully doing something like this makes it work cross browser better too.
try this way
$("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
var value = $(this).val();
if (value == 'yes') {
$(this).parents('.seperator').next().slideDown();
$(this).parents('.seperator').next().next().slideDown();
} else {
$(this).parents('.seperator').next().slideUp();
$(this).parents('.seperator').next().next().slideUp();
}
});
EDIT
and also a point
wrap your code inside
$(document).ready(function(){});
like this
$(document).ready(function(){
$("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
var value = $(this).val();
if (value == 'yes') {
$(this).parents('.seperator').next().slideDown();
$(this).parents('.seperator').next().next().slideDown();
} else {
$(this).parents('.seperator').next().slideUp();
$(this).parents('.seperator').next().next().slideUp();
}
});
});
really new to JQuery.. like 2 hours new. Began to write a drop down menu for a login box like this:
HTML:
<button id="loginButton">Login</button>
When you hover over that, this JQuery runs:
$('#loginButton').live('hover', function() {
login_drop();
});
function login_drop(){
$('#loginBox').fadeIn();
}
$('#loginButton').live('hover', function() {
login_away();
});
function login_away(){
$('#loginBox').fadeOut();
}
And then this HTML DIV appears directly under the button:
<div id="loginBox">
<label for="email_B">Email Address</label>
<input type="text" name="email_B" id="email_B" />
<label for="password">Password</label>
<input type="password_B" name="password_B" id="password_B" />
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
<span>Forgot your password?</span>
</div>
and the CSS on that DIV is this:
#loginBox {
position:absolute;
top:70px;
right:100px;
display:none;
z-index:1;
}
This all works, but the behavior of it stinks. How do I make it so you can hover over the button put your mouse in the newly appeared DIV and the div won't fade away until your mouse leaves the div?
Sorry if my coding stinks.
Thanks a bunch guys!
--------------------------------EDITS AKA the ANSWERS--------------------
So for all of you reading this down the line. There are so many ways of making this work depending on how you want the user to interact with it.
Here is way 1...This way the login box fades out when your mouse leaves the login button. This is a quick way fo making it work. This answer is thanks to elclanrs besure to Up 1 his answer below if you like this.
JQuery:
$(function(){
$('#loginButton').mouseenter(function(){ $('#loginBox').fadeIn(); });
$('#login').mouseout(function(){ $('#loginBox').fadeOut(); });
});
HTML:
<div id="loginBox">
<label for="email_B">Email Address</label>
<input type="text" name="email_B" id="email_B" />
<label for="password">Password</label>
<input type="password_B" name="password_B" id="password_B" />
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
<span>Forgot your password?</span>
</div>
CSS:
#loginBox {
position:absolute;
top:70px;
right:100px;
width:200px;
height:200px;
display:none;
z-index:99;
background:url(../images/162.png);
}
WAY 2 is adding is a cancel button like Jared Farrish did here:
http://jsfiddle.net/j4Sj5/4/
if you like his answer, be sure to vot him up below!!
and WAY 3 is what I'm attempting now and should be the most user friendly and flashy. I'll post back once I get it to work correctly!
Ah this is a great one to do yourself. Here's how to do it. First off, live might be overkill for what you need to do. In your case you can use a standard hover event handler in jQuery:
$('#loginButton').hover(function() {
$('#loginBox').fadeIn();
}), function(){
$('#loginBox').fadeOut();
});
The real trick here is that you will trigger the mouse out effect as soon as your mouse moves off the button. This will make the menu disappear when the mouse enters the login box!
So what you actually want to do is handle the hover effect on a containing element. Make sure your #loginButton and #loginBox are contained in a parent element like so:
<div id="loginControl">
<button id="loginButton">Login</button>
<div id="loginBox">...</div>
</div>
Then attach the event to the loginButton's parent:
$('#loginButton').parent().hover(function() { ... }), function(){ ... });
Also, if you are using absolute positioning on #loginBox you'll want to also make sure you use position: relative on it's parent (#loginControl in my example):
#loginControl{ position: relative; }
Let me know if you have any trouble.
Getting More Advanced:
If you want to take this a step further you can try out implementing a simple timeout. I learned early on that it's bad for usability to have a dropdown menu that disappears when I accidentally moved my mouse off the dropdown. To fix this I add a simple delay that prevents the dropdown from hiding if the user's mouse returns to the dropdown within a very short period of time (say 250 to 350ms). I have this as a gist on github in case you want to try it out later: https://gist.github.com/71548
EDIT
(Subsequent EDIT: added a timeout to hide after only a mouseover on the show login element, plus some other updates.)
While I still think using mouseenter and mouseout to handle a login form is not the right way to go from a usability perspective, below is code that demonstrates what Jim Jeffers is describing and attempts to handle some of the pitfalls of the approach:
var setuplogindisplay = function(){
var $loginbox = $('#loginBox'),
$loginshow = $('#loginShow'),
$logincontainer = $('#loginContainer'),
$cancellogin = $('#cancelLogin'),
keeptimeout,
closetimeout;
var keepDisplay = function(){
clearAllTimeouts();
keeptimeout = setTimeout(loginHide, 2000);
};
var loginDisplay = function(){
clearAllTimeouts();
if ($loginbox.is(':hidden')) {
$loginbox.fadeIn();
}
};
var loginHide = function(){
clearAllTimeouts();
if ($loginbox.is(':visible')) {
if (!$(this).is('#cancelLogin')) {
closetimeout = setTimeout(function(){
$loginbox.fadeOut();
}, 1500);
} else {
$loginbox.fadeOut();
}
}
};
function clearAllTimeouts() {
if (keeptimeout) {
clearTimeout(keeptimeout);
}
if (closetimeout) {
clearTimeout(closetimeout);
}
}
$loginshow.mouseover(loginDisplay);
$loginshow.mouseout(keepDisplay);
$logincontainer
.mouseout(loginHide)
.children()
.mouseover(loginDisplay)
.mouseout(keepDisplay);
$cancellogin.click(loginHide);
};
$(document).ready(setuplogindisplay);
http://jsfiddle.net/j4Sj5/19/
Note, you have to make concessions to handle the fact mouseouts will fire when you mouse over elements within the #logincontrol element. I handle this by having them loginDisplay() on mouseenter event (it will work on mouseout, but it makes more logical sense on mouseenter).
I would keep in mind usability of the form when trying to access it and try not to get too clever or over-engineer the user experience. Consider:
<input type="button" id="cancelLogin" value="Cancel" />
Use this to close/hide the form, not an action on another element. If you put the close form action on an event like mouseout, you're going to aggravate your users when they move the mouse accidentally or intentionally out of the way, only to find the login form was closed when they did so. The form, IMO, should have the control which fires the event to hide it according to the user's choice.
<span id="loginButton">Show Login</span>
<div id="loginBox">
<label for="email_B">Email Address</label>
<input type="text" name="email_B" id="email_B" />
<label for="password">Password</label>
<input type="password_B" name="password_B" id="password_B" />
<input type="submit" id="login" value="Sign in" />
<input type="button" id="cancelLogin" value="Cancel" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
<span>Forgot your password?</span>
</div>
$(document).ready(function(){
var $loginbox = $('#loginBox'),
$button = $('#loginButton'),
$cancellogin = $('#cancelLogin');
var loginDisplay = function(){
$loginbox.fadeIn();
};
var loginHide = function(){
$loginbox.fadeOut();
};
$button.click(loginDisplay);
$cancellogin.click(loginHide);
});
http://jsfiddle.net/j4Sj5/4/
Instead of reinventing the wheel, I would recommend looking into a jquery plugin like hoverintent. It does most of the work for you.
And, on a related note, .live() is being deprecated in jquery as of v1.8. you should instead use .on().
This should work. Plus you don't need live() which by the way is deprecated in favor on on(). You also don't need those functions for a simple fadeIn()/fadeOut():
$('#loginButton').mouseenter(function(){ $('#loginBox').fadeIn(); });
$('#loginBox').mouseout(function(){ $(this).fadeOut(); });