We Keep Coding

JQuery undo append

I've got a table with a button inside a td, once I press the button it adds text to the td. I want to remove this text inside the td once i press the button again. note that this button is used multiple times in the table hence the class attribute.
Which method could I use to get this done?
This is my code:
$(document).on('click', '.releasebutton', function () { // button class="releasebutton"
var label = $(this).text();
if (label == "Add") { // it is "Add" by default
$(this).text("Cancel");
$('.ReleaseTD').append("<br>" + "test"); // td class="ReleaseTD"
}
// the code above this works
else {
$(this).text("Add");
$('.ReleaseTD').remove("<br>" + "test");
// this obviously is wrong but this is where i would like the correct code
};
});

You could create ID for text inside like this:
$(document).on('click', '.releasebutton', function () { // button class="releasebutton"
var label = $(this).text();
if (label == "Add") { // it is "Add" by default
$(this).text("Cancel");
$('.ReleaseTD').append("<span id='textID'><br>" + "test</span>");
}
else {
$(this).text("Add");
$('#textID').remove();
};
});

Please try the following:
$(document).on('click', '.releasebutton', function () { // button class="releasebutton"
var label = $(this).text();
if (label == "Add") { // it is "Add" by default
$(this).text("Cancel");
$('.ReleaseTD').append("<span id='txt_name'><br>" + "test</span>");
}
// the code above this works
else {
$(this).text("Add");
$('#txt_name').remove();
};
});

Two ways:
1) Append your text into a span with a unique ID, and then delete this ID. For example, delete the ID with the largest number. Dumbest way would be to just store the latest ID in a global variable.
var global_last_appended_id = 0;
$(document).on('click', '.releasebutton', function () { // button class="releasebutton"
global_last_appended_id ++;
$('.ReleaseTD').append("<span id='appended-text-" + global_last_appended_id + "'><br>" + "test</span>");
}
// the code above this works
else {
$(this).text("Add");
$('#appended-text-' + global_last_appended_id).remove();
global_last_appended_id--; //go one step back so next time we remove the previous paragraph
};
});
Update: after your edit I've added the ability to undo multiple times. Basically there is unlimited undo.
2) [lame and wrong] Save the previous .html() - the whole HTML code of your element - into a global variable; then restore the previous version of the text from the global variable when necessary.

jQuery .click()/.on("click"...) I need help swapping text on alternate clicks

What I am trying to accomplish is something 'like'
$("button .toggleExcerpt)
.toggle( function FIRST() {
do first function...
} , function SECOND() {
do second function...
But since it's deprecated, I don't know what alternative to use. Ive tried using if/else inside of a .on("click", function()... but didn't seem to work.
jQuery:
var readMore = "<span class='readMore'>read about the solution...</span>";
var readLess = "<span class='readLess'>hide full description...</span>";
//".toggleExcerpt" is an empty <button> in the HTML
$(".toggleExcerpt").append(readMore);
$(".toggleExcerpt")
.on("click", function (event) {
$(this).contents(".readMore")
.replaceWith(readLess);
console.log("readMore ran");
})
.on("click", function (event) {
$(this).contents(".readLess")
.replaceWith(readMore);
console.log("readLess ran");
})
Both of the click events are logging to the console, so I know that the first event is running, and then is quickly replaced by the second event, but I would love to make these (or simply the text inside the span) to alternate....
I've already looked at this suggestion, but I am not sure how to implement it in my example, nor if this particular jQuery implementation is what I need.

To check the class is exists or not , you have to use .hasClass() . if class found,use .remove() to remove that element and .append() to add another.
For example, You can try this code :
var readMore = "<span class='readMore'>read about the solution...</span>";
var readLess = "<span class='readLess'>hide full description...</span>";
//".toggleExcerpt" is an empty <button> in the HTML
$(".toggleExcerpt").append(readMore);
$(".toggleExcerpt")
.on("click", function (event) {
if($(this).find('span').hasClass('readmore') === true){
$(this).find('span.readmore').remove();
$(this).append(readLess);
}else{
$(this).find('span.readLess').remove();
$(this).append(readMore);
}
})

Check this snippet:
var readMore = "read about the solution...";
var readLess = "hide full description...";
var excerptState = true;
//".toggleExcerpt" is an empty <button> in the HTML
$(".toogleExcerpt").html(readMore);
$(".toogleExcerpt").click(function () {
$(this).html( excerptState ? readLess : readMore );
// invert state
excerptState = !excerptState
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toogleExcerpt"></button>

Why not try letting a boolean swap back and forth for you?
Here's your snippet:
$(document).ready(function() {
var readMore = "<span class='readMore'>read about the solution...</span>";
var readLess = "<span class='readLess'>hide full description...</span>";
var more = true;
//".toggleExcerpt" is an empty <button> in the HTML
$("#toggleExcerpt").append(readMore);
$("#toggleExcerpt")
.on("click", function(event) {
if (more) {
$(this).contents(".readMore")
.replaceWith(readLess);
console.log("readMore ran");
more = false;
} else {
$(this).contents(".readLess")
.replaceWith(readMore);
console.log("readLess ran");
more = true;
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="toggleExcerpt"></button>

I think I created a solution for you.
Just use a flag var that increments by 1, and check if it is odd or even and depending on if it is odd or even it will alternate the text for you onclick:
var readMore = "<span class='readMore'>read about the solution...</span>";
var readLess = "<span class='readLess'>hide full description...</span>";
//".toggleExcerpt" is an empty <button> in the HTML
var flag = 0;
$(".toggleExcerpt").append(readMore);
$(".toggleExcerpt")
.on("click", function(event) {
if (flag % 2 == 0) {
$(this).contents(".readMore")
.replaceWith(readLess);
console.log("readMore ran");
} else {
$(this).contents(".readLess")
.replaceWith(readMore);
console.log("readLess ran");
}
flag++;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggleExcerpt" style="width:300px">

Why is this javascript not working - select box if

I have this code on my site. The idea is to hide a specific class when a specific select box value is selected.
This is my code
$(document).ready(function(){
var txt = 'Marketing';
$("div.ginput_container select#input_3_1 option").each(function(){
if($(this).val()==txt){
$('.mar').hide();
}
});
});
The result I'm getting is .mar class being hidden as soon as the page is loaded. I can't see the error, I have also tryied with
var num = 1
but I have the same issue.

$(document).ready(function() {
var txt = 'Marketing';
$("#input_3_1").change(function () {
if ( this.value == txt ) $('.mar').hide();
});
});
Here's the fiddle: http://jsfiddle.net/9Cyxh/
If you want to show $('.mar') when a different option is selected, use toggle instead:
$('.mar').toggle( this.value != txt );
Here's the fiddle: http://jsfiddle.net/9Cyxh/1/
If you want this to also run on page load (before an option is manually selected), trigger the change event:
$(document).ready(function() {
var txt = 'Marketing';
$("#input_3_1").change(function () {
$('.mar').toggle( this.value != txt );
}).change();
});​
Here's the fiddle: http://jsfiddle.net/9Cyxh/2/

You don't need the loop in the first place
Attach your select to the change() event handler and that should be it..
$(document).ready(function(){
$("select#input_3_1").on('change', function() {
var txt = 'Marketing';
if(this.value === txt){
$('.mar').hide();
};
}).change()
});

If you only want to hide ".mar" class when the value is changed and it equals "Marketing" try
$("#input_3_1").change( function() {
if( $(this).val().toUpperCase() === "MARKETING" ) {
$(".mar").hide();
}
});
Demo here

$("#input_3_1").change(function(){
if ($("#input_3_1").val()=='Marketing'){
$(".mar").hide();
}
});

Checkbox div double the label?

I don't know why when a checkbox is clicked, it double the label text associated. Could anyone help me?
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.child').attr('checked', this.checked);
$('.ck,.chkbox,.checkAll ,input:radio').DcustomInput();
});
jQuery.fn.DcustomInput = function(){
$(this).each(function(i){
if($(this).is('[type=checkbox],[type=radio]')){
var input = $(this);
var id=input.attr('id');
// get the associated label using the input's id
var forlabel = $('label[for='+input.attr('id')+']');
var chklabel = forlabel.text();
forlabel.hide();
var label = $("<label for='"+id+"' class='checker'>"+chklabel+"</label>");
//get type, for classname suffix
var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';
// alert(label);
// wrap the input + label in a div
$('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input, label);
// find all inputs in this set using the shared name attribute
if(input.is(':disabled')){
if(inputType == 'checkbox' && input.is(':checked')){
label.addClass(' checkedDisabled ');
} else{
label.addClass(' disabled ');
}
}
// necessary for browsers that don't support the :hover pseudo class on labels
label.hover(
function(){
if(!input.is(':disabled') ){
$(this).addClass('hover');
}
if(inputType == 'checkbox' && input.is(':checked') && !input.is(':disabled')){
$(this).addClass('checkedHover');
}
},
function(){ $(this).removeClass('hover checkedHover focus'); }
);
//bind custom event, trigger it, bind click,focus,blur events
input.bind('updateState', function(){
if (input.is(':checked') && !input.is(':disabled')) {
if (input.is(':radio')) {
var allInputs = $('input[name='+input.attr('name')+']');
allInputs.each(function(){
$('label[for='+$(this).attr('id')+']').removeClass('checked');
});
};
label.addClass('checked ');
}
else { label.removeClass('checked checkedHover checkedFocus '); }
})
.trigger('updateState')
.click(function(){
$(this).trigger('updateState');
})
.focus(function(){
label.addClass('focus');
if(inputType == 'checkbox' && input.is(':checked')){
$(this).addClass('checkedFocus');
}
})
.blur(function(){ label.removeClass('focus checkedFocus'); });
}
});
};
</script>

I'm not really aware of what DcustomInput does but I could guess that $('.ck,.chkbox,.checkAll ,input:radio').DcustomInput(); need to be placed on document ready and not on click handler

ok, I've found the solution, just comment these 2 lines:
forlabel.hide();
$('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input, label);
so that the old label is not hidden and we don't try to duplicate the input and the old label.

How to check/uncheck checkboxes by clicking a hyperlink?

I have 11 checkboxes with individual ids inside a modal popup.I want to have a hyperlink called SelectAll,by clicking on which every checkbox got checked.I want this to be done by javascript/jquery.
Please show me how to call the function

You could attach to the click event of the anchor with an id selectall and then set the checked attribute of all checkboxes inside the modal:
$(function() {
$('a#selectall').click(function() {
$('#somecontainerdiv input:checkbox').attr('checked', 'checked');
return false;
});
});

You can do like this in jquery:
$(function(){
$('#link_id').click(function(){
$('input[type="checkbox"]').attr('checked', 'checked');
return false;
});
});
If you have more than one form, you can specify form id like this:
$(function(){
$('#link_id').click(function(){
$('#form_id input[type="checkbox"]').attr('checked', 'checked');
return false;
});
});

This should work, clicking on the element (typically an input, but if you want to use a link remember to also add 'return false;' to prevent the page reloading/moving) with the id of 'selectAllInputsButton' should apply the 'selected="selected"' attribute to all inputs (refine as necessary) with a class name of 'modalCheckboxes'.
This is un-tested, writing on my phone away from my desk, but I think it's functional, if not pretty.
$(document).ready(
function(){
$('#selectAllInputsButton').click(
function(){
$('input.modalCheckboxes').attr('selected','selected');
}
);
}
);

$(function(){
$('#link_id').click(function(e){
e.preventDefault(); // unbind default click event
$('#modalPopup').find(':checkbox').click(); // trigger click event on each checkbox
});
});

function CheckUncheck(obj) {
var pnlPrivacySettings = document.getElementById('pnlPrivacySettings');
var items = pnlPrivacySettings.getElementsByTagName('input');
var btnObj = document.getElementById('hdnCheckUncheck');
if (btnObj.value == '0') {
for (i = 0; i < items.length; i++) {
if (items[i].type == "checkbox") {
if (!items[i].checked) {
items[i].checked = true;
}
}
}
btnObj.value = "1";
}
else {
for (i = 0; i < items.length; i++) {
if (items[i].type == "checkbox") {
if (items[i].checked) {
items[i].checked = false;
}
}
}
btnObj.value = "0";
}
}