button that creates a copy of itself - javascript

I have a button next to a text box and when I click the button i want it to create another button next to another text box. This code is doing just that but the new button doesn't work.
<div id="algorithm">
<input type="button" id="add_child" value="+" />
<input type="text" id="textbox0" />
</div>
$('#add_child').click(function() {
$('<input type="button" id="add_child" value="+" />').appendTo('#algorithm');
$('<input type="text" id="textbox0" />').appendTo('#algorithm');
});

I'd suggest trying this approach:
$('#algorithm').on('click','input',function(){
$(this).clone(true,true).insertAfter($(this));
});
JS Fiddle demo.
Revised the above code to update the id attribute so that there are no duplicates:
$('#algorithm').on('click','input',function(){
$(this).clone(true,true).attr('id','add_child' + $('input[type="button"]').length).insertAfter($(this));
});​
JS Fiddle demo.
References:
attr().
clone().
insertAfter().
on().
[attribute="value"] selector.

there are a number of issues with you code.
first of all; you binding is not live so any new elements you add will not get the same functionality.
Secondly you're creating multiple elements with the same id... a BIG no no!
Thirdly since your'e using an ID selector it will stop looking avter it finds the firs one, but i do have a hunch that it WOULD work if you changed your binding to $().live("click", function(){})

Related

Select the custom tag from button attribute

I have created a button element structure like below
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
>
Now, whenever the DOM gets ready I'm trying to find out the custom element and trying to replace with string. But I'm not able to replace the custom element.
The snippets I have used to find is as below
jQuery("mycustomtag").each(function(){
//process here
});
PS this works fine in the following case:
<div><mycustomtag data-id=20></div>
<h4><mycustomtag data-id=18></h4>
your code
jQuery("mycustomtag")
will try to find tag named mycustomtag, and what i understand is you are trying to replace the input attributes right ?
try following
//if you want to get values
var value = $("#btnCustom").attr("value");
var title = $("#btnCustom").attr("title");
alert(value);
alert(title);
//if you want to set values
$("#btnCustom").attr("value","replacevalue");
$("#btnCustom").attr("title","replace value 2");
value = $("#btnCustom").attr("value");
title = $("#btnCustom").attr("title");
alert(value);
alert(title);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
id="btnCustom"
>
You couldn't find them since the value of an attribute is considered just like a string.
To find those elements you need to select them based on the main tag by selecting the specific attribute using .prop(), like :
$('input').each(function() {
$(this).val();
$(this).prop('title');
});
PS this works fine in the following case
That because in this case it's considered as a tag element in your DOM that why jQuery can find it by a simple selector.
$('input').each(function() {
console.log($(this).val());
console.log($(this).prop('title'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn btn-primary" name="redirect" value="<mycustomtag data-id=15>" title="<mycustomtag data-id=14>">
In your first HTML code what you're looking for is in the value or title attribute. In your second it's the element name.
To select an element based on its value, use the following syntax:
$("input[value='<mycustomtag data-id=15>'")
To select an element based on its title works similarly.
If you put your custom tag in an attribute of another tag it won't be rendered in the page, in other words it won't be part of the document DOM tree, it will be just a string in an attribute, that's why when you use jQuery("mycustomtag") you don't get anything, but it will work if you put it as a child of a div or a span.
So in your specific case you will need to use .attr() method to get it from this specific attribute or .val() method if it's in the value.
jQuery("input").attr("title");
jQuery("input").val();
Demo:
console.log(jQuery("input").attr("title"));
console.log(jQuery("input").val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
>

jQuery - Appending images after input field based on value

Firstly here's the fiddle
I'm trying to append an image after input field, the input field can be selected based on value.
HTML Code:
<input type="checkbox" value="example"> Example
JS Code:
$('input[value="example"]').append("<img src='https://www.google.co.in/images/nav_logo195.png'");
Any help would be appreciated
You should use .after(), instead of .append(). The .append() method inserts the new element as the last child of the element it is called on, whereas .after() inserts the new element after the element it is called on.
$('input[value="example"]').after("<img src='https://www.google.co.in/images/nav_logo195.png'/>");
You were also missing the following characters at the end of your string: />
Html:
<div id="id">
<input type="checkbox" value="bigstock">Big store
</div>
js:
html="<img src='https://www.google.co.in/images/nav_logo195.png'>";
$('#id').append(html).trigger("create");
The jsfiddle link for reference:
http://jsfiddle.net/san_here/y6r78mgy/
Hope, it will usefull.

AngularJS / jQuery "parent()" selects different element in FF than in Chrome and Safari, why?

I've found a bizarre quirk in AngularJS/Firefox where the selectors use grab different elements. I've put it in a Plunker to demonstrate it's effect:
http://plnkr.co/edit/H7stCpQE59i0aUlQ865j?p=preview
Open it in Chrome and click the button. You're actually selecting a hidden <input> element, then Angular passes it's event/parent along, grabs the parent <button> and adds the class .active to it, like so:
$scope.selectTag = function($event){
var elem = angular.element($event.srcElement).parent();
if(elem.hasClass('active')){
elem.removeClass( "active" );
}else{
elem.addClass('active');
}
}
In Firefox, though, it selects the <input> element and adds .active to that rather than the <button> that is its parent.
Any ideas on why this is happening?
No need for using jQuery. Just use ng-class. Following requires zero code in controller to accomplish what your code will end up doing. Also controllers shouldn't have any DOM manipulation code in them
<label class="btn btn-default" ng-class="{active:btn_active}" >
<input class="" ng-click="btn_active=!btn_active" type="checkbox" />
Button Text
</label>
Learn to look for angular approaches first before using jQuery methodology!
DEMO
As in the comment by Arun P Johny, use $event.target rather than srcElement. But, you shouldn't be manipulating the DOM like that when using Angular JS. Instead, you could do this with ng-class.
<label class="btn btn-default" ng-class="foo">
<input class="" ng-click="foo=(foo==='active') ? '' : 'active'" type="checkbox" />
Button Text
</label>

How to remove the attribute "disabled" from input siblings when i click on a submit input

i have this problem: i need to remove the "disabled" attibute from the siblings inputs of submit input. Here is the html:
<td>
<input type="hidden" value="2000000000002_STATUTO_07_10_2010.gif" name="nomeDocumento" disabled="true">
<input type="hidden" value="811ecdd0-65e9-49d6-8d9d-8b7c9d9b6407" name="UUID" disabled="true">
<input type="submit" value="cancella" name="cancella">
</td>
i need a simple way using jquery to remove the disable attribute when i click on the submit.
I tried:
$('input[name=cancella]').click(function(){
$('this').prev().removeAttr('disabled');
$('this').prev().prev().removeAttr('disabled');
}
But i doesn't work.
Any suggestion?
$('input[name=cancella]').click(function(){
$(this)
.closest('td')
.find('input[name!='+this.name+']')
.attr('disabled', false);
});
Fabrizio Calderan .prevAll() way is better.
However, .siblings() could be even better, so it doesn't matter where the siblings are.
$('input[name=cancella]').click(function(){
$(this).siblings('input').attr('disabled', false);
});
Using .attr('disabled', false) should work as well and could be more reliable.
Ciao,
have you tried .prevAll() ?
$('input[name=cancella]').click(function(){
$(this).prevAll().removeAttr('disabled');
}
http://api.jquery.com/prevAll/
Note: this is an object, not a string literal (you wrote 'this')
Simply remove quotes around this i.e.
$('input[name=cancella]').click(function(){
$(this).prev().removeAttr('disabled');
$(this).prev().prev().removeAttr('disabled');
}
this is your object not value for attribute [name/id]
You can use the .siblings() traversing method:
$('input[name=cancella]').siblings().removeAttr('disabled');
Have a look at this link JQuery Sibling
Try this:
$('input[name=cancella]').click(function(){
$(this).siblings().removeAttr('disabled');
}

Have multiple buttons with same attributes (class, type, value, etc) that can "point out" their parent DIV when called?

I'm having some trouble figuring this out. I want to make it so I can place a button in a number of different DIVs but have all the info for the button be the same (class, type, value, etc), this is because its an edit button for the DIV so its just something that is automatically included with any new DIV that is created and my server-side app will generate these buttons automatically. So the issue is how to get the ID of the parent DIV, and I am having some trouble with this as it seems to always default to DIV upd1 even when I click the button contained within upd2, I've been searching on this but everything I have found so far hasn't led me out of this issue.
<div id="upd1">
<input id= "button" class="button" type="submit" value="Click to edit this Panel" />
</div>
<div id="upd2">
<input id= "button" class="button" type="submit" value="Click to edit this Panel" />
</div>
then I have:
$("#button").click(function() {
dividediting = $("#button").closest("div[id^='upd']").attr("id");
alert(dividediting);
});
Try this:
$(".button").click(function() {
var dividediting = $(this).parent().attr('id');
alert(dividediting);
});
You cannot have two items with the same id - you have to be using a class not the same id on each button.
You need a .class selector for your buttons instead, like this:
$(".button").click(function() {
dividediting = $(this).closest("div[id^='upd']").attr("id");
alert(dividediting);
});
#button is an #ID selector that searches for an id="button" instead of a class="button" like you want. Also you want $(this) inside the handler, so you're getting the closest <div> of the clicked element, not the first matched .button element.
first of all, why are you using $("#button") i didn't see any id="button" in your DOM, secondly, you can use this
var dividediting = $(".button").parent().attr("id");
alert(dividediting);

Categories

Resources