I have a box with multiple checkboxes. I am selecting checkboxes and with that select I am generating a <span> Value (x) </span> on a different div. Now i want to uncheck the checkbox on click of (x) of that particular checkbox.
Example:
On selecting and deselecting the checkboxes the <span> Value (x) </span> is coming and going. but the inverse is not happening.
.reportbox is the class of the tile(checkbox).
#compareSection is the area where buttons are kept.
Code i am using:
<script type="text/javascript">
$('.reportBox').click(function() {
var selected = $('input[type=checkbox]:checked').map(function(_, el) {
selectedCheckbox = el.id;
var element = "<p class='selectedReport'>"+ $(el).val() + "</p>" + "<span onclick='removeReport(this, selectedCheckbox)' class='badge badge-notify close-badge'>x</span>";
return "<span id='elementPack'>" + element + "</span>";
}).get();
$("#compareSection").html(selected);
})
// this code is for removing the URLs
function removeReport(sender, selectedCheckbox) {
document.getElementById(selectedCheckbox).checked = false;
var div = sender.parentNode;
div.parentNode.removeChild(div);
}
</script>
<script>
$(function() {
$('.reportBox').click(function() {
var selected = $('input[type=checkbox]:checked').map(function(_, el) {
selectedCheckbox = el.id;
var element = '<p class="selectedReport">'+ $(el).val() + '</p>' + '<span data-target-box="'+el.id+'" class="badge badge-notify close-badge">x</span>';
return '<span id="elementPack">' + element + '</span>';
}).get();
$("#compareSection").html(selected);
});
$(document).on('click', 'span[data-target-box]', function(e) {
$('#'+$(this).data('target-box')).prop('checked', false);
$(this).remove();
});
});
</script>
On the line
var element = "<p class='selectedReport'>"+ $(el).val() + "</p>" + "<span onclick='removeReport(this, selectedCheckbox)' class='badge badge-notify close-badge'>x</span>";
You are using selectedCheckbox as a string meaning it will look for the variable when you click it, however the variable was never defined outside the first scope. You probably want to change it to the following:
var element = "<p class='selectedReport'>"+ $(el).val() + "</p>" + "<span onclick='removeReport(this, \'"+selectedCheckbox+"\')' class='badge badge-notify close-badge'>x</span>";
So that it calls removeReport(this, 'id_of_element') with the id as a string which can then be used in document.getElementById().
Related
I have the following code that append elements to the document if the corresponding radio button is checked. This works fine, however I need a way to remove the elements if the radio button is NOT checked.
Here is what I have so far?
// for each radio button
$('input[type=radio]').each(function(){
// if it is checked
if($(this).is(":checked"))
{
var cur = $(this).val();
// append an input text element only if it does not already exist
if(!$('#characterList input:text').is(function(i,e){ return e.value==cur && e.name=='data['+cur+']'; }))
{
$('#characterList').append('<input type="text" name="data[' + $(this).val() + ']" value="' + $(this).val() + '" />');
}
}
else
{
// otherwise remove element if radio button not checked
$('#characterList').remove('<input type="text" name="data[' + $(this).val() + ']" value="' + $(this).val() + '" />');
}
});
});
The .remove(...) does nothing at all. What am I doing wrong here?
remove() doesn't work like that. You have to provide a selector to select the element you wish to remove. This can be done like so:
$('#characterList').remove('input[value="' + $(this).val() + '"]');
Or, alternatively:
$('#characterList').find('input[value="' + $(this).val() + '"]').remove();
Furthermore, instead of using $(this).is(":checked") and $(this).val(), you can simply use:
if ( this.checked )
And:
var cur = this.value;
Hi i m having one page with one textbox named search and one search button. When i'm searching anything for the first time it's showing me the right data but when i'm searching some other things for the next time then the elements which was listed before are also appended below of that new list. Suppose i'm searching state name by k it will give me right list of karnataka, kerala. But if i start to search again by g, it will show me in output as goa,gujrat,karnataka kerala. i tried using refresh option but it still not working. This is my js code
$.each(response.state, function (i, state) {
$('#statelist').append(
'<li>' +
'<a href="#">'
+
+'<b>'+ '<font color="green">'+'<h3>'+ state.Name +'</h3>'+'</font>' +'</b>'+
'</a>' +
'</li>'
);
});
$('li img').width(100);
$('.ui-li-icon li').click(function() {
var index = $(this).index();
text = $(this).text();
// alert('Index is: ' + index + ' and text is ' + text);
});
$("#statelist").listview("refresh");
and this is html
You are using .append() function. It appends whatever you append to the end of the list.
Check this link:
http://api.jquery.com/append/
Try using innerHTML property of the DOM model.
You could add
If(!('#statelist').html() == ""){
$(this).remove();
//execute rest of code that appends state list
}
Then do an else statement and execute your append code without removing()
UPDATE: a better option is to do this-
$.each(response.state, function (i, state) {
$('#statelist').html(
'<li>' +
'<a href="#">'
+
+'<b>'+ '<font color="green">'+'<h3>'+ state.Name +'</h3>'+'</font>' +'</b>'+
'</a>' +
'</li>'
);
});
$('li img').width(100);
$('.ui-li-icon li').click(function() {
var index = $(this).index();
text = $(this).text();
// alert('Index is: ' + index + ' and text is ' + text);
});
i want to append the text box values in the dropdown list when user can change the text box value that time the existing value should be replaced to changed value in the option tag without selected how i can do this
var valuedata
$('.txtbox1').click(function (){
valuedata = $(this).val();
});
$('.txtbox1').focusout(function (){
var data = $(this).val();
if ($('.ddl [value ="' + valuedata + '"]').val() == valuedata) {
alert(valuedata);
$('.ddl').append($("<option value=" + data + " ></option>").html(data).val(data));
}
else {
$(".ddl [value='" + valuedata + "']").val(data);
}
});
Try this :
$('select option:contains("old_text")').text('new_text');
To check for option is appended or not :
$("select option").each(function(i,obj){
if($(obj).text() == "your_text"){
console.log("yes");
}
})
DEMO: http://jsfiddle.net/c2Ry8/
$(document).ready(function() {
$('.txtbox1').focusout(function (){
var data = $(this).val();
$('.ddl').append("<option value=" + data + " >"+data+"</option>");
});
});
There are spaces before [value $(".ddl [value='" + valuedata + "']").val(data); which might be problem. So, remove that space:
$(".ddl[value='" + valuedata + "']").val(data);
Use html instead of append like this:
$('.ddl').html($("<option value=" + data + " ></option>")
I want to delete the last append when i click the back button. but when Im choosing appending again,the last append still there.
this is my codes on appending. its working:
$(req.responseText).find('ItemName').each(function () {
ItemNameArr[ItName] = $(this).text();
ItName++;
})
$(req.responseText).find('ItemQty').each(function () {
ItemQtyArr[ItQty] = $(this).text();
ItQty++;
})
$(req.responseText).find('ItemUnit').each(function () {
ItemUnitArr[ItUn] = $(this).text();
ItUn++;
})
for (var a = 0; a < ItemNameArr.length; a++) {
//$contentDt = $('<p><h6> ' + ItemQtyArr[a] + " " + ItemUnitArr[a] + " " + ItemNameArr[a] + '</h6></p>');
$('#Ingredients').append('<p><h6> ' + ItemQtyArr[a] + " " + ItemUnitArr[a] + " " + ItemNameArr[a] + '</h6></p>')
$('#Ingredients').fieldcontain('refresh')
}
My codes in back button when its click:
$("#btnBack").on('click',function(){
$('#Ingredients').empty()
$('#Ingredients').fieldcontain('refresh')
});
My codes in html when it was append
<div data-role="fieldcontain" id="Ingredients"> <!--Ingridients-->
</div>
});
You can do it using below code.
$('#Ingredients p:last').remove();
Use this Code
$('#Ingredients p:last').remove();
Explanation
# referees for the id selector.
$('#Ingredients p) finds the p tag in the element with id Ingredients.
$('#Ingredients p:last') selects last p tag in the element with id Ingredients.
.remove() function removes it from the page.
Problem is in your back button code (click event)
it will be -
$("html").on('click','#btnBack',function(){
// your code
// for remove last p element within #Ingredients
$('#Ingredients p:last').remove();
});
I cannot figure out for the life of me why this will not work. I am trying to pull the value of a textfield that was created with a loop from a json file.
In this code, at the very bottom I just do a simple click(function() {alert()} just to see if I can pull a value and its returning undefined. But if I remove '#name' and put in 'input' it captures it, but only for the first of several input fields.
Any help is really appreciated
JSON
{
"Controls": [{
"Button":[{ "Name":"Button", "x": "1","y": "2","width": "3","height": "4","Transition":"" }],
"Image":[{"x": "5","y": "6","width": "7","height": "8"}],
"TextField":[{"x": "9","y": "10","width": "11","height": "12","Rows":""}]
}]
}
The Code(there is soome getJSON stuff above this)
//Slide In Attributes Panel Based on Selected Object
$(document).on('click', '#code li', function () {
var index = $('#code li').index(this);
var selected = $(this).text();
switch (selected) {
case selected:
$('#options').hide();
hidePanels();
$('#temp').remove();
$('#objectAttributes').show("slide", 200);
break;
//If it does work show what variable is being used
default:
alert(selected);
break;
}
//Shows Selected LI Index
$('#codeIndex').text("That was div index #" + index);
//Pull list of Attributes for selected Object
$.getJSON('controls.json', function (data) {
//Build Attributes List
var attributeList = '<div id="temp">';
//Target based on selected object
var target = selected;
attributeList += '<div>' + target + '<div>';
$.each(data.Controls[0][target][0], function (kk, vv) {
attributeList += '<div style="float:right">' + kk + ':' + '<input type="text" id='+ kk + '>' + '</input>' + '</div>';
});
attributeList += '</div></div>';
attributeList += '</div>';
$('#objectAttributes').append(attributeList);
$('#temp').append('<div id="editIndex">'+"Modifying index" + " " +index+'</div>');
$(document).on('click', '#saveAttributes', function () {
var $x = $('#name').val();
alert($x);
})
});
});
Ok, so after a little hacking around with a jsfiddle the answer turned out to be a lot simpler than I first thought. Ever since HTML 4.01 class names and IDs have been case sensitive (reference), which means that your selector $('#name') wasn't matching the JSON Name.
So a simple change, such as in this simplified jsfiddle seems to work as desired. Hopefully this helps!