What I'm trying to achieve
Clone a div and add it below the existing div(s) - jQuery 1 below
...in the div that is being cloned, I already have another jQuery running that shows/hides a child div based on a checkbox - jQuery 2 below
Issue
Cloning works fine. However, I can't get the show/hide based on checkbox to work
Question
Is this possible to do through jQuery? It seems like jQuery 2 doesn't understand that, post-cloning, there's a new div that also would like the same functionality of showing/hiding the child-div based on the checkbox.
jQuery 1
$(document).ready(function() {
var i = 0;
$('.button-add').click(function(){
$i = i++;
//we select the box clone it and insert it after the box
$copy = $('.copybox:first').clone();
$copy.find("input:checkbox").attr("data-related-item","hideconfig"+i);
$copy.find("div#hideconfig").attr("id","hideconfig"+i);
$copy.insertAfter(".copybox:last");
});
$(document).on("click", ".button-remove", function() {
$('.copybox:last').remove();
});
});
jQuery 2
function evaluate(){
var item = $(this);
var relatedItem = $("#" + item.attr("data-related-item"));
if(item.is(":checked")){
relatedItem.fadeIn();
}else{
relatedItem.fadeOut();
}
}
$('input[type="checkbox"]').click(evaluate).each(evaluate);
Related
I have simple Database, which contains fields like ID, product_name, product_description, image, cost.
I have a dynamically generated form which I'm going to send using jQuery, what should I change in my JavaScript to pass to defined div the data which I got from my DB via PHP?
JavaScript Code:
$(function() {
var number = 1;
var contentToLoad = 'Defined structure';
$('a.add').click(function(e) {
e.preventDefault();
$('#calc').append(contentToLoad);
number++;
});
$('#calc').on('click', 'a.design_button', function(e) {
e.preventDefault();
$(this).parent().remove();
});
});
---
UPDATE:
I need a little help with merging two parts of JavaScripts to make it work. I need to put somehow that part:
var number = 1;
var contentToLoad = 'Defined structure';
$('a.add').click(function(e) {
e.preventDefault();
$('#calc').append(contentToLoad);
number++;
});
where a.add i've replaced with submit button, inside this one
function add(data_array){
$(document).on('submit', '#add', function()
{
var r_data = data_array;
alert(r_data);
...
});
}
but I can't make it work ;/
I've menaged to do sth like that:
function mini(data_array){
var number = 1;
var r_arr = data_array;
$(this).on('submit', function(e) {
e.preventDefault();
var contentToLoad = '<div id="item-'+ number +'" class="item row"> '+ number +' '+r_arr+' Defined structure </div>';
$('#calc').append(contentToLoad);
number++;
});
}
But now I have a problem with making it work correctly, because it adds me the correct div + all divs which was previously added.
Let's just say that I have blank site and I want to add two divs, so I click twice on the button and it should add me two divs, but it adds after 1st click div with id = 1 and after 2nd click div with id = 2 + div with id=1, So in effect I have three divs after two clicks.
Where in code placed above I've made mistake ?
I'm new to JQuery and I noticed this line $('#DivID [type=checkbox]') and I was wondering if I can also find the select or option tags using the same method.
Update: I have a div that has more than more tag, I'm trying to get the DropDownList/Select that it's value's just changed.
Update2 I'm using InstaFilta a JQuery plugin that filter the content based on a customized attribute appended to my content tags. Below is a snippet for the function that do the same when working with CheckBoxes, and I'm trying to edit it to work with DropDownLists/Select controls.
var $ex10Checkboxes = $('#ex10 [type=checkbox]');
$ex10Checkboxes.on('change', function() {
var checkedCategories = [];
$ex10Checkboxes.each(function() {
if ($(this).prop('checked')) {
checkedCategories.push($(this).val());
}
});
ex10.filterCategory(checkedCategories, true);
});
You would find the option tags as follows:
$("#DivID option")
Likewise the select tags:
$("#DivID select")
You can then iterate over the returned objects to inspect the individual elements:
var foo = $("#DivID option");
var i;
for (i = 0; i < foo.length; i += 1) {
console.log(foo[i].val()); //or whatever
}
To find the selected element you could check out this question:
$("#DivID option:selected")
I would suggest checking out the JQuery page on Selectors JQuery Selectors
I have a TableSorted table, and in each TD element are five SPAN elements. Four are always hidden, but upon clicking a div outside the table, certain spans are hidden dependent on which div is clicked.
I have the table sorting fine, but what I need is for the textExtraction to grab a different SPAN, depending on the value of the div which has been selected.
I've tried the following to no avail:
textExtraction:function(node){
var filter=$("div.career a.sel").text();
if(filter=="a"){var theindex=0;}
if(filter=="b"){var theindex=1;}
if(filter=="c"){var theindex=2;}
if(filter=="d"){var theindex=3;}
if(filter=="e"){var theindex=4;}
return $(node).find("span").eq(theindex).text();
}
What is the best way to achieve this?
The textExtraction function is only called when tablesorter is initialized or updated. Try triggering an update after the selection has changed.
var indexes = 'abcde'.split(''),
// Is this a select box?
$sel = $("div.career a.sel").on('change', function(){
$('table').trigger('update');
});
$('table').tablesorter({
textExtraction: function(node){
// if this is a select, get val(), not text()
var filter = $sel.val(),
theindex = $.inArray( filter, indexes );
return $(node).find("span").eq(theindex).text();
}
});
Update: for a link, try this:
var indexes = 'abcde'.split(''),
$careers = $("div.career a").on('click',function(){
var searcher = $(this).attr("rel");
$("div.career a").removeClass("sel");
$(this).addClass("sel");
$("td.stat span").hide();
$("td.stat span.career_" + searcher).show();
});
$('table').tablesorter({
textExtraction: function(node){
// find selected
var filter = $careers.filter('.sel').text(),
theindex = $.inArray( filter, indexes );
return $(node).find("span").eq(theindex).text();
}
});
Note: Don't use live() in jQuery version 1.9+, it was removed.
I have a 4 drop down list based on each drop down value the other drop down will change i tried to change the style of the drop down list using CSS and jquery and javascript.
I almost got the style of the drop down and the functionality also works fine, but where i am stuck is
In the jquery what is done is
$(document).ready(function(){
$("select").each(function(){
$(this).wrap('<div class="selectbox"/>');
$(this).after("<span class='selecttext'></span><span class='select-arrow'></span>");
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
$(this).change(function(){
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
});
});
});
so for all the select it automatically wraps with div and after that the 2 spans are placed.
So when i change the value on the 1 drop down for the first time the values of the 2nd drop down is changed .
When i again change the value of the 1 drop down the 2 drop down values does not reset to the default value.
Because the span hold the value of the previously selected value.. How can i overcome this.
Have you tried like this:
$(document).ready(function(){
$("select").each(function(){
$(this).wrap('<div class="selectbox"/>');
$(this).after("<span class='selecttext'></span><span class='select-arrow'></span>");
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
});
$("select").change(function(){
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
});
});
I'm trying to append a div to the bottom of a another div, by clicking a button in javascript, but once the height of the outer container is reached, it no longer scrolls the list to the bottom, after an insert.
Please see the fiddle here
If you click the red add button until you get to about 13 items in the list, it seems something goes wrong with the scrollTop function, and it it no longer functions correctly (hovers around the same spot in).
I'm pretty lost on this, and have tried a bunch of different combinations of css settings for both the container and side div. Please help me.
I've reformatted your code to be more jQuery-esque. The main change, however, was to change the list.scrollTop() function so that it just scrolls to the bottom of list:
$(document).ready(function() {
var list = $("#q-d-list");
$(document).on('click', '#add', function() {
$('.active', list).removeClass("active");
var count = list.children().length + 1;
var active = $('<div />', {
'data-qid': count,
'class': 'mli active'
}).text('q' + count).appendTo(list);
list.scrollTop(list[0].scrollHeight);
});
});
Demo: http://jsfiddle.net/MrvcB/19/
Use
list.scrollTop(list.get(0).scrollHeight);
rather than
list.scrollTop($(".active").offset().top);
Try:
$(document).ready(function () {
var count = 2;
$("#add").live("click", function () {
var list= $("#q-d-list");
// remove the active class from the old item
var $clone = $(list.find("div:last-child").removeClass("active").clone());
count+=1;
var str_count = "q"+count.toString();
$clone.addClass("active").attr("data-qid",str_count).text(str_count);
list.append($clone);
list.scrollTop(list.get(0).scrollHeight);
});
});
http://jsfiddle.net/H4Kb3/