We Keep Coding

How to add event listener using jQuery?

Have this code and tried to hide my side navbar when clicked outside the #nav, got this error.
Cannot read property 'addEventListener' of null
$( document ).ready( function() {
setTimeout(function(){
$('.menu-opener').click(function(){
$('#nav').toggleClass('active');
});
let slide = document.querySelector('#nav .active');
slide.addEventListener('click', function(e) {
if (e.target !== slide) return;
$('#nav').removeClass('active');
});
}, 1000);
});

answer is that you need to detect click outside of div you are trying to hide:
$(window).click(function() {
//Hide the menus if visible
});
//stopping above function from running when clicking on #nav itself
$('#nav').click(function(event){
event.stopPropagation();
});

Try this inside setTimeout
$('body').on('click','#nav .active', function(e){
// your logic
})
OR
$( "'#nav .active'" ).bind( "click", function(e) {
// your logic
});
instead of
let slide = document.querySelector('#nav .active');
slide.addEventListener('click', function(e) {
if (e.target !== slide) return;
$('#nav').removeClass('active');
});

Got this working with
$(document).click(function(event) {
if(!$(event.target).closest('#nav').length && !$(event.target).closest(".menu-opener").length)
{
$('#nav').removeClass('active');
}
});

How to change text to textbox on clicking it

Here is the fiddle for changing the label's value by clicking on it.
But i don't want to do it while i click on the edit (href)
I just want to click on the name and change it to textbox and while i take the mouse outside it should change back to label
How can i do this ?
Here's the jquery code i have
$(document).ready(function() {
$('a.edit').click(function () {
var dad = $(this).parent().parent();
dad.find('label').hide();
dad.find('input[type="text"]').show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
});
});

How about something like this. Demo
$(document).ready(function() {
$('.control-label').click(function () {
$(this).hide();
$(this).siblings('.edit-input').show();
});
$('.edit-input').focusout(function() {
$(this).hide();
$(this).siblings('.control-label').text($(this).val()).show();
});
});

You could try it with this modified version of the fiddle:
$(document).ready(function() {
$('.control-label').click(function () {
$(this).hide();
var dad = $(this).parent();
dad.find('input[type="text"]').show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').text(this.value).show();
});
});
It doesn´t set the default value that was in the label before though.

Just change the target of your click function from:
$('a.edit').click(function () {
to
$('.text-info').click(function () {
You could also add a hover function if you want the input to be hidden on mouseout rather than when clicking outside. For example:
$('input[type=text]').hover(function () {
}, function () {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
});
Here your adjusted fiddle.

jquery if has class issue

I am using bootstrap tabs and I wanted to do some functions with javascript if LI is clicked but with conditional, if it's active do nothing, else do this...
I have come up with this code to check if it has a class="active" since bootstrap tabs adds class="active" to LI for the active tab but it doesn't work well, it always returns true, what I am doing wrong here?
code
var i = $( "li" ).hasClass( "active" );
$( "li" ).click(function() {
if (i == true ) {
console.log("the tab is already active");
}
else {
console.log("selected");
}
});
here is jsfiddle demo

Use $(this) for taken current object
$( "li" ).click(function() {
if ($(this).hasClass("active")) {
console.log("the tab is already active");
}
else {
console.log("selected");
}
});
Fiddle

Check hasClass for clicked li:
$( "li" ).click(function() {
if ($(this).hasClass('active') ) {
console.log("the tab is already active");
}
else {
console.log("selected");
}
});

Because $("li") returns all the li tags. And the initial state of the first li tab is active, so the i variable is always true.
Change the codes to what #Bhojendra Sah wrote will work.

You can try this as well for dynamic elements:
$(document).on('click', "li.active", function (e) {
console.log("the tab is already active");
}).on('click', "li:not(.active)", function (e) {
console.log("selected");
});
Example

$( "li" ).click(function() {
if ($(this).hasClass("active") ) {
console.log("the tab is already active");
}
else {
console.log("selected");
}
});

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

Hide h1 tag if div is empty from javascript's hide function

I need to hide an H1 title if the list is emptied.
basically i am saying. Choose from the select dropdown; if the selected value is shown hide all others. Now I also need to say if list category[h1] title is empty hide that too, otherwise display the h1 title.
http://jsfiddle.net/ajandthensome42/8Ye87/4/
If anyone could help I would be super grateful.
$(document).ready(function(){
$("#selectForm").change(function(event) {
$(".all").hide();
$("." + this.value).fadeIn("slow");
$(".multi").fadeIn("slow");
var size = $(".language-list li").size();
if(size === 0){
$(".language-list h1").hide();
}
else {
$(".language-list h1").show();
}
});
});

Loop through all your h1 tags and show/hide based on whether the adjacent list has any visible elements. Try this:
$( ".language-list h1" ).each(function() {
if ($(this).next('ul').find('li:visible').length === 0) {
$(this).hide();
} else {
$(this).show();
}
});
To put it in context, here's the complete change handler:
$(document).ready(function() {
$("#selectForm").change(function(event) {
$(".all").hide();
$("." + this.value).fadeIn("slow");
$(".multi").fadeIn("slow");
$( ".language-list h1" ).each(function() {
if ($(this).next('ul').find('li:visible').length === 0) {
$(this).hide();
} else {
$(this).show();
}
});
});
});

Use the following simple code to check the amount of list-items:
var size = $(".language-list li").size();
if(size === 0)
{
...
}