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 - click on a link dynamically generated by AJAX

I read many different posts about this matter but I can't solve my problem.
I am trying to create a simple lightbox on dynamically generated content.
$(document).ready(function() {
$("body").on("click", "button", function() {
$("button").removeClass("selected");
$(this).addClass("selected");
var flickrAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var animal = $(this).text();
var flickrOptions = {
tags : animal,
format: "json"
};
var displayPhotos = function(data) {
var photoHTML = "<ul>";
$.each(data.items, function(i, photo) {
photoHTML += '<li class="grid-25 tablet-grid-50">';
photoHTML += '<a href="' + photo.link + '" class="image">';
photoHTML += '<img src="' + photo.media.m + '" ></a></li>';
});
photoHTML += '</ul>';
$('#photos').html(photoHTML);
}
$.getJSON(flickrAPI, flickrOptions, displayPhotos);
var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");
//An image to overlay
$overlay.append($image);
//A caption to overlay
$overlay.append($caption);
//Add overlay
$("body").append($overlay);
//Capture the click event on a link to an image
$("#photos a").click(function(event){
event.preventDefault();
var imageLocation = $(this).attr("href");
//Update overlay with the image linked in the link
$image.attr("src", imageLocation);
//Show the overlay.
$overlay.show();
//Get child's alt attribute and set caption
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
});
//When overlay is clicked
$overlay.click(function(){
//Hide the overlay
$overlay.hide();
});
});
});
Here is my complete code on jsfiddle
The click event after the AJAX call doesn't fire up.
How can I solve this?

what it's happening its that you are adding the event before the DOM exists, what you should do its wait for the response to actually render all the event and the interface or replace this:
$("#photos a").click(function(event){
});
for
$(document).on("click","#photos a",function(){
});
that way the event its gonna exist always... Its my guess... I'm not sure if $("#photos a") actually get the element you want to attach the event, but you got the idea of how you can add event to DOM elements that still dont exist on the DOM.

JavaScript / jQuery 'back button'

My JS / jQuery skills aren't great - and I'm having trouble with the following:
jQuery(document).ready(function($) {
// if element exists
if ($('.myelement').length > 0) {
// insert html back button
$( '.myelement' ).append( "<button onclick="goBack()">Go Back</button>" );
// back function
function goBack() {
window.history.back()
}
}
)};
I'm trying to achieve the following.
if .myelement HTML class exists
then insert back button html
Appreciate the help.

There are multiple syntax problems in your script...
Apart from that the method GoBack() is declared in a closure scope, so in the onclick="" attribute handler it won't be available
jQuery(function ($) {
var $el = $('.element');
if ($el.length) {
//create button
$('<button />', {
text: 'Go Back',
click: function () {
window.history.back();
}
}).appendTo($el); //append to .element
}
});

try this...
jQuery(document).ready(function($) {
if ($('.myelement').length > 0) {
$( '.myelement' ).append( '<button onclick="goBack()">Go Back</button>' );
}
});
var goBack=function() { window.history.back() }

Try this:
jQuery(document).ready(function($) {
// if element exists
var container = $('.myelement');
if (container.length > 0) {
// insert html back button
var backButton = $('<button></button>').text('Go Back').appendTo(container);
backButton.on('click', function(){
window.history.back()
});
}
)};

Syntax error with some JS/jquery code regarding });

I'm getting an error on some JS code for a content window I'm trying to create. I'm getting told that }); shouldn't be where it is, but I can't understand what the problem is. Am I using terms from an outdated jquery?
jQuery(document).ready(function($) {
$('.contentwindow_trigger').click(function(e) {
e.preventDefault();
var image_href = $(this).attr("href");
if ($('#contentwindow').length > 0) {
$('#content').html('<img src="' + image_href + '" />');
$('#contentwindow').show();
}
else {
var contentwindow =
'<div id="contentwindow">' +
'<p>Click to close</p>' +
'<section id="content">' +
'<img src="#" />' +
'</section>' +
'</div>';
$('body').append(contentwindow);
}
}); //HERE
$('#contentwindow').on('click', function() {
$('#contentwindow').hide();
});
});
The fault is where it says HERE, any help would be appreciated.
Thanks!

Use this sript:
jQuery(document).ready(function() {
$('.contentwindow_trigger').click(function(e) {
e.preventDefault();
var image_href = $(this).attr("href");
if ($('#contentwindow').length > 0) {
$('#content').html('<img src="' + image_href + '" />');
$('#contentwindow').show();
}
else {
var contentwindow =
'<div id="contentwindow">' +
'<p>Click to close</p>' +
'<section id="content">' +
'<img src="#" />' +
'</section>' +
'</div>';
$('body').append(contentwindow);
}
}); //HERE
$('#contentwindow').on('click', function() {
$('#contentwindow').hide();
});
});

remove the $ from this line your code
function($) {
to
function() {
/
jQuery(document).ready(function() {
$('.contentwindow_trigger').click(function(e) {
// Click event code
});
$('#contentwindow').on('click', function() {
$('#contentwindow').hide();
});
});
One more change required which does not affect the Syntax error in the page is that I see that you are dynamically adding an element and associating a click event to it .
You need to delegate the event for such case and the Event might not work
$('body').on('click','#contentwindow' , function() {
$('#contentwindow').hide();
});

Not sure what the syntax error you're seeing is, but it seems to work fine in this jsfiddle:
http://jsfiddle.net/xV58c/
One change I made there that may help you. Instead of:
$('#contentwindow').on('click', function() {
$('#contentwindow').hide();
});
I did:
$('body').on('click', '#contentwindow', function() {
$('#contentwindow').hide();
});
which uses the "on" method in a way that allows the containing element ("body" in this case) to deal with events on elements below, even elements generated that way that #contentwindow is.
Hope this helps.

jQuery not behaving as expected in reference to clicks

I have an element that I grab the content of and swap for an input, I then want to user to be able to click on the input (to enter text as normal), but if they click anywhere else to swap it back to the text.
However the click event seems to fire even the very first time the user clicks anywhere on the page. My code is below, have I misunderstood something?
$(document).ready(function(){
$("#thingy").css('cursor', 'pointer');
$("#thingy").one("click", function() {
var element = $(this);
element.css('cursor', 'auto');
element.css('display', 'inline-block');
element.fadeOut(100, function(){element.html('<input type="text" size="25" value="' + element.text() + '" style="width:' + element.width() + 'px;height:' + element.height() + 'px;border:none;padding:0px;margin:0px;">')}).fadeIn(100);
$("#thingy").click(function() {
return false;
});
$(document).click(function() {
alert("You clicked off the text-box");
element.html(element.children('input:text').val());
});
});
});

The reason it alerts even the first time is the first click handler (the .one() doesn't itself return false; or .stopPropgaton(), like this:
$(document).ready(function(){
$("#thingy").css('cursor', 'pointer');
$("#thingy").one("click", function() {
var element = $(this);
element.css('cursor', 'auto');
element.css('display', 'inline-block');
element.fadeOut(100, function(){element.html('<input type="text" size="25" value="' + element.text() + '" style="width:' + element.width() + 'px;height:' + element.height() + 'px;border:none;padding:0px;margin:0px;">')}).fadeIn(100);
$("#thingy").click(function() {
return false;
});
$(document).click(function() {
alert("You clicked off the text-box");
element.html(element.children('input:text').val());
});
return false;
});
}); ​
You can test it out here.
A better approach would be to use the blur event instead, replacing this:
$("#thingy").click(function() {
return false;
});
$(document).click(function() {
alert("You clicked off the text-box");
element.html(element.children('input:text').val());
});
return false;
With this:
$(element).delegate("input", "blur", function() {
element.html(element.children('input:text').val());
});
You can try that version here.