jQuery script which opens selected box in new window one by one for specific time. But it runs all boxes on click button whether i check anything or not I am so Confused.
My jQuery code:
function bon()
{
var field = document.getElementsByName('list');
var len = field.length;
var j=0;
for (i = 0; i < field.length; i++)
{
lk[j] = document.getElementById('addlink_'+i).value;
j++;
}
win = window.open("","myWindow","height=500,width=500,menubar=no,status=no");
process();
var interval = document.getElementById('interval').value;
window.setInterval(function(){ process();}, interval);
}
function process()
{
if(oldval<lk.length)
{
var ln =lk[oldval];
win.location.href =ln;
//$.post("updateclick.php",{dbid:recordid},function(data) { document.getElementById(countid).innerHTML = data; });
oldval =oldval+1;
}
else
{
window.location.href=location.href;
}
}
function process1(a,b)
{
if(document.getElementById('chkbox_'+a).checked==true)
{
}
else
{
thisimg(a,b);
}
}
And my HTML code is:
<div class='posts'>
<input style='float:left; height:85px;' type='checkbox' name='list' value='chck_".$counter."' id='chkbox_".$counter."'/>
<div class='title box' onclick='process1(".$counter.",".$row['id'].")'>
<div style='float:left;' onclick='thisimg(".$counter.",".$row['idDiv1'].")'>
<img src='".$imgpath."' height='50' width='50' />
</div>
<div class='click' style='float:right;'>
<b>Clicks <br/>
<div id='count_".$counter."'> ".$click." </div>
<input type='hidden' id='addlink_".$counter."' value='".$app_link."' rel='nofollow'/></b>
</div>
<div style='float:left; width:100px; overflow:hidden; white-space: pre;'>
<b> ".$title."</b>
<br/>".$beforetime."
</div>
</div>
</div>
This is my button code:
<select id="interval">
<option value="5000"> 5 Seconds</option>
<option value="10000"> 10 Seconds</option>
</select>
<input class="butn" type="button" value="Collect" onclick="bon()" />
Working: the user has to select the check boxes which they want to open in new window one by one for specific time( provided in my option box). But whether i check any one or not it executes one by one all like it selects all check boxes.
Ok here is the actual HTML that prints
<div class=posts>
<input style='float:left; height:85px;' type=checkbox name=list value=chck_0 id=chkbox_0 />
<div class='title box' onclick='process1(0,190757)'>
<div style='float:left;' onclick='thisimg(0,190757)'>
<img src='/images/3c59e768eefb1d5d4a0bfdf0ae23cf5a.png' height=50 width=50 />
</div>
<div class=click style='float:right;'><b>Clicks <br/>
<div id=count_0> 0
</div>
<input type=hidden id=addlink_0 value='/link/zqdba3' rel=nofollow></b>
</div>
<div style='float:left; width:100px; overflow:hidden; white-space: pre;'> <b> Title</b><br/>2 Hs 31 Ms ago
</div>
</div>
</div>
Please help I am very confused.
You are iterating over all of your addlink_ inputs without looking at the checkbox. If the ith checkbox is checked, then push the corresponding input element's value onto the array.
var field = document.getElementsByName('list');
var len = field.length;
lk = [];
for (i = 0; i < len; i++) {
if(field[i].checked) {
lk.push(document.getElementById('addlink_'+i).value);
}
}
Related
sorry i do not speak english well, i want to create a tool that allows to duplicate a div thanks to an "input number" and a button and then I also want to clone this tool by reinitializing it to be able to use the tool again , Here is a piece of code:
$(function() {
$('#btn_dupliquate').on('click', function() {
var numDuplication = $('#num-duplication').val();
if (numDuplication > -1) {
var div = $('.common_preview');
$('.result').html('');
for (var i = 0; i < numDuplication; i++) {
$('.result').append(div.clone());
}
}
});
});
$(function() {
$(".heading").keyup(function() {
var heading=$(this).val();
$(".common_preview").html("<div class='bloc'><p class='model'>"+heading+"</p></div>");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toNumDuplicate">
<input type="text" class="heading" />
<br/>
<br/>
<input id="num-duplication" type="number" >
<br/>
<br/>
<button id="btn_dupliquate"> dupliquate </button>
</div>
<div id="toDuplicate">
<div class="common_preview" >
<div class="bloc">
<p class="model">test</p>
</div>
</div>
</div>
<div class="result"></div>
<button id="btn_clone">clone</button>
You could abstract your function to take dynamic selector strings for the duplicate button, duplicate number input, preview div and result div.
I am trying to create a system to filter through some tags by hiding and showing the appropriate items.
When .brandFilter is clicked, it needs to show the div using the id of the checkbox. When .prodFilter is clicked, it needs to show the corresponding colors but not show any deselected ID's (unless none have been selected, in which case show everything matching the color).
Right now when I click Epson and HP it works; but when I click Red it will show the red Lexmark product which is not desired; it was already filtered out when I selected the brand. Ideally clicking #brnd_HP, #brnd_Epson and #typ_Red will display Product A and F.
Deselecting a filter should "undo" whatever previous work it did.
Below is the markup I have now:
<h2>Brand</h2>
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Canon" />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Epson" />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_HP" />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Lexmark" />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Xerox" />
<h2>Color</h2>
<input type="checkbox" class="prodFilter" name="typeFilter" id="typ_Red" />
<input type="checkbox" class="prodFilter" name="typeFilter" id="typ_Blue" />
<div class="prdbx brnd_Epson typ_Red">Product A</div>
<div class="prdbx brnd_Canon typ_Red">Product B</div>
<div class="prdbx brnd_Epson typ_Blue">Product C</div>
<div class="prdbx brnd_Lexmark typ_Red">Product D</div>
<div class="prdbx brnd_Canon typ_Blue">Product E</div>
<div class="prdbx brnd_HP typ_Red">Product F</div>
The jQuery is not functioning as intended, but this is what I have so far. I really can't seem to wrap my head around the seemingly query like nature of toggling visibility with multiple parameters like this. The HP/Epson part works fine, but once the color is introduced it simply shows everything relating to the color ID.
<script>
jQuery(document).ready(function(){
$('.brandFilter').click(function(e) {
$('.brandbx').hide();
var thisFilter = "";
$('input[name=brandFilter]:checked').each(function(e) {
thisFilter += '.'+this.id;
});
$(thisFilter).show();
});
// when a filter is clicked
$('.prodFilter').click(function(e) {
$('.prdbx').hide(); // hide all products
var thisFilter = "";
var thisCounter = 0;
// for each clicked filter
$('.prodFilter:checked').each(function(e) {
thisFilter += '.'+this.id;
$('.'+this.id).show(); // show the products matching filter
thisCounter++;
});
if(thisCounter == 0){
$('.prdbx').show(); // if no clicked filters, show all products
$('.brandbx').show();
}
});
});
</script>
You need to combine the filters which means persisting the filter from the first checkbox somehow. This works.
var thisFilter1 = "";
jQuery(document).ready(function(){
$('.brandFilter').click(function(e) {
$('.brandbx').hide();
thisFilter1 = "";
var sep = ""
$('input[name=brandFilter]:checked').each(function(e) {
thisFilter1 = thisFilter1 + sep + '.'+this.id;
sep = ","
});
$(thisFilter1).show();
});
// when a filter is clicked
$('.prodFilter').click(function(e) {
$('.prdbx').hide(); // hide all products
var thisCounter = 0;
var thisFilter = "";
var sep=""
// for each clicked filter
$('.prodFilter:checked').each(function(e) {
thisFilter = thisFilter + sep + '.' + this.id;
sep=","
thisCounter++;
});
if(thisCounter == 0){
$('.prdbx').show(); // if no clicked filters, show all products
$('.brandbx').show();
}
else {
$('.prdbx').each(function() {
if ($(this).is(thisFilter1) && $(this).is(thisFilter)){
$(this).show()
}
})
}
});
});
EDIT: Updated for multiple selection combos. Say hello to jquery .is(). An interesting function that does not return a jq object so can't be chained but can be used inside an if test. You can now have Canon red, blue or red + blue, or HP + Canon blue, etc.
I might have not understand the desired functionality because in my code none of the products is shown at the beginning.
HTML:
<h2>Brand</h2>
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Canon" /> Canon
<br />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Epson" /> Epson
<br />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_HP" /> HP
<br />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Lexmark" /> Lexmark
<br />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Xerox" /> Xerox
<br />
<h2>Color</h2>
<input type="checkbox" class="prodFilter" name="typeFilter" id="typ_Red" /> Red
<br />
<input type="checkbox" class="prodFilter" name="typeFilter" id="typ_Blue" /> Blue
<div class="prdbx brnd_Epson typ_Red show">Epson Red</div>
<div class="prdbx brnd_Canon typ_Red show">Canon Red</div>
<div class="prdbx brnd_Epson typ_Blue show">Epson Blue</div>
<div class="prdbx brnd_Lexmark typ_Red show">Lexmark Red</div>
<div class="prdbx brnd_Canon typ_Blue show">Canon Blue</div>
<div class="prdbx brnd_HP typ_Red show">HP Red</div>
CSS:
.prdbx {
display: none;
}
.prdbx.show {
display: block;
}
JavaScript:
jQuery(document).ready(function() {
$(".brandFilter").on('change', function() {
//Filter by brand first
filterByBrand();
//Then filter by color
filterByProd();
});
$(".prodFilter").on('change', function() {
filterByProd();
});
});
function filterByBrand() {
var $allBrands = $(".brandFilter");
if (!$allBrands.filter(':checked').length) {
//If all brand checkboxes are unchecked, show all prdbx divs
$('.prdbx').addClass('show');
} else {
for (var i = 0; i < $allBrands.length; ++i) {
var $brand = $allBrands.eq(i);
//If a brand is checked show it, otherwise hide it
if ($brand.is(':checked')) {
$('.' + $brand.attr('id')).addClass('show');
} else {
$('.' + $brand.attr('id')).removeClass('show');
}
}
}
}
function filterByProd() {
var $allProdFilters = $(".prodFilter");
var noneIsSelected = true;
for (var i = 0; i < $allProdFilters.length; ++i) {
var $prodFilter = $allProdFilters.eq(i);
var $prod = $('.' + $prodFilter.attr('id'));
//If the checkbox is checked
if ($prodFilter.is(':checked')) {
noneIsSelected = false;
if (!$prod.hasClass('show')) {
$prod.addClass('show');
}
} else {
$prod.removeClass('show');
}
}
//If no color is selected, filter by brand
if (noneIsSelected) {
filterByBrand();
}
}
And here is the fiddle: https://jsfiddle.net/mehmetb/m2zLt6Lo/
So i am trying to make a comment system in my new site.All the comments have a reply button with id 'replybtn' which, onclick i want to show a textarea or input field inside a div with id 'replyform' right below the respective comment. And i am using php,mysql to retrieve comments.
<div class='cmt'>
<div class='cmttext'></div>
<div id='replybtn'></div>
<div id='replyform'>
<form method='post' ..... >
<textarea name='reply' ></textarea>
<input type='submit' />
</form>
</div>
</div>
Thank you. This is my first question asked on stackoverflow, so sorry if i have not given sufficient information.
Try this. It is plain JavaScript. Modify below what you want. :)
I updated it.
var varHtml = "<form method='post' ..... ><textarea name='reply' ></textarea> <input type='submit' /> </form>";
var allElements = document.body.getElementsByClassName("replybtn");
var addCommentField = function() {
for (var i = 0; allElements.length > i; i++) {
if (allElements[i] === this) {
console.log("this " + i);
if (document.getElementsByClassName("replyform")[i].innerHTML.length === 0) {
document.getElementsByClassName("replyform")[i].innerHTML = varHtml;
}
}
}
};
for (var i = 0; i < allElements.length; i++) {
allElements[i].addEventListener('click', addCommentField, false);
}
<div class='cmt'>
<div class='cmttext'></div>
<button class='replybtn'>replybtn</button>
<div class='replyform'></div>
</div>
<div class='cmt'>
<div class='cmttext'></div>
<button class='replybtn'>replybtn</button>
<div class='replyform'></div>
</div>
<div class='cmt'>
<div class='cmttext'></div>
<button class='replybtn'>replybtn</button>
<div class='replyform'></div>
</div>
I have a set of number fields with the class product-quantity. When I add a number to the input field a div class name-number-field should appear after the class name-number-header. When a number is taken away from the field, the last name-number-field should be removed.
when val= 8 and size= 0 8 div's should be added
when val= 8 and size= 3 5 div's should be added
this what I came up with, but I am stuck
$(document).ready(function() {
$('.product-quantity').on('change',function(){
selector = "#product-"+$(this).attr('data-product-id')+
"[data-size-field='"+$(this).attr('data-size') +"']";
if ($(this).val > $(selector).size) {
for (var i = 0; i < (val-size); i++){
$('.size-field').insertAfter($(".name-number-header"));
}
}
if ($(this).val < $(selector).size) {
for (var i = 0; i < (size-val); i++){
$('.size-field :last').remove();
}
}
});
});
http://s24.postimg.org/x4njd7r44/Screen_Shot_2013_12_12_at_6_03_47_PM.jpg
here is a link to a screen shot of the html inspection ^^^^^^^^^^^^^^^^^
html:
<div class="size-column">
<div class="size-field">
<div id="size-label"></div>
<div class="number-input">
<input id="XSmall" class="product-quantity" type="number" name="XSmall" min="0"
max="9999" data-size="XSmall" data-product-id="1"></input>
</div>
</div>
<div class="size-field">
<div id="size-label"></div>
<div class="number-input">
<input id="Small" class="product-quantity" type="number" name="Small" min="0"
max="9999" data-size="Small" data-product-id="1"></input>
</div>
</div>
<div class="size-field">
<div id="size-label"></div>
<div class="number-input">
<input id="Medium" class="product-quantity" type="number" name="Medium" min="0"
max="9999" data-size="Medium" data-product-id="1"></input>
</div>
</div>
....up to 5xl
<div class="name-number-form" data-switch="1" style="display: none;">
<div class="name-number-header"></div>
<div id="number-field-set">
<div class="name-number-field" data-size="XSmall">
</div>
<div class="name-number-field" data-size="Small">
</div>
<div class="name-number-field" data-size="Medium">
</div>
...up to 5xl
Edited code:
$(document).ready(function() {
$('.product-quantity').on('change',function(){
selector = "#product-"+$(this).attr('data-product-id')+
" [data-size-field='"+$(this).attr('data-size') +"']";
var val = $(this).val();
var size = $(selector).size();
if (val > size) {
for (var i = 0; i < (val-size); i++){
$('hi').insertAfter($(".name-number-header"));
}
}
if (val < size) {
for (var i = 0; i < (size-val); i++){
$('.name-number-field :last').remove();
}
}
});
});
I created a fiddle that simulates something like what I am trying to do. What I dont want is the second input to effect the adding and removing of the div in the first column.
http://jsfiddle.net/7PhJZ/19/
$('.size-field').insertAfter($(".name-number-header"));
searches for elements with the class size-field.
If i understood your question correctly you want to create new size-field divs and append them.
If so, try it like that:
$('<div/>',{'class':'size-field'}).insertAfter($(".name-number-header"));
This will create a new div with class size-field and adds it after .name-number-header.
i have an .each() loop doing something on all matching elements. but i also have a way to add those elements.... i'm trying to get livequery to realize that a new element has been added and run it through the same each loop.
here's a general setup:
http://jsfiddle.net/CUURF/1/
basically, how do i use livequery and each together?
ultimately it is so that i can dynamically add tinymce editor textboxes in metaboxes, but i am fairly certain the problem is that my IDs aren't autoincremting on the add/clone, since the new element isn't in the DOM for the each loop.
edit- i think the biggest thing is that i need the index counter that comes standard w/ .each to work w/ livequery?
edit- here's the code from wpalchemy for looping/cloning
/* <![CDATA[ */
jQuery(function($)
{
$(document).click(function(e)
{
var elem = $(e.target);
if (elem.attr('class') && elem.filter('[class*=dodelete]').length)
{
e.preventDefault();
var p = elem.parents('.postbox'); /*wp*/
var the_name = elem.attr('class').match(/dodelete-([a-zA-Z0-9_-]*)/i);
the_name = (the_name && the_name[1]) ? the_name[1] : null ;
/* todo: expose and allow editing of this message */
if (confirm('This action can not be undone, are you sure?'))
{
if (the_name)
{
$('.wpa_group-'+ the_name, p).not('.tocopy').remove();
}
else
{
elem.parents('.wpa_group').remove();
}
the_name = elem.parents('.wpa_group').attr('class').match(/wpa_group-([a-zA-Z0-9_-]*)/i)[1];
checkLoopLimit(the_name);
$.wpalchemy.trigger('wpa_delete');
}
}
});
$('[class*=docopy-]').click(function(e)
{
e.preventDefault();
var p = $(this).parents('.postbox'); /*wp*/
var the_name = $(this).attr('class').match(/docopy-([a-zA-Z0-9_-]*)/i)[1];
var the_group = $('.wpa_group-'+ the_name +':first.tocopy', p);
var the_clone = the_group.clone().removeClass('tocopy');
var the_props = ['name', 'id', 'for'];
the_group.find('input, textarea, select, button, label').each(function(i,elem)
{
for (var j = 0; j < the_props.length; j++)
{
var the_prop = $(elem).attr(the_props[j]);
if (the_prop)
{
var the_match = the_prop.match(/\[(\d+)\]/i);
if (the_match)
{
the_prop = the_prop.replace(the_match[0],'['+(+the_match[1]+1)+']');
$(elem).attr(the_props[j], the_prop);
}
}
}
});
if ($(this).hasClass('ontop'))
{
$('.wpa_group-'+ the_name +':first', p).before(the_clone);
}
else
{
the_group.before(the_clone);
}
checkLoopLimit(the_name);
$.wpalchemy.trigger('wpa_copy', [the_clone]);
});
function checkLoopLimit(name)
{
var elem = $('.docopy-' + name);
var the_match = $('.wpa_loop-' + name).attr('class').match(/wpa_loop_limit-([0-9]*)/i);
if (the_match)
{
var the_limit = the_match[1];
if ($('.wpa_group-' + name).not('.wpa_group.tocopy').length >= the_limit)
{
elem.hide();
}
else
{
elem.show();
}
}
}
/* do an initial limit check, show or hide buttons */
$('[class*=docopy-]').each(function()
{
var the_name = $(this).attr('class').match(/docopy-([a-zA-Z0-9_-]*)/i)[1];
checkLoopLimit(the_name);
});
});
/* ]]> */
</script>
and the markup for inside my metabox:
<div id="testimonials">
<h2>Testimonials</h2>
<a style="float:right; margin:0 10px;" href="#" class="dodelete-testimonials button"><span class="icon delete"></span>Remove All</a>
<div id="wpa_loop-testimonials" class="wpa_loop wpa_loop-testimonials"><div class="wpa_group wpa_group-testimonials first">
<span class="icon delete"></span>Remove
<div class="slide_preview">
<div class="preview_wrap">
<img class="preview" src="" alt="preview" />
</div>
<input type="hidden" name="_sidebar_meta[testimonials][0][testimonial_image]" value="" class="img_src" />
<input type="hidden" name="_sidebar_meta[testimonials][0][slide_image_alt]" value="" class="img_alt" />
<button class="upload_image_button button" type="button"><span class="icon upload"></span>Change Photo</button>
</div>
<div class="slide_text">
<label>About Testimonial</label>
<div class="customEditor minimal">
<textarea rows="5" cols="50" name="_sidebar_meta[testimonials][0][testimonial_desc]">I realized it was ME causing all the problems</textarea>
</div>
</div>
</div> <div class="wpa_group wpa_group-testimonials last tocopy">
<h3 class="slide">Testimonial Name:
<input type="text" name="_sidebar_meta[testimonials][1][testimonial_name]" value="" />
</h3>
<span class="icon delete"></span>Remove
<div class="slide_preview">
<div class="preview_wrap">
<img class="preview" src="http://localhost/multi/wp-content/themes/callingintheone/functions/WPAlchemy/images/default_preview.png" alt="_sidebar_meta[testimonials][1][testimonial_image] Preview" />
</div>
<input type="hidden" name="_sidebar_meta[testimonials][1][testimonial_image]" value="" class="img_src" />
<input type="hidden" name="_sidebar_meta[testimonials][1][slide_image_alt]" value="" class="img_alt" />
<button class="upload_image_button button" type="button"><span class="icon upload"></span>Upload Photo</button>
</div>
<div class="slide_text">
<label>About Testimonial</label>
<div class="customEditor minimal">
<textarea rows="5" cols="50" name="_sidebar_meta[testimonials][1][testimonial_desc]"></textarea>
</div>
</div>
</div></div>
<p style="margin-bottom:15px; padding-top:5px;"><span class="icon add"></span>Add Testimonial</p>
</div>
the .tocopy class gets shifted by the alchemy code to a new hidden (by CSS) and last element
Your problem was that each was not executing with the clik. And after that there was nothing to make it run.
fixed code
Answer: http://jsfiddle.net/morrison/CUURF/6/
Notes:
Does not use livequery. There's no need to in this instance.
Keeps track of existing editors in an array. This is faster than cycling through the DOM every time you want an editor. DOM stuff is slow, arrays are fast. This also gives you easy access to any or all of the editors for other things you might do.
Doesn't cycle when a new editor is created. It simply modifies the new editor to have an id of the last one plus 1. This is a huge performance boost.