We Keep Coding

How to update the value of data attribute using jquery

I have the following bootstrap data toggle markup and I want to change the icon and the text to change on toggle. I can get the text to change but not the icon. What I'm I doing wrong?
<div id="collapseDiv" >
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
</div>
Show More
Jquery code is as follows
$('#collapseDiv').on('shown.bs.collapse', function () {
$('.icon-before').data('icon', '&#xf147').text('Show Less');
});
$('#collapseDiv').on('hidden.bs.collapse', function () {
$('.icon-before').data('icon', '&#xf196').text('Show More');
});

Try using attr()
attr('data-icon', '&#xf147')
Also check this excellent answer
EXPLANATION
Check the following example.
If you click on span#one the attribute changes with attr() function, if you click on span#two we will try to change the attribute with data() function.
When you try to select the element with [data-test="false"] only the first element has changes it's data attribute.
Only the element with data-test="false" will get red:
$(document).on('click', 'span', function() {
var that = $(this);
var id = that.attr('id');
if (id == 'one') {
//Try with attr()
that.attr('data-test', 'false');
} else if (id == 'two') {
//Try with data()
that.data('test', 'false');
}
$('[data-test="false"]').css({'color':'red'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="one" data-test="true">one</span>
<span id="two" data-test="true">two</span>

You should update the attribute value, rather than updating data property:
$('#collapseDiv').on('shown.bs.collapse', function () {
$('.icon-before').attr('data-icon', '&#xf147').text('Show Less');
});
$('#collapseDiv').on('hidden.bs.collapse', function () {
$('.icon-before').attr('data-icon', '&#xf196').text('Show More');
});

You should also update class of .ui-icon inside.
var oldIcon = $('.icon-before').data('icon'),
newIcon = '&#xf147';
uiIcon = $('.icon-before').data('icon', newIcon).find('.ui-icon');
uiIcon.removeClass('ui-icon-' + oldIcon).addClass('ui-icon-' + newIcon);

Remove class on radio's that are not checked

So i have this code
<ul id="id_priori">
<li>
<label for="id_priori_0">
<input id="id_priori_0" name="priori" type="radio">Hola
</label>
</li>
</ul>
And this code
$("#id_tipo").on('click', 'li', function () {
var self = $(this),
radio = self.find(":radio")[0];
radio.checked = !radio.checked;
self.toggleClass('on', radio.checked);
})
.find(":radio").each(function () {
$(this).closest('li').toggleClass('on', this.checked);
});
What i want is to unclass all the labels whose radio's arent checked , any idea ?

$(":radio:not(checked)").each(function () {
$(this).closest('li').removeClass('on');
});
Anyway, assuming all radios are connected, and there is always only one checked, the whole code could be simpler:
$("#id_priori").on('click', 'li', function () {
$(this).find(':radio').prop('checked', true);
$(this).addClass('on').siblings().removeClass('on');
});
Take a look at this Fiddle. We can work from this point

Assuming you mean remove all class from each <label> add it in the find:
.find(":radio").each(function () {
if( !this.checked){
$(this).parent('label').removeAttr('class');
}
$(this).closest('li').toggleClass('on', this.checked);
});

if you want to remove class just go with #littleLouito Code
else if you want toggle try this one
$(":radio:not(checked)").each(function () {
$(this).closest('label').toggleClass("on", this.checked);
});

Problems with remove checkbox dynamically.

I have looked all over and found many similar threads, but none of them really answered my question with this specific situation:
I want to, when I create a dynamic Checkbox, and want to remove the specific checkbox and the text by clicking on the trash image. It seems to not work when I want to remove.
Live Demo
HTML:
<input type="text" id="checkBoxName" />
<input type="button" value="ok" id="btnSaveCheckBox" />
Jquery:
$(document).ready(function() {
$('#btnSaveCheckBox').click(function() {
addCheckbox($('#checkBoxName').val());
$('#checkBoxName').val("");
});
});
function addCheckbox(name) {
var container = $('#cblist');
var inputs = container.find('input');
var id = inputs.length+1;
$('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
$('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
$('<img />', { "src": "/Pages/Images/trashDialog.png", "class": "removeCheckBoxDialog"}).appendTo(container);
$('.removeCheckBoxDialog').on('click', function (e) {
$("#cb :checkbox").remove();
});
$('<br/>').appendTo(container);
}
CSS:
.removeCheckBoxDialog {
margin-left:10%;
cursor:pointer;
}

Try below jQuery:
$('#cblist').on('click','.removeCheckBoxDialog', function (e) {
$('#'+$(this).prev().attr('for')).remove();
$(this).next('br').remove().prev().addBack().remove();
$(this).remove();
});
Fiddle
The above wasnt clearing the label so i edited it a bit :
$('#cblist').on('click','.removeCheckBoxDialog', function (e) {
$('#'+$(this).prev().attr('for')).remove();
$(this).next('br').remove();
$(this).prev().remove();
$(this).remove();
});
Fiddle

Add this
$("#cb"+id).remove();
$('label[for=cb'+id+']').hide();
$(this).nextAll('br').remove();
$(this).remove();
to your click function
$('.removeCheckBoxDialog').on('click', function (e) {
$("#cb"+id).remove();
$('label[for=cb'+id+']').remove();
$(this).nextAll('br').remove();
$(this).remove();
});
DEMO

Try this
$("#cb"+id).remove();
$('label[for=cb'+id+']').remove();

Try this. I have done the following:
Appended a div to contain each of the 3 components
I used var container2 = $("div:last-of-type", container); to select this div.
Finally I simply used $(this).parent().remove(); To get the parent and remove it.
And also I removed the <br> as the div does the job of new line by default.

Jquery Cloning and Update Button Icon

I feel like I am overlooking something really simple here. I need another set of eyes. I've spent much more time on this than I should.
Take a look at this fiddle => http://jsfiddle.net/R8SxU/
Why won't the Icon Update after adding more than one year?
I want the top one to always be a plus to symbolize adding a new year, and the remaining ones below to be a minus to remove. It works on the first one, but only the first one. I believe I have the correct selector as the function (console out) is activated correctly with each button.
HTML
<div>
<label for="year-0">Enter Year</label>
<input id="year-0" type="number" title="Enter Year"/>
<button id="addYear" title="Add Year">Year</button>
</div>
Jquery
$('#addYear')
.button({icons: { primary: 'ui-icon-circle-plus' } })
.on('click', function() {
var clone = $('div').first().clone(true),
peroid = $('div').length;
//update ID
$(clone).find('label').prop('for','year-' + peroid);
$(clone).find('input').prop('id','year-' + peroid);
$('div:first button')
.prop('id','')
.attr('title','Remove Year')
.addClass('removeYear');
$(clone).insertBefore('div:first');
$('.removeYear:first')
.off('click')
.button({ icons: { primary: 'ui-icon-circle-minus' } }) // Why Wont This Work
.on('click', function() { console.log('remove function'); });
});

Try the following:
$('#addYear').button({
icons: {
primary: 'ui-icon-circle-plus'
}
}).on('click', function () {
var clone = $(this).parent().clone(),
peroid = $('div').length;
clone.find('label').prop('for', 'year-' + peroid).end()
.find('input').prop('id', 'year-' + peroid).end()
.find('button').prop('id', 'id' + peroid).prop('title', 'Remove Year')
.addClass('removeYear').find('span:first').addClass('ui-icon-circle-minus');
clone.insertAfter('div:last');
});
$(document).on('click', 'div:not(":first") button', function () {
$(this).closest('div').remove();
});
http://jsfiddle.net/Y33GV/

Try this out:-http://jsfiddle.net/adiioo7/R8SxU/4/
var clone = $('div').last().clone(true),
peroid = $('div').length;
instead of
var clone=$('div').first().clone(true),
peroid=$('div').length;

remove input in add new input with jQuery. how is fix it?

how can putting link add after last new input when click on remove no after last input that clicked on remove. how is it?
when you clicked on remove(no last remove) you see that link add append after input. Namely we have tow or several add link after clicked on remove. you in anywhere clicked on remove append link add on input, i want only once append in last new input no in anywhere.
I hope you understand
EXAMPLE: http://jsfiddle.net/zgWr3/12/
$('a.remove_input').live('click', function (event) {
event.preventDefault();
var $class = '.' + $(this).closest('div.find_input').find('div').attr('class');
$(this).closest($class).prev().find('.adda .mediumCell').append('')
$(this).closest($class).remove();
});
With respect

For my HTML I would use something like:
<div id="inputs">
<div id="input_container_0">
<input type="text" name="price" placeholder="hello" />
</div>
</div>
<div>
add
</div>
For my JavaScript I would use something like:
var number_of_inputs = 0;
$(function() {
$(".action-add").click(function() {
number_of_inputs++;
$("#inputs").append('<div id="input_container_'+number_of_inputs.toString()+'"><input type="text" name="price" placeholder="hello" /> remove</div>');
});
$(".action-remove").live('click', function() {
$("#input_container_"+$(this).attr("rel")).remove();
});
});
Hope that helps.
EDIT
Updated, so the remove link is not present for the first text box.

Here. Try this:
$(function () {
$('a.add_input').live('click', function (event) {
var $column = $(this).closest('div.add_units');
// clone the top input row
var newDiv = $($column.find('div.mediumCell').get(0)).clone(true);
// clear field values
newDiv.find('input').val(''); // clear the field
// add Remove link to new row
newDiv.append('remove');
$column.find('div.adda').before(newDiv);
event.preventDefault();
return false;
});
$('a.remove_input').live('click', function (event) {
event.preventDefault();
// find row
$row = $(this).closest('.mediumCell').remove();
});
});