We Keep Coding

"Add to Favorite / Remove" - Ajax not working

I want to create a "Add to favorite" & "Remove from favorite".
When I add the favorite, I change the ID of the DIV for remove.
I can successfully add to favorite but I can't undo.
This code for add
$('#addToFavoriteButton').click(function (event) {
var ItemID = $('#addToFavoriteButton').data('itemid');
event.preventDefault();
$.post('/system/ajax.php', {
AddFavID: ItemID
}, function (response) {
document['getElementById']('addToFavorite').id = 'RemoveFavoriteButton';
});
});
This code for remove
$('#RemoveFavoriteButton').click(function (event) {
var ItemID = $('#RemoveFavoriteButton').data('itemid');
event.preventDefault();
$.post('/system/ajax.php', {
RemoveFavbidID: ItemID
}, function (response) {
document['getElementById']('RemoveFavoriteButton').id = 'addToFavoriteButton';
});
});
Where am I wrong?

The main problem with your code is that you are assigning an event handler to a button and then changing the ID of that button, expecting it to trigger different code when it is clicked. That is wrong.
If you change the ID of an element it will still trigger the event handler that you originally assigned to it. See this example...
$("#button1").on("click", function() {
alert("you clicked button 1 - my id is " + this.id);
});
$("#button2").on("click", function() {
alert("you clicked button 2");
});
// change the ID of #button1 to #button2
$("#button1").attr("id", "button2");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button1">button 1</button><br/>
<button id="button2">button 2</button><br/>
What makes more sense is to have a button to add a favourite, and a button to remove a favourite. You just hide the remove button until add is clicked, and vice-versa.
Like this...
var $add = $("#addFavourite");
var $remove = $("#removeFavourite");
$add.on("click", function() {
$add.hide();
$remove.show();
var itemId = $add.data("item-id");
alert("adding item " + itemId);
// do your AJAX stuff to add the favourite here
});
$remove.on("click", function() {
$add.show();
$remove.hide();
var itemId = $add.data("item-id");
alert("removing item " + itemId);
// do your AJAX stuff to remove the favourite here
});
#removeFavourite {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="addFavourite" data-item-id="123">add favourite</button>
<button id="removeFavourite" data-item-id="123">remove favourite</button>

I Suggested that you change the class instead of the id, since the id must be unique.
Or you can always use HTML5 data attribute, which you can use for both CSS styling (using attribute selector) and JS use (with dataset or jQuery's .data () method). see
Example:
HTML
<div id="el" data-test="data"></div>
vanilla javascript
var el = document.getElementById('el');
el.dataset.test // 'data'
by the way how you get the id is wrong -
document['getElementById']('RemoveFavoriteButton').id
You must use
vanilla javascript
document.getElementById('RemoveFavoriteButton').id;
jQuery
$('#RemoveFavoriteButton')attr('id');

Append values to a textbox while clicking button

I'm trying to make a calculator using jquery. But i don't know how to append values to the textbox when clicking each calulator buttons. I had tried with the following code.
$(document).ready(function () {
$("input[type=button]").on({
click: function () {
var nn = $(this).val();
$("#text-box-id").val(nn);
}
})
});
Please help me to solve this scenario.

Concate your value with textbox value to avoid replace.
$("input[type=button]").on({
click: function () {
var nn = $(this).val().toString();
var txtval=$("#text-box-id").val().toString();
$("#text-box-id").val(txtval + nn);
}
})

I am not sure I understand exactly but I think what I understand is that you want to just add more numbers rather than override?
$(document).ready(function () {
$("input[type=button]").on({
click: function () {
var nn = $(this).val();
$('#text-box-id').val($('#itext-box-id').val() + nn);
}
})
});

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: trying to hide and show on hover on multiple divs with same id plus number

Trying to get a div that looks like <a id="thumblink-10"> to show and hide another div on hover, but no luck.
jQuery(document).ready(function() {
jQuery(document).find("a[id^='thumblink-']").live('hover', function(){
var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + num).show();
}, function(){
//var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + this.num).hide();
});
});
Thanks

This should work for you:
jQuery("a[id^='thumblink-']").live('hover', function(){
var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + num).toggle();
});
Fixed the initial selector to not use find, only need to supply and single function for the hover and use the toggle function to show/hide the content.
http://jsfiddle.net/Zy2Ny/
But the way I would actually do it is to add data attributes to your links (can then change the selector to a class one instead) and use those to find the correct div to toggle like this:
JS
jQuery("a.thumblink").live('hover', function(){
var num = $(this).data('contentid');
jQuery('#thumb-hover-' + num).toggle();
});
HTML
<a class="thumblink" data-contentid="10">Hover</a>
<div id="thumb-hover-10" style="display: none;">Content</div>
http://jsfiddle.net/Zy2Ny/1/

You can't really do traversal methods like find and then use live. You should just use a standard selection. Also, you can't use live with hover and give two functions.
$("a[id^='thumblink-']").live('hover', function(){ // simple selector
Better still would be to use delegate and a map of events and handlers:
$(document).delegate('a[id^="thumblink-"]', {
mouseenter: function() {
},
mouseleave: function() {
}
});

I haven't been able to test it unfortunately, but I believe the following should work:
var id = 10;
$('#thumblink-' + id).hover(function(id) {
return function () {
$('#thumb-hover-' + id).show();
};
}(id),
function(id) {
return function () {
$('#thumb-hover-' + id).hide();
};
}(id)
);

remove first class with jQuery while cloning

I write a simple function to clone a field:
Online Demo: http://jsfiddle.net/5yVPg/
HTML:
<div id="main">
<a id="add-input" href="#">+ add</a>
<p class="child">
<input type="text" name="user[]" />
delete
</p>
</div>
JS:
$(document).ready(function () {
$('#add-input').click(function () {
var newField = $('.child').clone()
newField.toggle().attr('class', '')
registerRemoveHandlers(newField, '.icon-delete')
$(this).parent().append(newField)
return false
})
function registerRemoveHandlers(el, class) {
$(el).find(class).click(function () {
$(this).parents('p:first').remove()
return false
})
}
})
I want to remove the delete icon from the first input, I tried :
$('p.child .icon-delete:first').css('display','none')
But the delete icon being not displayed for all input.
PS: If I could optimize the codes above I'll be happy :)

Have a look at this instead:
// Keep a single clone of the original
var clonedField = $('.child').clone(),
main = $('#main');
// Add in the delete <a> to the cloned field
$('<a>', {
text: 'delete',
class: 'icon-delete',
href: '#',
click: function(){
$(this).parent().remove();
return false;
}
}).appendTo(clonedField);
// Clone the cloned original and append it back to the list
$('#add-input').click(function() {
main.append(clonedField.clone());
return false;
});
The code is simpler and easier to understand then what you have there, and should work as you expect it.
See it on jsfiddle: http://jsfiddle.net/5ZFh6/

DEMO: http://aseptik.net/demo/remove-first-class-with-jquery-while-cloning
$(function() {
$('#add-input').click(function() {
$('<p><input type="text" name="user[]" /> ' +
'delete</p>').appendTo('#main');
});
// just for sake...
$('.icon-delete').live('click',
function() {
$(this).parent().fadeOut(500,
function() {
$(this).remove();
});
});
});
gotchas:
why you are cloning?
why you are placing the delete button in the first place?

i think this will do the trick.......$('p.child .icon-delete:first').css('display','none') is hiding all .icon-delete which is child of p.child. and in your case all p.child is a child of .icon-delete
$('p.child:first .icon-delete').css('display','none')

$('#add-input').bind('click',function ()
{
var newField = $('.child').clone();
newField.toggle().attr('class', '');
registerRemoveHandlers(newField, '.icon-delete');
$('p.child:last').after(newField); //append after not cloned child
newField.parent().children('p').find('a').show(); //show all 'delete' label
newField.prev().find('a').hide(); //hide label from the first child which is right the one before our clone
return false;
});
http://jsfiddle.net/K7F5K/