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>;

Select all checkbox only works visually

i created a table and a checkbox for each column of this table in a sidebar to show or hide that column and also a select all checkbox.
problem is all checkboxes work fine , but select all checkbox works only visually ,it checks all the checkboxes but it doesn't show or hide all the columns as it should.
this is checkbox code :
$(document).ready(function() {
$("input:checkbox:not(:checked)").each(function() {
var column = "table ." + $(this).attr("name");
$(column).hide();
});
$("input:checkbox").click(function() {
var column = "table ." + $(this).attr("name");
$(column).toggle();
});
});
and select all checkbox code :
$('#select-all').on('change', function (e) {
var $inputs = $('#checkboxlist input[type=checkbox]');
if (e.originalEvent === undefined) {
var allChecked = true;
$inputs.each(function () {
allChecked = allChecked && this.checked;
});
this.checked = allChecked;
} else {
$inputs.prop('checked', this.checked);
}
});

1st: Up to Difference between change and click event of checkbox you need to replace your click event by a change event
$("input:checkbox").change(function() {
var column = "table ." + $(this).attr("name");
$(column).toggle();
});
2nd: Up to trigger the change event you'll need to use .change() or .trigger('change').
$inputs.prop('checked', this.checked).change();

$("input:checkbox").on('change',function() {
This should work fine...

Selecting and Deselecting the value in text box on Click Event

Hi Friends i have multiple text box in my form there i didn't done any code in on click for deselecting, the thing is that some how chrome fulfill my need (in Chrome when i click again on same selected text box the Cursor is placed exactly where i clicked again) but when moving to other browser it's not happening(in IE and FireFox able to select and not able to deselecting). Any one who gone through this, suggest me some code to do deselecting.
Plz help me with this,
Here is my code and JSFiddle
HTML
<input Value="sdfsdfsdf">
<input Value="8545555">
<input Value="Billa">
JQ
$(document).on("click", "input:text", null, function (ev) {
alert("hi");
$(this).select();
return this;
});
Thanks in Advance...

Instead off on click event try with on focus:
$(document).on("focus", "input:text", null, function (ev) {
$(this).select();
});

Try this-
var selected = false;
$(document).on("click", "input:text", null, function (ev) {
if (!selected) {
$(this).select();
selected = true;
} else {
selected = false;
this.selectionStart = this.selectionEnd;//clearing the selection
}
return this;
});
DEMO
UPDATE-
If you want the cursor position unchanged after selection & deselection
$("input:text").data("selectionStart", 0);
$("input:text").data("selected", false);
$(document).on("select", "input:text", null, function (ev) {
if (this.selectionStart === this.selectionEnd) {
$(this).data("selectionStart", this.selectionStart);
}
});
$(document).on("click", "input:text", null, function (ev) {
if ($(this).data("selected")==false) {
$(this).select();
$(this).data("selected", true);
} else {
this.selectionEnd = this.selectionStart = $(this).data("selectionStart");
$(this).data("selected", false);
}
return this;
});
DEMO

Click Event UI button jQuery

I am building a simple shopping list. Currently my code will delete an added list item when you click anywhere on the list item itself, I would like it to work where clicking on the UI button next to it will delete the entire item from the list, what I have tried will only delete the UI button itself. Thanks for the help, I am very much a novice
HTML
<div id="list">
<ul class="shopping"></ul>
</div>
jQuery
$(document).ready(function () {
function addItemToList(e) {
var addItem = $('#item').val();
$('.shopping').append('<li>' + '<button class="uibutton"></button>' + addItem + '</li>');
$('.uibutton').button({
icons: {
primary: "ui-icon-heart"
},
text: false
});
$('ul').on('click', 'li', function() {
$(this).remove();
});
$('#item').val('');
}
/*adds list item to list when cart icon is clicked, clears #item input field*/
$('#toadd').click(function (e) {
addItemToList(e);
});
/*adds list item to list when enter key is hit, clears #item input field*/
$('#item').keydown(function (e) {
if (e.which == 13) {
addItemToList(e);
}
});
});

You can make 2 changes like
$(document).ready(function () {
function addItemToList(e) {
var addItem = $('#item').val();
var $li = $('<li>' + '<button class="uibutton"></button>' + addItem + '</li>').appendTo('.shopping');
//target only newly added button
$li.find('.uibutton').button({
icons: {
primary: "ui-icon-heart"
},
text: false
});
$('#item').val('');
}
//use event delegation instead of adding the handler in another event handler...
$('ul.shopping').on('click', '.uibutton', function () {
$(this).closest('li').remove();
});
/*adds list item to list when cart icon is clicked, clears #item input field*/
$('#toadd').click(function (e) {
addItemToList(e);
});
/*adds list item to list when enter key is hit, clears #item input field*/
$('#item').keydown(function (e) {
if (e.which == 13) {
addItemToList(e);
}
});
});
Demo: Fiddle

jquery close to form data in a table on the same page

jsfiddle link
I want above jsfiddle example to have a close button like in the picture at the end of the record and when the close button is clicked I want to remove the record.
Any one can help me to do that?

Just add an element with the X, and an event handler that removes the TR
$(document).ready(function(){
$('#details').on('click', '.remove', function() {
$(this).closest('tr').remove();
})
$('#submit').on('click',function(){
var st = '';
$('#myForm input[type=text],input[type=password],select').each(function(){
st = st+ '<td>'+$(this).val()+'</td>';
$(this).val('');
});
var remove = $('<td />', {text : 'X', 'class': 'remove'});
$('#details').append( $('<tr />').append(st, remove) );
});
});
FIDDLE