This question already has answers here:
How to remove the selected element during a clone() operation
(2 answers)
Closed 8 years ago.
I have this js code to add (clone) and delete an element.
$('#btnAdd1').click(function (event) {
var num = $('.linguas').length;
var newNum = new Number(num + 1);
var newElem = $('#input_' + num).clone(false).prop('id', 'input_' + newNum);
newElem.children(':text').val('');
$('#input_' + num).after(newElem).find('#input_' + num +'> option:selected').removeAttr("selected");
$('#btnDel1').prop('disabled', '');
if (newNum == 4) $('#btnAdd1').prop('disabled', 'disabled');
});
However, i want to remove the select="select" attribute, cloned from previous element.
I am trying something like this, but didn't work:
$('#input_' + num).after(newElem).find('#input_' + num +'> option:selected').removeAttr("selected");
demo here
thanks
Try this alone:
$('option:selected', newElem).prop("selected", false);
Your code:
$('#input_' + num).after(newElem).find('#input_' + num +'> option:selected').removeAttr("selected");
put the cloned select after the original, but then you searched for selected options using find on your original select. find searches children. The cloned select is now a sibling of the original not a child.
Related
This question already has answers here:
How can I remove a child node in HTML using JavaScript?
(9 answers)
Closed 8 years ago.
Um trying to remove an HTML element by JQuery as follows
$('#' + divId + ' .settings_class').remove('.print_settings');
This does not throw an error or remove the html element.
but the selector correctly retrieves the element.
$('#' + divId + ' .settings_class .print_settings');
How to remove an element inside a div by its class as follows?
$('#' + divId + ' .settings_class').find('.print_settings').remove();
If $('#' + divId + ' .settings_class .print_settings'); retriving correct element then use remove() on it! like
$('#' + divId + ' .settings_class .print_settings').remove();
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I need your help. I have this fiddle , as you can see, clone the original div with new name and with the text selected, and now I want to validate that created selects, if their selected option is "select" alert the user and focus in that select,
I think in something like this, check the divs that name start with "newDiv" and selects inside with text equal to "Select"
$('button#validate').live('click', function() {
var wrong = $('div[name^="newDiv"] select option').filter(':selected').text();
if ( wrong == "Select" )
{
alert("Please select an option");
$(this).focus();
$(this).css("background-color","red");
}
});
I hope you understand what I mean to say, thanks.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/2Lgumtp8/3/
Various fixes:
Then new divs had no id, so I changed the filter to use ids.
I iterate all matching selected values. if one is wrong, abort there.
I remove highlight of all selects prior to check.
I focus the the closest parent select of the wrong option
I highlight the closest parent select of the wrong option
$(document).ready(function () {
var counter = 2;
$("input#clone").click(function () {
//Let's make a copy to work with
var originalDiv = $("div#old");
var cloneDiv = originalDiv.clone();
//Renaming cloneDiv
cloneDiv.attr('id', 'newDiv' + counter);
//Renaming inputs in cloneDiv
$("[name='id']", cloneDiv).attr('name', 'id' + counter);
$("[name='email']", cloneDiv).attr('name', 'email' + counter);
$("[name='emails']", cloneDiv).attr('name', 'emails' + counter);
//Value first textfield
$("[name='id" + counter + "']", cloneDiv).val(+counter);
//Value Select
$("[name='email" + counter + "']", cloneDiv).val($("[name='email'] option:selected", originalDiv).val());
$("[name='emails" + counter + "']", cloneDiv).val($("[name='emails'] option:selected", originalDiv).val());
//Append to originalDiv container whatever it is...
originalDiv.parent().append(cloneDiv);
//OR Append to body after old div
//$('.old:last').after(cloneDiv);
//Increment counter
counter++;
});
$("input#remove").click(function (e) {
if (counter > 2) {
$('#newDiv' + (counter - 1)).remove();
counter--;
}
});
$('#validate').click(function () {
$('div[id^="newDiv"] select').css("background-color", "");
$('div[id^="newDiv"] select option').filter(':selected').each(function () {
var select = $(this);
if (select.text() == "Select") {
alert("Please select an option");
select.closest('select').focus().css("background-color", "red");
return false;
}
});
});
});
This question already has answers here:
jquery click event not firing on dynamically created div
(3 answers)
Closed 8 years ago.
I created a button tag inside my javascript
value = '<button id="structure_' + arrayCodStructure[j] + '" class="ui_btn" >' + arrayCodStructure[j] + ' </button><br></br>';
and then appended to an existing div this way:
$("#listContent").append(value);
My purpose is to get button's id when I click on the specific and tried the below code with no luck.
$("#listContent.ui_btn").bind("click".function() {
var id = $(this).Attr('id');
alert("id: " + id);
}
Any solution?
selector on #listContent works but it is not what I need.
Try to use event-delegation at this context and the selector that you have used is also wrong,
$("#listContent").on('click',".ui_btn" ,function() {
var id = this.id;
alert("id: " + id);
}
the issue: I have an appending json data to html table
here's how:
In a Loop->
var image = document.createElement('img');
image.src = data.data[i].picture.data.url;
var td=document.createElement('td');
var input=document.createElement('input');
input.setAttribute('type', 'checkbox');
input.setAttribute('onclick', 'testCheckBox()');
input.setAttribute('id','testid' + i)
td.setAttribute('onclick','tdClick()')
td.setAttribute('title',data.data[i].name );
td.setAttribute('id',''+ i );
td.appendChild(input);
td.appendChild(image);
tr.appendChild(td) ;
mytable.appendChild(tr);
}
$('#maincontent').append(mytable);
After that I got the data I need in attributes,
now I want to understand how can I get the TD= ID , and any other kind of attributes after that kind of click or another, from each td... that is different
Edit:
Function fixed to this :
function testCheckBox()
{
$(':checkbox').change(function(){
var i = $(this).closest('input').attr('id');
var id = $(this).closest('td').attr('id');
var fbname = $(this).closest('td').attr('title');
console.log(id + ' : ' + this.checked);
console.log(fbname + ' : ' + this.checked);
console.log(i + ' : ' + this.checked);
friend_name[i]=fbname;
friend_id[i]=id;
});
}
console.log(friend_name);
Working just GREAT!
the new Issue is that.. if I uncheck this checkbox.. I dont know how to remove it from Array!
and another Q: can I make 1 Array and not 2 Like here? that the 'I' will have 2 Elements Inside?
You are not javascripting the right question, i mean, you ask for the .html() and not the ID value.
HTML()
Get the HTML contents of the first element in the set of matched
elements or set the HTML contents of every matched element.
Try this :
console.log($(this).attr('id'));
attr()
Get the value of an attribute for the first element in the set of
matched elements or set one or more attributes for every matched
element.
Hi I am trying to get this JavaScript work for me.
Can any one help me with this.
When user clicks the Check box the next text box should disable,
if unchecked then enable.
selectors are working fine when I debug scrip in IE9 developer tool.
function is running fine as needed.
<input id="RefillNeeded10" name="RefillasNeeded" type="checkbox" value="true">
<input type="text" size="5" id="RefillTB10," name="Refills">
$('input[type="checkbox"][name^="RefillasNeeded"]').click(function () {
var num = $(this).attr('id').replace("RefillNeeded", "");
if ($('input[type="checkbox"][id="RefillNeeded' + num + '"]').attr("checked")) {
$('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", true);
}
else {
$('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", false);
}
});
but $('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", true);
this is not creating the attribute disable.
I have this listed here for convenience.
Your selector isn't matching any elements. It looks like you have a typo in your HTML - there is a trailing , in the id of the text box. Remove the comma from your id attribute, and it should work. http://jsfiddle.net/gilly3/KJVCa/13/
By the way, you don't need that big long selector to get the checkbox and test if it is checked. You already have a reference to it as this. And you can just check its checked property:
if (this.checked)
While we're at it, why not really simplify things. You don't need to parse the id, just get the next element (assuming your textbox always follows your checkbox). You don't need an if, just use the boolean directly. Your code can be shrunk down to just this:
$("input[type=checkbox][name^=RefillasNeeded]").click(function () {
$(this).next().attr("disabled", this.checked);
});
See it here: http://jsfiddle.net/gilly3/KJVCa/15/
Also for the javascript I had to change
$('input[type="checkbox"][id="RefillNeeded' + num + '"]').attr("checked")
To
$('input[type="checkbox"][id="RefillNeeded' + num + '"]').is(":checked")
to get it to work.
Change
$('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", "disabled");
and
$('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", "");
to
$('input[type="text"]["#RefillTB' + num + '"]').attr("disabled", "disabled");
and
$('input[type="text"]["#RefillTB' + num + '"]').removeAttr("disabled");
respectively.