I am still very new to JavaScript and jQuery.
I have the jQuery "add boxes" functionality working for adding dynamic <textarea>s, but the remove portion does not work.
My code:
$(function() {
var i = $('textarea').size() + 1;
$('#remove').click(function() {
if (i > 1) {
$('.this:last').remove();
i--;
}
});
$('.Add').live('click', function(e) {
$('<div><textarea id="txt"></textarea> <textarea id="txt2"></textarea></div>').fadeIn('fast').appendTo('.Option');
i++;
});
});
Demo: http://jsfiddle.net/dnwTV/
Any help would be greatly appreciated.
You are selecting .this:last, and no elements with a class of this exists. Use textarea:last as a selector instead. Also, your markup is inconsistent; the original should have another <div> wrapping the two <textarea>s. Here is a corrected version of your jsFiddle.
$(function() {
var i = $('.Option > div').size() + 1;
$('#remove').click(function(e) {
if (i > 1) {
$('.Option > :last').remove();
i--;
}
e.preventDefault();
});
$('.Add').click(function(e) {
$('<div><textarea id="txt"></textarea> <textarea id="txt2"></textarea></div>').fadeIn('fast').appendTo('.Option');
i++;
});
});
That said, I don't believe your current code is either sufficiently neat or generic. See this jsFiddle for an example of how you might make this cleaner.
Note
You're creating multiple textarea with same id. It is not allowed.
You can change your add code like following:
$('.Add').live('click', function(e) {
$('<div><textarea id="txt'+ i +'"></textarea> <textarea id="txt'+ (i+1) +'"></textarea></div>').fadeIn('fast').appendTo('.Option');
i++;
});
And one more thing
Instead of live, use on(). As you're not adding .Add dynamically so you not need live delegation for that. Just use following:
$('.Add').on('click', function(e) {
$('<div><textarea id="txt"></textarea> <textarea id="txt2"></textarea></div>').fadeIn('fast').appendTo('.Option');
i++;
});
Your complete code should look like:
$(function() {
var i = $('textarea').size() + 1;
$('#remove').click(function() {
i = $('textarea').size() + 1;
if (i > 1) {
$('.Option > textarea:last').last().remove();
i--;
}
});
$('.Add').on('click', function(e) {
$('<textarea id="txt' + i + '"></textarea> <textarea id="txt' + (i + 1) + '"></textarea>').fadeIn('fast').appendTo('.Option');
i++;
});
});
Working sample
I believe that this is the effect that you are trying to achieve:
Demo: http://jsfiddle.net/SO_AMK/dnwTV/4/
Code:
HTML:
<div class='Option'><textarea id="txt"></textarea> <textarea id="txt2"></textarea> </div>
Remove
<br/><br/>
<span class='Add'>Add Option</span>
jQuery:
$(function() {
var i = $('textarea').size() + 1;
$('#remove').click(function() {
if (i > 1) {
$('textarea:last').parent().remove();
i--;
}
});
$('.Add').click(function(){
$('<div><textarea id="txt"></textarea> <textarea id="txt2"></textarea></div>').fadeIn('fast').appendTo('.Option');
i++;
});
});
here's an updated fiddle that works
http://jsfiddle.net/dnwTV/5/
Javascript:
$(function() {
$('#remove').click(function() {
$('.Option div:last').remove();
});
$('.Add').live('click', function(e) {
var i = $('textarea').length + 1;
$('<div><textarea id="txt' + i + '"></textarea> <textarea id="txt' + (i+1) + '"></textarea></div>').fadeIn('fast').appendTo('.Option');
});
});
Also fixed the fact that you're reusing html id's which should be unique per page.
Related
I am adding element to page using the static number according to the click of user. so the element has the serial number according to the user click.
when user click on any of the element and deletes, i need to re-arrange the serial number. i try using the each operator with while loop, but not working.
any one suggest me the right way pelase.
here is my try:
var num = this.clipsLength, clipNum=1;
while(this.clipsLength > 0){
$.each(this.collection.pages, function(index, page) {
$.each(page, function(n, cs) {
var title = $(cs).find('span.text');
title.html('Clipping' + clipNum); //always 0 or all clips are '0'
});
});
--this.clipsLength;
clipNum = num-this.clipsLength;
}
for the try here is the fiddle:
Live Demo
do you mean something like reset the number?
http://jsfiddle.net/Lgwow5pt/2/
$('#content').on('click', '.remove', function () {
$(this).parent().remove();
$('span').each(function(i, item){
item.lastChild.textContent = i+1;
});
Demo
Try this
var htmlT = '<span>x</span>';
i=1;
$('#content').on('click', '.remove', function () {
$(this).parent().remove();
i = 1;
$('#content span').each(function() {
$(this).html('<a class="remove" href="#">x</a>'+i);
i++;
});
})
$('.add').click(function () {
$('#content').append($(htmlT).append(i));
i++;
});
Here it works
I modified your fiddle.
http://jsfiddle.net/khaleel/Lgwow5pt/7/
$('#content').on('click', '.remove', function () {
$(this).parent().remove();
var l= $("#content").find('span').length;
$('#content').empty();
i=1;
for(var j=0;j<l;j++){
$('#content').append($(htmlT).append(i));
i++;
}
})
Hope you accept the solution
Well ..according to your fiddle i tried to resolve the issue. Hope this helps.
change the click event on .remove with the following:
$('#content').on('click', '.remove', function () {
j=i-2;
i=1;
$(this).parent().remove();
$("#content").html("");
for(k=0;k<j;k++)
$('.add').trigger('click');
})
for some reason I cannot make this simple thing to work:
for (var i = 0; i < results.length; i++) {
var object = results[i];
$("#recipes_names").append("<div id =" + "recipe" + i + " >");
$("#recipes_names").append(object.get('recipe_title'));
console.log(object);
console.log(object.id + ' - ' + object.get('recipe_title'));
$("#recipe1").click(function(e) {
e.stopPropagation();
alert("inside click");
});
}
},
I create divs within the "recpie_names" div with the name "recipe0"/"recipe1" etc and I can't for the life of me make them clickable.
I'm sure there's a tiniest of mistakes that I make here but I just can't nail it down.
Can you help me out?
Add a class to the div which is appended and instead of adding event on base of id add just one event on class selector and write just on event:
$("#recipes_names").append("<div class='recipe' id =" + "recipe" + i + " >");
and:
$(document).on("click",".recipe",function(e) {
e.stopPropagation();
alert("inside click");
});
You have to delegates your event
$('#recipes_names').on('click', 'div[id^=recipe]', function(e){
e.stopPropagation();
alert("inside click");
});
It looks like you are generating these divs after the fact. So .click will not work.
Try:
$("#recipe1").on('click', function(e) {
e.stopPropagation();
alert("inside click");
});
So I have been trying to think of how to explain this in a way that makes sense, but I will show you below, as it makes more sense.
I have this code that works fine but I want to shorten it down into a for each loop or something.
$('.holder1').on({
click: function(){
$('.box1').css({display: 'none'});
$('.text1').css({display: 'block'});
}
});
$('.holder2').on({
click: function(){
$('.box2').css({display: 'none'});
$('.text2').css({display: 'block'});
}
});
$('.holder3').on({
click: function(){
$('.box3').css({display: 'none'});
$('.text3').css({display: 'block'});
}
});
I have this going on up to 40+, and obviously this code is horrific.
You can refactor the HTML code to use a common class and data attributes. Something like this:
<div class="holder" data-box="box1" data-text="text1"></div>
<div class="holder" data-box="box2" data-text="text2"></div>
<div class="holder" data-box="box3" data-text="text3"></div>
Then you can have a single click handler for all classes:
$('.holder').on({
click: function(){
$('.' + $(this).data('box')).css({ display: 'none' });
$('.' + $(this).data('text')).css({ display: 'block' });
}
});
This avoids the needs for ugly loops to add multiple handlers and iterative id attributes, which always turns in to a maintenance nightmare.
To solve this problem it is possible to iterate over holder elements using jQuery Attribute Starts With selector (API docs):
$.each('[class^="holder"]', function(index, item) {
$(item).on('click', function() {
$('.box' + index).css({display: 'none'});
$('.text' + index).css({display: 'block'});
});
});
I would prefer using some common class, though, as Rory McCrossan pointed out in his answer.
for (var i = 0; i< 40; i++) {
$('.holder' + i ).on({
click: function(){
$('.box' + i).css({display: 'none'});
$('.text' + i).css({display: 'block'});
}
});
}
or just add a common class and use it.
try this:
use class .box and .text instead
var holder = $(".holder1");
for (var i = 2; i<= 40; i++) {
holder.add($(".holder"+i));
}
$(holder).on(
'click', function(){
$('.box').css({display: 'none'});
$('.text').css({display: 'block'});
}
});
Assuming holders and boxes sit in their respective containers, like
<div>
<div class="holder">a</div>
<div class="holder">b</div>
<div class="holder">c</div>
<div class="holder">d</div>
</div>
<div>
<div class="box">a</div>
<div class="box">b</div>
<div class="box">c</div>
<div class="box">d</div>
</div>
you can get rid of box/text numbers altogether:
$(".holder").click(function() {
var n = $(this).index();
$(".box").eq(n).show();
});
This way it will be much easier to add new elements or change their order.
Use:
$("*[class^='holder']").on({
click: function(){
var id = $(this).attr("class").replace("holder","");
$('.box'+id).css({display: 'none'});
$('.text'+id).css({display: 'block'});
}
});
I have made a JSFiddle just for better understanding of my question!
So no need to paste code over here everything is visible on fiddle. Ill paste JS part.
JS Fiddle
$('select[name="chooseGW"]').change(function(){
if ($(this).val() == "fileiceGW") {
$('input#fileiceGW').css('display', 'block');
} else {
$('input#fileiceGW').css('display', 'none');
}
if ($(this).val() == "adworkGW") {
$('input#adworkGW').css('display', 'block');
} else {
$('input#adworkGW').css('display', 'none');
}
if ($(this).val() == "cpaleadGW") {
$('input#cpaleadGW').css('display', 'block');
} else {
$('input#cpaleadGW').css('display', 'none');
}
});
Ok... so my question is how to make this code better and shorten cause I believe it can be for sure... Something like match data-gateway with specified id or something...
The code in JSfiddle works just fine but its too much of duplicate I believe.
Your help is appreciated, thank you !
P.S. explanation of how your shorten code works and what for is specified thing is more then appreciated.
The simplest update would be:
$('select[name="chooseGW"]').change(function() {
var val = $(this).val();
$('input').hide();
$('#' + val).show();
});
JS Fiddle demo.
This version assumes you want to hide all other input elements when you show the selected element. If you want previously-shown input elements to remain visible, omit the line ending in hide():
$('select[name="chooseGW"]').change(function() {
var val = $(this).val();
$('#' + val).show();
});
JS Fiddle demo.
You can, of course, omit the creation of a (more or less-) unnecessary variable:
$('select[name="chooseGW"]').change(function() {
$('input').hide();
$('#' + $(this).val()).show();
});
JS Fiddle demo.
References:
hide().
show().
val().
<select name="chooseGW">
<option value="noneGW">-- none --</option>
<option value="fileiceGW">Fileice Gateway</option>
<option value="adworkGW">Adworkmedia Gateway</option>
<option value="cpaleadGW">CPALead Gateway</option>
</select>
<div style="display: inline;" >
<input type="text" id="fileiceGW" style="display: none;" value="fileice()" />
<input type="text" id="adworkGW" style="display: none;" value="adwork()" />
<input type="text" id="cpaleadGW" style="display: none;" value="cpalead()" />
</div>
var inputs = {
fileiceGW: "input#fileiceGW",
adworkGW: "input#adworkGW",
cpaleadGW: "input#cpaleadGW"
};
$(function () {
$('select[name="chooseGW"]').change(function () {
$("input").hide();
var val = $(this).val();
var selector = inputs[val];
$(selector).show();
});
});
$('select[name="chooseGW"]').on('change', function() {
$('input').hide();
if(this.value !== 'noneGW') {
$('#' + this.value).show();
}
});
http://jsfiddle.net/f0t0n/tHckA/
I wonder why the below code works fine in IE but not Firefox (3.6.15)?
HTML:
<input type="image" name="btbuy1" id="btbuy1" src="img/buy.gif" disabled="disabled"/>
JavaScript:
EnableBuyButton(btbuy1);
function EnableBuyButton(ABtnId)
{
var btElement = document.getElementById(ABtnId);
btElement.setAttribute("disabled", "");
$('#' + ABtnId).bind('click', function ()
{
alert('User clicked buy btn');
});
}
Have a look, I've also done a little tidying up http://jsfiddle.net/bkKNU/
<input type="image" name="btbuy1" id="btbuy1" src="img/buy.gif" disabled="disabled"/>
EnableBuyButton("btbuy1");
function EnableBuyButton(ABtnId)
{
$('#' + ABtnId).attr("disabled","").bind('click', function ()
{
alert('User clicked buy btn');
});
}
You want to use an id but you are actually using the Html element that is identified by the id,
try
EnableBuyButton('btbuy1');
in stead of
EnableBuyButton(btbuy1);
You can also call the Jquery selector with the element itself
$(btElement)
Try this:
$(function() {
var EnableBuyButton = function(ABtnId)
{
var btElement = $('#' + ABtnId);
btElement.attr("disabled", "");
btElement.bind('click', function ()
{
alert('User clicked buy btn');
});
}
EnableBuyButton('btbuy1');
});
Hope it helps
jsfiddle: http://jsfiddle.net/aPvgm/1/
function EnableButton(id)
{
$('#' + id)
.removeAttr("disabled")
.click(function ()
{
alert('User clicked buy btn');
});
}