We Keep Coding

Why doesn't the hidden container reappear when I click on it?

I have a hidden container that contains comments, and a <div> with a <p> inside that says "Show all comments" that I click to show the comments. When I click the div it shows the hidden comments container perfectly, but when I click it again it doesn't hide the comments container. I am thinking there is something wrong with my jQuery code maybe?
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$( ".see-all" ).click(function() {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
};

When you initialize commentsHidden it is never updated so it always has its initial value. You need to check if its hidden on every click. So you don't need an if statement to attach the event. Just attach a single click event and check inside the event if its hidden and continue accordingly.
$(".see-all").click(function() {
var commentsHidden = $(".comments-container").is(":hidden");
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});

When you call on('click', ..) or its shortcut click(..), you install a new handler. What ends up happening is that you have multiple handlers on the same object, and they all get called. Instead, either install the handler only once:
// In global code or code that gets executed upon module load
// Only once!
$(".see-all").click(function() {
if ($( ".comments-container" ).is( ":hidden" )) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});
or unbind the old handler:
$( ".see-all" ).off('click'); // Unbind all click handlers
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$( ".see-all" ).click(function() {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
};

You need to check the flag state inside the click function(). The way you have it now will only bind the click handler once on page load.
$( ".see-all" ).click(function() {
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});

Try changing to
$( ".see-all" ).click(function() {
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
}
});
The click handler should only be bound once, and you need to check whether comments are hidden each time the p element is clicked.

Set text for table with double click

I have several tables with ajax loaded content. Sometimes I have to change the content of a td manually before exporting it to PDF, so I thought best way would be to create a trigger for each td on double-click using jQuery's .dblclick(). The trigger would open a modal with an input field and change the text of the double-clicked td when submitting the modal.
This works, but when I change the content of a second, third, etc td, each previously clicked td gets the new value too.
Check my fiddle: https://jsfiddle.net/fvoufq07/
My code so far:
$( ".sitename" ).dblclick( function() {
var sitename = $( this );
$( "#msgBox .modal-title" ).html("Change sitename");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">");
$( "#msgBox" ).modal("show");
$( "#msgBox button.btn" ).click( function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
});

It's because you re-use the same button for the modal. So everytime the modal is opened, you add a new listener on the button, but you don't kill the previous one.
You can kill a previous listener with off :
$( ".sitename" ).dblclick( function() {
var sitename = $( this );
$( "#msgBox .modal-title" ).html("Change sitename");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">");
$( "#msgBox" ).modal("show");
$( "#msgBox button.btn" ).off('click').click( function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
});

The problem you're seeing is that the click function you add to the button
$( "#msgBox button.btn" ).click( function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
is not removed. Because of this, every time you open the model anew, you change the text of any previously clicked .sitename as well as the newly clicked one.
In order to avoid this, you should remove the click event, or better yet use jQuery's .one() function which will only fire the callback on the first instance of an trigger event:
$( "#msgBox button.btn" ).one('click', function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
Updated fiddle: https://jsfiddle.net/fvoufq07/6/
Update: The above solution doesn't catch the problem of opening the modal then closing without clicking the "close" save button.
There are a couple of ways to fix this: either use .off() before adding the new .one() callback, or again use .off(), but conditionally upon the modal closing using bootstap's hidden.bs.modal trigger.
$( "#msgBox" ).one('hidden.bs.modal', function() {
$( "#msgBox button.btn" ).off('click');
});
You might also want to assign the 'click' listener to a variable so that you can remove that listener specifically, which will be useful if you have other 'click' listeners on the same element.
var updateText = $( "#msgBox button.btn" ).one('click', function() {
...
});
$( "#msgBox" ).one('hidden.bs.modal', function() {
$( "#msgBox button.btn" ).off('click', updateText);
});
Updated fiddle at https://jsfiddle.net/fvoufq07/7/ has an example.

Try this
var sitename;
$( ".sitename" ).dblclick( function() {
sitename = $(this);
$( "#msgBox .modal-title" ).html("Change sitename ");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">");
$( "#msgBox" ).modal("show");
});
$( "#msgBox button.btn" ).click( function() {
$(sitename).text( $( "#new_sitename" ).val().trim() );
});
here is updated jsfiddle

try this
$( ".sitename" ).dblclick( function() {
sitename = $( this );
$( "#msgBox .modal-title" ).html("Change sitename");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">");
$( "#msgBox" ).modal("show");
$( "#msgBox button.btn" ).click( function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
});
Krupesh Kotecha beat me too it ;)

jquery load() on each() function working all together

i am working around an ajax loading powered website . Here i am trying to load different url on different link but there is a little bit problem i am facing . There is used 4 links and 4 pages to load each page is linked with another but on clicking a link 4 pages are loading .
my html is
<div class="col-md-12">
this is one
hello
hello
hello
<div class="ajaxshow"></div>
</div>
and my javascripts are
(function($){
'use strict';
var ajaxcontent = $('[data-content="ajax"]'),
pathname = window.location.pathname,
url = window.location.href,
ajaxUrl;
ajaxcontent.each( function(index, el) {
$( this ).append('<span class="ajax-live"></span>');
ajaxUrl = $(this).attr('href');
$(this).click(function(event) {
event.preventDefault();
$( '.ajax-live' ).addClass('ajax-live-on');
$( this ).after('<span class="ajax-close animated bounceInRight"></span>');
$('.ajaxshow').append().load(ajaxUrl);
$('.ajaxshow').addClass('animated bounceInUp');
$('.ajaxshow').css('display', 'block');
});
$(document.body).on('click', '.ajax-close', function( event ){
event.preventDefault();
$( '.ajax-live' ).removeClass('ajax-live-on');
$( this ).removeClass('ajax-close');
$( '.ajaxshow' ).fadeOut(600).slideUp();
});
});
})(jQuery);
though hete each function is not working it doesnot working.can anyone help?
A working example is here
http://orlandojoes.co.uk/website/ajaxTest.php

The problem is your ajaxUrl variable is within a different closure than the one you assume so by the time it is clicked, it is always the fourth link.
This is because first you do
var ajaxcontent = $('[data-content="ajax"]'),
pathname = window.location.pathname,
url = window.location.href,
ajaxUrl;
Here, ajaxUrl is global to the 'each' closure. In order to fix this problem, remove the ajaxUrl declaration from outside the 'each' scope, and define it within
var ajaxcontent = $('[data-content="ajax"]'),
pathname = window.location.pathname,
url = window.location.href;
ajaxcontent.each( function(index, el) {
$( this ).append('<span class="ajax-live"></span>');
var ajaxUrl = $(this).attr('href');
$(this).click(function(event) {
.
.
.
Also change
$('.ajaxshow').append().load(ajaxUrl);
to
$('.ajaxshow').load(ajaxUrl);
There is no need for append as load will insert the HTML response within the ajaxshow div

user your code in document ready function like this:
$(document).ready(function () {
var ajaxcontent = $('[data-content="ajax"]'),
pathname = window.location.pathname,
url = window.location.href,
ajaxUrl;
ajaxcontent.each( function(index, el) {
$( this ).append('<span class="ajax-live"></span>');
});
$(document).off('click','[data-content="ajax"]');
$(document).on('click','[data-content="ajax"]',function(event) {
var ajaxUrl = $(this).attr('href');
event.preventDefault();
$( '.ajax-live' ).addClass('ajax-live-on');
$( this ).after('<span class="ajax-close animated bounceInRight"></span>');
$('.ajaxshow').append().load(ajaxUrl);
$('.ajaxshow').addClass('animated bounceInUp');
$('.ajaxshow').css('display', 'block');
});
$(document.body).off('click', '.ajax-close');
$(document.body).on('click', '.ajax-close', function( event ){
event.preventDefault();
$( '.ajax-live' ).removeClass('ajax-live-on');
$( this ).removeClass('ajax-close');
$( '.ajaxshow' ).fadeOut(600).slideUp();
});
});
I hope this code will work.

Trigger a custom event Jquery

I'm working in a jQuery plugin and tried to trigger a custom event after insert a jQuery Dom Element in body.. but the events never occurs..
Is this possible without user interact?
My code is:
var $div = $( '<div />' ), $container = $div.clone();
$container.text( 'test' ).appendTo( 'body' );
$.event.trigger( 'ContainerInit', [ $container ]);
$( document ).on( 'ContainerInit', function( e, $elementContainer ) {
alert( 'test here!' );
});

$(document).ready(function() {
var $div = $('<div />'),
$container = $div.clone();
$container.text('test').appendTo('body');
// you should provide a selector to the handler!
$(document).on('ContainerInit', 'div', function(e, $elementContainer) {
// console.log is better than alert
console.log('test here!');
});
// trigger event only after assigning handler using correct way to trigger!
$container.trigger('ContainerInit', [$container]);
});
check here

How to load a url and check the event of clicking of link?

I am trying to load a url then check for a particular text of anchor and now I want to set an event of clicking of that anchar tag.How can I do it?So far my code:
$.get(y, function(data) {
console.log(data);
$(data).find('a').each(function() {
console.log($(this).text());
if($(this).text().indexOf("Full Text as PDF")>=0)
{
alert($(this).text());}
});
P.S: I am trying to do this in a chrome Extension.
UPDATED CODE:
chrome.tabs.onActivated.addListener( function(activeInfo){
chrome.tabs.get(activeInfo.tabId, function(tab){
y = tab.url;
$.get(y, function(data) {
console.log(data);
$(data).find('a').each(function() {
console.log($(this).text());
if($(this).text().indexOf("Full Text as PDF")>=0)
{ alert($(this).text());
$(this).on("click", function()
{ console.log("link clicked");
alert("link clicked");
});
}
});
});
});
});

a small implementation is:
$.get(y, function(data) {
$("#mydiv").html(data);
$("#mydiv").find('a').each(function(){
$(this).on("click",function(e){
e.preventDefault();
alert($(this).html());
});
});
});
http://jsfiddle.net/vzg6q/

Assuming that I am understanding correctly what you are asking, you want to bind a click event to all anchor tags with a certain text. If so, then something along these lines should work:
Tested and working. http://jsfiddle.net/rvrF8/8/
$.get( y, function( data )
{
$( data ).find('a').each(function ()
{
var theText = $( this ).text( );
var desiredText = 'abc';
if ( theText == desiredText )
{
$( this ).on('click', function ( )
{
event.preventDefault( );
alert( $( this ).text() );
});
}
});
});

$(this).live('click', function(event){
// do something
});