Develop Reference

Keep appending link value to an input box

I'd like to know how to append link values to an input box. But I can't figure out how to append a new link value to the old one, separated by a space [Fiddle].
<input id="a_input_id" type="text">
<a href="" class="special_field_link">#ABC<a>
<a href="" class="special_field_link">#DEF<a>
<script>
$(function(){
$('.special_field_link').live('click', function()
{
$('#a_input_id').val($(this).html() + '');
return false;
});
});
Should I use something like:
var cur_val = $('#a_input_id').val($(this).html() + '');
if(cur_val)
$('#a_input_id').val(cur_val + "," + new_val);
else
$('#a_input_id').val(new_val);
Your help would be appreciate.

You can use like this,
$('.special_field_link').click(function (e) {
e.preventDefault();
$('#a_input_id').val($('#a_input_id').val()+" "+$(this).html());
});
Use event.preventDefault() to prevent the default click event of anchor. In each click you need to get the current input value, if you want to retain those. In your code, it was overwriting the old with the new values.
Fiddle

If you want to append the value, you could do:
var input = $('#a_input_id');
input.val(input.val() + $(this).html());
And note .live is deprecated, you'd better use .on instead if you switch to a new version of jQuery.
THE DEMO.

You could go with:
http://fiddle.jshell.net/s8nUh/149/
$(function()
{
$('.special_field_link').live('click', function()
{
var original = $('#a_input_id').val();
var val = original + ',' + $(this).html();
val = val.replace(/(^,)|(,$)/g, "");
$('#a_input_id').val(val);
return false;
});
});

$(function(){
$('.special_field_link').live('click', function()
{
$('#a_input_id').val($('#a_input_id').val() + $(this).html() + '');
return false;
});
});
To use best practices, its better to cache jquery object for anchor and also avoid using return false.
$(function(){
var txt$ = $('#a_input_id');
$('.special_field_link').live('click', function()
{
txt$.val(txt$.val() + $(this).html());
event.preventDefault();
});
});

Attempting to loop and print an element in jQuery

I am attempting to loop through a dynamic element and then print it with jquery,
Heres the code i use
$('.recipe-steps #addNewStep').on('click', function () {
var s = $('.recipe-steps .step').size() + 1;
$('<div class="step pure-u-1-1"><textarea id="step" name="step_detail[]" class="pure-u-1" placeholder="Step ' + s + '"></textarea>×</div>').appendTo($('.recipe-steps .steps'));
return false;
});
$(document).on('click', '.step .remove', function () {
$(this).parents('.step').remove();
return false;
});
however its only printing out the first element and not the preceding ones. I have created a fiddle can anyone see why?
http://jsfiddle.net/drk8X/

I wasn't able to come up with the perfect solution (will have a look later) but I have redesigned the function to work to an extent.
$("body").on('input propertychange', function () {
var outputme="";
$('textarea').each(function (index) {
outputme+='<br>'+(index+1) + '. ' + $(this).val();
});
$('#lp-step').html('<h3>Method</h3>'+outputme);
});
This will update the "preview" on change of the text area, use CSS Selectors to narrow down the scope, but id reccomend you looking at your HTML and try and simplify it a bit more.
http://jsfiddle.net/drk8X/2/

Jquery on click event not working

I cant find why my code isn't working. When I click on the generated element the alert is not firing.
Here is a fiddle : http://jsfiddle.net/pZAdP/
And the code
<button id="addMenuItem">Add Menu Item</button>
<div id="content"></div>
function addMenuItem(){
var span = document.createElement("span");
span.setAttribute("id", "menu_" + inc);
span.innerHTML = " #menu_" + inc++ + " |";
var content = document.getElementById("content");
content.appendChild(span);
}
$("#addMenuItem").click(function(){
addMenuItem();
})
$("#menu_1").on("click", function(){
alert(this.id);
})

You need to change
$("#menu_1").on("click", function(){
alert(this.id);
})
with :
$("#content").on("click", "#menu_1", function(){
alert(this.id);
})
Working FIDDLE

You need to use event delegation for dynamically generated elements
You can use attribute starts with selector for all dynamically generated menu_
$("#content").on("click", "[id^='menu_']", function(){
alert(this.id);
})
Fiddle DEMO

You're using jQuery, so do it the easy way, add the event handler when you create the element, that way you don't have to worry about the incrementing ID in the selector either when you create more than one element
var inc = 1;
function addMenuItem(){
$('<span />', {
id : 'menu_' + inc,
html : '#menu_' + (inc++) + ' |',
on : {
click : function() {
alert(this.id);
}
}
}).appendTo('#content');
}
$("#addMenuItem").click(function(){
addMenuItem();
});
FIDDLE

http://jsfiddle.net/pZAdP/4/
Put your onclick for the menu inside the addMenuItem() function.
function addMenuItem(){
var span = document.createElement("span");
span.setAttribute("id", "menu_" + inc);
span.innerHTML = " #menu_" + inc++ + " |";
var content = document.getElementById("content");
content.appendChild(span);
$("#menu_1").on("click", function(){
alert(this.id);})}
Remember you are selecting by Id. If you were selecting by class then putting the on click handler outside the method will work.

You need to use the .on with event delegation
Syntax
$(parent-selector).on(event,target-selector,callback);
Note: The parent-selector must be parent element which is present in the DOM while binding the event, generally people use document and body, but for the performance you must have the nearest parent possible to the target
Example
$(document).on("click",".button",function(){
alert("Button Clicked");
});

Try this:
it will work for all dynamic span with id like menu_*:
var inc = 1;
function addMenuItem(){
var span = document.createElement("span");
span.setAttribute("id", "menu_" + inc);
span.innerHTML = " #menu_" + inc++ + " |";
var content = document.getElementById("content");
content.appendChild(span);
}
$("#addMenuItem").click(function(){
addMenuItem();
})
$(document).on("click", "[id^='menu_']", function(){
alert(this.id);
})

the element is not on the page when you select it,
do select generated elements:
$(document).on("click","#menu_1", function(){
alert(this.id);
})

How to append some extra text in the div tag

I am trying to take the label text of the checkbox which are checked and I trying to append in the span tag,
When user click the the ok button in the popUp
Here it is not working. Here is my jsfiddle
My script is:
$('.modal-footer .preSuccess').click(function(){
var parentElement=$(this).parent().parent().attr('id');
$('#'+parentElement+ '.modal-body input[type="checkbox"]').each(function(){
var pre =$(this).next('label').text();
if($(this).is(':checked')){
$('.'+parentElement+'Pre').append('<span>'+pre+'</span>');
}
});
});

Try
$('.modal-footer .preSuccess').click(function () {
var modal = $(this).closest('.modal');
var parentElement = modal.attr('id'); // issue here, use closest to get a parent matching the selector
//again issue with the selector
modal.find('.modal-body input[type="checkbox"]').each(function () {
var pre = $(this).next('label').text();
if ($(this).is(':checked')) {
$('.' + parentElement + 'Pre').append('<span>' + pre + '</span>');
}
});
});
Demo: Fiddle

I took a look at your code and you're missing a space when querying the checkbox:
$('#'+parentElement+ ' .modal-body input[type="checkbox"]')
It wasn't able to find your checkbox and couldn't find the texts.
Other than that I would advice against the .parent().parent() structure, cause it's very prone to future bugs. Maybe just call the id directly, but I'm not sure how you're using this code.

How to select element which is not 'this'?

I have list of divs all with the same class, I want to apply a function to all of them which are not the clicked one (this), how can i select !this with jQuery?
UPDATE:
I've made this and it is not working, any ideas why?
$("li").each(function(){
$("li").not(this).click(function(e) {
$(this).hide();
});
});
UPDATE 2: this is the whole actual code:
$(".mark").click(function(e) {
e.preventDefault();
var id = "#" + $(this).parent().parent().parent().parent().attr("id") + " ";
var currentStatus = "deleted"; // to be replaced with actual status
var currentStatusClass = "." + currentStatus + "-heading";
$(id + currentStatusClass).show();
$(id + ".edit-headings").click(function(){
$(this).find(".headings-status").show().addClass("bg-hover");
$(id + ".headings-status").click(function() {
$(id + ".headings-status").not(this).hide();
});
});
});

Have a look at jQuerys not function: http://api.jquery.com/not/
$('div').not(this).doSomething();
Regarding your update, try:
$("li").click(function(e) {
$("li").not(this).hide();
});

Use the .not() function:
$('.yourclass').click(function() {
$('.yourclass').not(this).yourFunc();
});

use $('div').not(this) to select other than clicked one.

using :not() or .not()
$this;
function myFunction(){
// stuff here // and use $this for element reference
}
$('yourElement:not(.selected)').on('click',function(){
// (make sure to add '.selected' to the new one and toggle existant)
$('.selected').removeClass('selected');
$this = $(this);
$this.addClass('selected');
myFunction();
});

this is wrong:
var newStatus = $(this).className().replace("contribution-", "");
className is not a function.
Instead of above line you can try this:
var cls = $(this).attr('class').replace('contribution-','');
$(this).removeClass().addClass(cls);