We Keep Coding

Show onclick popupbox to specific id

Like the one i have highlighted in picture popup box appear in every chatbox i want it to appear only on selected chatbox
<script>
$(document).ready(function(){
function make_chat_dialog_box(to_user_id, to_user_name)
{
var modal_content = '<div id=user_dialog>..</div>';
$('#user_model_details').append(modal_content);
$(document).on("click", '.chat_message', function(e){
e.preventDefault();
var to_user_id = $(this).data('touserid');
$('.popupbox').css("display", "block");
})
}
});
</script>

Add id to your tag. and show popupbox only for that selected element.
Suppose you have textarea as a selector then your code should be.
<textarea class="popupbox" id="popupbox_ + to_user_id" ></textarea>
and in JS code
<script>
$(document).ready(function() {
function make_chat_dialog_box(to_user_id, to_user_name) {
var modal_content = "<div id=user_dialog>..</div>";
$("#user_model_details").append(modal_content);
}
$(document).on("click", ".chat_message", function(e) {
e.preventDefault();
var to_user_id = $(this).data("touserid");
console.log(to_user_id); /** Make sure it is correct */
$("#popupbox_"+to_user_id).css("display", "block");
});
});
</script>;

jQuery want to override function on button click

I already have a jQuery .on() function in which click event is passed on a button.
I want to restrict user from clicking button more than 1 but i don't want to alter current function instead write new function
$('button').on('click', function() {
alert('hi');
});
$('button').click(function(event) {
var count = 0;
count = count + 1;
if (count > 1) {
event.preventDefault();
console.log('dont call alert');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Click Me !</button>

I think you are looking for something like following.
$('button').on('click', function () {
alert('hi');
});
var isCliked = true;
$('button').click(function () {
$('button').off('click');
isCliked && $('button').click(function() {
console.log('dont call alert');
isCliked = false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Click Me !
</button>

JQuery off() method remove event handler of element. You can remove click event of button when it clicked. Using this work, button click event fired only once.
$("button").click(function(event){
alert();
$(this).off("click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Button</button>

You can use jQuery .one() method:
$('button').one('click', function() {
alert('hi');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Click Me !</button>

Editable select

Here is my HTML code:
<div class="editable-select-holder">
<input type="text" name="position" id="position" value="${userInfoForm.position}">
<button type="button" class="editable-select-expander"></button>
<ul class="editable-select-options">
<c:forEach var="position" items="${positions}">
<li>${position.description}</li>
</c:forEach>
</ul>
</div>
and this is Jquery:
$(document).on('click', '.editable-select-expander', function () {
var $holder = $(this).parent();
$holder.toggleClass('editable-select-expanded');
$holder.on('click', 'li', function () {
var $t = $(this);
$holder.removeClass('editable-select-expanded');
$holder.find('input').val($t.text());
});
});
I want to exand list when I click on button or focus on input. The code I have provided above only works on button click. I need the same logic also on focus event. Any suggestions?
changed like this but still not working properly.
$(document).on("click",'.editable-select-holder', function() {
var $holder = $(this);
$holder.on('click','.editable-select-expander', function() {
$holder.toggleClass('editable-select-expanded');
});
$holder.on('click', 'li', function() {
var $t = $(this);
$holder.removeClass('editable-select-expanded');
$holder.find('input').val($t.text());
});
$holder.on('focus', 'input', function() {
$holder.addClass('editable-select-expanded');
});
});

I hope you can use this code
$( your input box id or class ).focusin(function() {
//your logic here
});

How to append the checkbox with the children div of a main div

I want to append a checkbox with each children.
For that I used
var len = $("#personalDetails").children("div").length;
for(var id=0; id<len;id++)
{
var el = $('<input type="checkbox"/>');
$("#personalDetails").children(":first").attr("id",id);
alert(id);
$( "#"+id).append(el);
}
html
<div id="personalDetails">
<div>personal</div>
<div>Education</div>
</div>
By doing this I got a problem. All checkboxes are coming under one div. How can I set one for one div and other for other div?
[Note: We can not put any id or class for children div]
http://jsfiddle.net/QTzrB/

you can
$(document).ready(function(){
$('#personalDetails > div').each(function(idx, el){
$('<input type="checkbox"/>').attr("id", idx).appendTo(el);
})
$('#personalDetails').on('click', 'input[type="checkbox"]', function(){
alert(this.id);
});
});
Demo: Fiddle

Try This
$(document).ready(function(){
var len = $("#personalDetails").children("div").length;
$("#personalDetails div").each(function(idx) {
$(this).append("<input type='checkbox' id="+ idx +" />");
});
$("input[type=checkbox]" ).on("click",function(){
alert($(this).attr("id"));
});
});
Fiddle Demo

You should cache the div list. Also if you don't want to put ids to the input elements then you can cache them also.
Below code is working on Fiddle.
$(document).ready(function(){
var divs = $("#personalDetails").children("div");
var len = divs.length;
for(var id = 0; id < len; id++) {
var el = $('<input type="checkbox"/>');
divs.eq(id).append(el);
}
});

replace your script with this one,hope this will do what you want.
$(document).ready(function(){
$('#personalDetails').children('div').each(function(){
$(this).append('<input type="checkbox"/>');
});
});
fiddle

$(document).ready(function(){
$("#personalDetails").children("div").each(function(index, obj) {
var $chk = $("<input/>",{"type":"checkbox"});
$(this).prepend($chk.attr("id",index));
$chk.on("click",function(){
alert(this.id);
});
});
});
Working demo here:
http://jsfiddle.net/HNezs/

Why isn't my checkbox change event triggered?

I have two functions.
The first function translates a div click into a checked/unchecked toggle.
The second function translates a checkbox change into a hide/show event.
The problem is that when I use the first function to check/uncheck the box, the second function is not called. I am new to javascript, thanks.
<script type="text/javascript">
$(document).ready(function() {
$(":checkbox").parent().click(function(evt) {
if (evt.target.type !== 'checkbox') {
var $checkbox = $(":checkbox", this);
$checkbox.attr('checked', !$checkbox.attr('checked'));
evt.stopPropagation();
return false;
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(":checkbox").change(function() {
if($(this).attr("checked")) {
$('.'+this.id).show();
}
else {
$('.'+this.id).hide();
}
});
});
</script>

The change event does not fire when you programmatically change the value of a check box. What you can do to ensure it fires is:
$(":checkbox").parent().click(function(evt) {
if (evt.target.type !== 'checkbox') {
var $checkbox = $(":checkbox", this);
$checkbox.attr('checked', !$checkbox.attr('checked'));
$checkbox.change();
}
});

Don't bother with the first snippet. Just use LABEL elements:
<label><input type="checkbox">Some option</label>
Now, when the user clicks the label (the text next to the checkbox), the checkbox will be activated.
The second snippet can be optimized:
$('input:checkbox').change(function() {
$('#' + this.id).toggle(this.checked);
});

you are using '.' which is for class selectors instead use '#' since you are using the element ID. Like this:
$(document).ready(function() {
$(":checkbox").bind('change', function() {
if($(this).attr("checked")) {
$('#'+this.id).show();
}
else {
$('#'+this.id).hide();
}
});
});