We Keep Coding

Using .after but only if the value does not exist

I am running this code to insert a HTML line after the id #wp_menu:
$(document).on('closing', '.remodal', function (e) {
$('.menu_name').each(function() {
$('#wp_menu').after('<div class="tag">' + $(this).val() + '</div>');
});
});
The problem is, every time I run this loop, I'll get duplicated values and this is not what I want. How can I check if the code was inserted before?
This is a simple example that may explain my problem: https://jsfiddle.net/vLqonqpk/
So when you click on "add" multiple times, it will add the same values over and over again.

You could do something like this:
arr = [];
$('button').click(function() {
$('ul input').each(function() {
if ($.inArray($(this).val(), arr) == -1) {
$('#wp_menu').after('<div class="tag">' + $(this).val() + '</div>');
arr.push($(this).val());
}
});
console.log(arr);
});
DEMO: https://jsfiddle.net/vLqonqpk/1/
So, create array of values, check if current val(s) from inputs are duplicated, and place just unique values. Of course, you can add additional checks for empty string, and give user some alerts/warnings (create else block for that purpose), if needed, etc, etc...
But this is basic idea which should work.

Simply isolate the jQuery selector and check its existence.
$(document).on('closing', '.remodal', function (e) {
$('.menu_name').each(function() {
var $wp_menu = $('#wp_menu');
var $tag = $wp_menu.next('.tag'); // .siblings() also works
// Now you check if it exists, and create it if not
if (!$tag.length)
$tag = $('<div class="tag">').insertAfter($wp_menu);
// Simply update the content, element will always exist
$tag.text($(this).val()); // .html() also works
});
});
I'm sure there's several ways to do it, this is just one of them.
I now realize your problem is not duplicating tags, but values. Basically you want a HashSet. Please accept sinisake's answer instead

How to show JavaScript variable in colorbox

I use colorbox jquery and have problem to show variable in colorbox.
I have variable called wp_store_caption that get value from input type :-
<input type="text" id="title" class="ab_form_text wp_store_caption require" name="wp_store_caption" value="">
Now i use colorbox like :-
jQuery(document).ready(function() {
var wp_store_caption = jQuery('#title').val();
jQuery(".open-popup-link").colorbox({html:"<h1>"+wp_store_caption+"</h1>"});
});
But canot show value of wp_store_caption, But when use alert() without colorbox, I can see the value.
Where is problem ?!

It is not happening because when you write
jQuery(".open-popup-link").colorbox({html:"<h1>"+wp_store_caption+"</h1>"})
you bind the value of wp_store_caption, which is initially not defined.
You need to bind click event and assign value to wp_store_caption, and then call colorbox function.
You should write this:
$(".open-popup-link").click(function () {
$.colorbox({
html: "<h1>" + $('#title').val() + "</h1>"
});
});
See DEMO here.
In this example, I have predefined value of title. Please note this value will not update the heading in colorbox because the value of -wp_store_caption is not being updated.

You can bind to .blur() to get it work as here.
$(function() {
$('#title').blur(function(){
var wp_store_caption = $('#title').val();
if (wp_store_caption.length > 0)
$.colorbox({html:"<p>" + wp_store_caption + "</p>"})
});
});

Append input box with JQuery

I was trying to add text into field with id #shouttext, but i need to trim value from onclick event which is just after (' and also delete ') symbols.
So if i have
<img src="images/smilies/at.png" alt="" title="" class="smilie smilie_9 smilie_pointer" onclick="MyBBEditor.insertText(':at:');">
I want to get
:at:
and add it to input with #shouttext id. Below is my code, which doesn't work - and i think its blocked by defined onclick value, which i was trying to remove.
<script type="text/javascript">
$( document ).ready(function() {
$('.smilie').click(function()
{
var s1,s1;
s1=attr("onclick");
s1=s1.replace('MyBBEditor.insertText(\'', '');
s2=s1.replace('\')', '');
$('.smilie').attr('onclick','').unbind('click')
$('#shouttext').val($('#shouttext').val()+s2);
})
});
</script>
Thanks for any help in advance!

you could try also:
var str = $(".smilie").attr("onclick").split("'")[1];
to get the :at: try it here: fiddle
now you can use it here:
$('.smilie').unbind("click");
$('.smilie').click(function() {
var str = $(".smilie").attr("onclick").split("'")[1];
$('#shouttext').val($('#shouttext').val() + "" + str);
});
or how #eg_dac says, you can override the click event with $.on()

instead of unbinding it in the click, you can do
$(".smilie").attr("onclick", ""); // clear the already declared attribute.
$(".smilie").on("click", function(){
$('#shouttext').val($('#shouttext').val()+s2);
});
Example found here http://jsfiddle.net/meougz1L/
$("img").attr("onclick","");
$("img").on("click", function(){
alert("click event overridden");
});

Set data to Label's text in javascript function

I set a javascript function to click event of LinkButton and want to set Label's text in this function,function call and pass data to it but after that when i want to read text of that Label from code behind,text is ""
//javascript function
function PopUpFunction(code) {
$("#<%= lblStatus.ClientID %>").text = code;
}
//set function to click event
lnk.Attributes.Add("onclick", "PopUpFunction(10);");
//Edit
I test Label (lblStatus) when i click on link button that call javascript's function,the text of label change but in code behind doesn't show this text (for example if text of label is 5 after i set new text in javascript's function again in code behind text is 5 although actual text is 10)

Instead of Label use HiddenField and change javascript's function like below
function PopUpFunction(code) {
$("#<%= lblStatus.ClientID %>").val(code);
return false;
}

It works for me. please check it out.
Code Behind: little modification
` lnk.Attributes.Add("onclick", "return PopUpFunction('10');");
Javascript code
`<script type="text/javascript">
function PopUpFunction(code) {
$("#lblStatus").text(code);
$("#lblStatus").show();
return false;
}
</script>

PopUpFunction(10) function is taking 10 as an integer datataype so your calling function does not get anything.Convert it or pass it as a string then you will get correct output

try this val() instead of text
$("#<%= lblStatus.ClientID %>").Val(code) ;
or ,Change text() instead of text
$("#<%= lblStatus.ClientID %>").text()=code

try something like this:
document.getElementById('The Control ID').InnerHTML = 'YourText';
example: Label1
document.getElementById('Label1').InnerHTML = 'Hello World!';

lnk.onclick = function(){
PopUpFunction('Some_Text');
});

try the following
function PopUpFunction(code) {
$("#<%= lblStatus.ClientID %>").val(code);
}
while getting it's value use this
string str=Request.Form(lblStatus.UniqueID);

passing a parameter with onclick function is read as a variable when it should be read as a string

Here is my issue:
I am creating dynamically a button with an onclick function like this:
$("#test).html('<input type="button" value="Close" onclick="remove('+param1+','+param2+');" />');
The parameters are well read but the function is not trigger, and I've got this error message:
"bob is not defined" when bob is the string value of the param1.
Apparently it seems that bob is read as a variable when it should be read as a string, but I don't understand why.
Thanks much for your help!

That's because this string right here:
'onclick="remove('+param1+','+param2+');"'
Will look like this in the end:
'onclick="remove(foo, bar);"'
You probably want it to look like this:
'onclick="remove(\'foo\', \'bar\');"'
So change it to this:
'onclick="remove(\''+param1+'\', \''+param2+'\');"'
You could also do this:
$("#test").html('<input type="button" value="Close" />').find('input[type=button]').click(function () {
remove(param1, param2);
});
Edit: I also noticed that you were missing one " from your $()-call: $("#test) should be $("#test").

I can suggest you this
<script type="text/javascript">
//<![CDATA[
var i = 0;
$(function () {
$("#lnkAdder").click(function () {
// appending new item
$("#Container").append(
$("<a>").attr({ "href": "javascript:;" }).text("Click me").click(function () {
var data = ++i;
alert("I'm clicked, I'm number " + data);
})
);
});
});
//]]>
</script>
Add item
<div id="Container"></div>
The key here is the javascript closure.
As you can see there a link called lnkAdder. It is responsible to add anew item into the container. On click it appends a new item into the container. While appending you use jQuery API and create a new element, add attributes and add event listener. In the event listener body you copy the value into an internal variable. They use it as appropriate.