Develop Reference

Javascript looping nested click event

I have a nested click event listeners and I have a problem, that when I trigger the event listeners multiple times they get looped and send a request x2 times than it should. Where is the mistake in my code? It's probably a beginner's mistake, so I'm very sorry if that's the case. I'm still learning JavaScript and jQuery.
Code:
$('body').on('click', '.color-pick-btn', function() {
id = $(this).data("highlight");
unique = $(this).data("unique");
$(".color-picker").show();
//show the menu directly over the placeholder
$(".color-picker").position({
my: "right top",
at: "right bottom",
of: this,
collision: "fit"
});
$('body').on('click', '.color-picker-item', function() {
color = $(this).data("color");
$.ajax({
type: "POST",
url: '/echo/json',
//data: "highlight=" + id + '&color=' + color + "&unique=" + unique,
data: {
json:'{"highlight":"id","color":"color","unique": "unique"}'
},
dataType: 'json',
}).done(function(data) {
console.log('test');
});
$(".color-picker").hide();
return false;
});
$(document).click(function(event) {
if (!(($(event.target).hasClass('color-pick-btn')) || ($(event.target).hasClass('color-picker-item')))) {
$(".color-picker").hide();
}
return false;
});
return false;
});
JSFiddle here: https://jsfiddle.net/o0r4z6g3/
Check out the console output "test".
Cheers!

You added event listeners every time your event listener was called. I haven't taken a look at the intention of your code, and you haven't explained it in your answer, but this may fix your problem.
$('body').on('click', '.color-pick-btn', function() {
// .position() uses position relative to the offset parent,
// so it supports position: relative parent elements
pos = $(this).offset();
id = $(this).data("highlight");
unique = $(this).data("unique");
// .outerWidth() takes into account border and padding.
width = $(this).outerWidth();
$(".color-picker").show();
//show the menu directly over the placeholder
$(".color-picker").position({
my: "right top",
at: "right bottom",
of: this,
collision: "fit"
});
return false;
});
$('body').on('click', '.color-picker-item', function() {
color = $(this).data("color");
$.ajax({
type: "POST",
url: '/echo/json',
//data: "highlight=" + id + '&color=' + color + "&unique=" + unique,
data: {
json: '{"highlight":"id","color":"color","unique": "unique"}'
},
dataType: 'json',
}).done(function(data) {
console.log('test');
});
$(".color-picker").hide();
return false;
});
$(document).click(function(event) {
if (!(($(event.target).hasClass('color-pick-btn')) || ($(event.target).hasClass('color-picker-item')))) {
$(".color-picker").hide();
}
return false;
});

why this code is not loading pages ajax jquery

Guys What I am trying to do is load a page on navigation click with ajax and put some delay in it loading
when nothing is clicked I want load home page following loading animation with jquery and a delay with PHP code
and if something on nav is clicked I want to load that particular file
but this code don't seem to be working
var res = {
loader: $('<div />', {class: 'loader' } ),
container: $('.content')
};
$(document).ready(function(){
$.ajax({
url: 'templates/delay.php',
beforeSend, function(){
res.container.append(res.loader);
},
success, function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/home.php');
}
});
$('ul#nav_a li a').click(function(){
$.ajax({
url: 'templates/delay.php',
beforeSend, function(){
res.container.append(res.loader);
},
success, function(){
res.container.find(res.loader).remove();
var page=$(this).attr('href');
$('.content').load('templates/pages/'+page+'.php');
return false;
});
});
}
});

I will not discuss the code itself, but just improve it.
Try this code and tell me if you get what you want : ( comments inside the js code )
$(document).ready(function(){
$.ajax({
url: 'templates/delay.php',
// old code : beforeSend,
beforeSend: function(){
res.container.append(res.loader);
},
// old code : success,
success: function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/home.php');
}
// beforeSend and success are keys with functions as values that's why we use ":" and not ","
// the "," comma is used to separate ajax settings
});
$('ul#nav_a li a').click(function(){
var page = $(this).attr('href');
$.ajax({
url: 'templates/delay.php',
// old code : beforeSend,
beforeSend: function(){
res.container.append(res.loader);
},
// old code : success,
success: function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/'+page+'.php');
// old code
// return false;
// });
// we close our ajax.success function
}
})
// old code
// }
// return false is used to prevent browser to run the a href that's why we use it in the a.click function and not inside the ajax block
return false;
})
})

var res = {
loader: $('<div />', {class: 'loader' } ),
container: $('.content')
};
$(document).ready(function(){
res.container.append(res.loader);
$('.content').load( "templates/pages/home.php", function() {
res.container.find(res.loader).remove();
});
$('ul#nav_a li a').click(function(){
var page=$(this).attr('href');
$('.content').load( 'templates/pages/'+page+'.php', function() {
res.container.find(res.loader).remove();
});
});
}
});
Just copy and paste it.

Ajax loading and previous active scripts

I call a loading function for loading content into my #content div.
All work but my problem is this div contains sometimes content that needs a script to run.
(here MIXITUP)
For now, I call ( callback function ) the function who runs mixitup after loading (ajax) but when I load content more than one time, mixitup seems to be a little lost, the filters btn lost active class.
Here's my code for my file AJAX.php:
$(function() {
// historique
$(window).bind('popstate', function() {
console.log( "popstate event" );
var url = window.location;
var hash = url.href.substring(url.href.lastIndexOf('/') + 1);
$('#content').load( url + ' #content');
});
// hide loading
$('#loading').hide();
// menu action link click
$('.menu a').click(function(e) {
e.preventDefault();
$('#loading').slideDown(500);
$("html, body").animate({ scrollTop: $('#loading').offset().top }, 20);
$('.menu li').removeClass('active');
$(this).parent().addClass('active');
var lien = $(this).attr('href');
$('#content').fadeOut(500, function() {
$('#content').load( lien + ' #content> *', function () {
$('#content').fadeIn(500, function() {
$('#loading').slideUp();
history.pushState(null, null, lien);
});
});
});
});
});
And here is my.js
function mixitNow() {
$('.mixit').mixItUp({
load: {
filter: 'all'
},
controls: {
toggleFilterButtons: false,
toggleLogic: 'or',
live: true,
},
callbacks: {
onMixEnd: function(state) {
$("body").getNiceScroll().resize();
}
}
});
$( "a.toggle" ).click(function() {
$(".linkto a.toggle[data-target="+$(this).attr('data-target')+"]").toggleClass( "active" );
// Trigger the NiceScroll to resize
$("body").getNiceScroll().resize();
});
$('.navmenu').niceScroll({cursorcolor: "#84dbff", cursorborder: "none", cursorwidth: "4px", cursorborderradius: "0", scrollspeed: "100"});
$("body").niceScroll({cursorcolor: "#22ABDE", cursorborder: "1px solid #fff", cursorborderradius: "0", scrollspeed: "100"});
};
$(document).ready(function() {
mixitNow(); //works
console.log( "doc ready call 2 mixit" );
});
$(document).ajaxSuccess(function() {
console.log( "ajaxSuccess" );
mixitNow(); //works
});

instead of .load() you could use $.ajax and make use of the success handler
$.ajax({
url: url,
type: 'GET',
success:function(response){
// check response and
if(xyz){
mixItUp()
}else {
// else no mixin
}
}
})

You must delete the instance of MixItUp from the memory before your new ajax call, otherwise further instantiations on the same element will be blocked. Call this before making the ajax call.
try {
$('.mixit').mixItUp('destroy');
}catch(x) {}

Jquery applying class and removing class

The code which changes the active class to the currently clicked pagination class. Removing it works but adding the new class doesn't work.
http://jsfiddle.net/spadez/qKyNL/35/
$('a').click(function(event){
event.preventDefault();
var number = $(this).attr('href');
$.ajax({
url: "/ajax_json_echo/",
type: "GET",
dataType: "json",
timeout: 5000,
beforeSend: function () {
$('#content').fadeTo(500, 0.5);
},
success: function (data, textStatus) {
// TO DO: Load in new content
$('html, body').animate({
scrollTop: '0px'
}, 300);
// TO DO: Change URL
$('#pagination li.active').removeClass("active");
$(this).parent().addClass("active");
},
error: function (x, t, m) {
if (t === "timeout") {
alert("Request timeout");
} else {
alert('Request error');
}
},
complete: function () {
$('#content').fadeTo(500, 1);
}
});
});
Can anyone please tell me where I am going wrong?

The problem is that this in the success callback isn't your element.
You may do this :
$('a').click(function(event){
var element = this; // <= save the clicked element in a variable
event.preventDefault();
var number = $(this).attr('href');
$.ajax({
...
success: function (data, textStatus) {
...
$('#pagination li.active').removeClass("active");
$(element).parent().addClass("active"); // <= use it
},
...
});
});

This this in ajax callback isn't what you expect it to be. Add this to your ajax parameters:
context: this,
No need to build custom object saving system and making code more messy, as jQuery already has this functionality.
Edit: In this case it should look like:
$('a').click(function(event){
event.preventDefault();
var number = $(this).attr('href');
$.ajax({
context: this,
url: "/ajax_json_echo/",
...

How to use Hover and click using Jquery

Hi all i am using the hover and click function for a tool tip from here
ToolTips
Now as per my requirement i would like to combine both hover and click event in one method. When hover i don't want to show close button but when user click i would like to show close button. How can i do this in one event can any help me or if any examples or samples please share
I tried this for Tooltip on Click
<script type="text/javascript">
$(document).ready(function() {
$('#foobar2').click(function() {
var url = $(this).attr('href');
$(this).formBubble({
url: url,
dataType: 'html',
cache: false
});
return false;
});
});
</script>
I tired this but not working can you edit please
<script type="text/javascript">
$(document).ready(function() {
$('#foobar2').bind('mouseover click',function(e) {
if(e.Type=='click')
{
var url = $(this).attr('href');
$(this).formBubble({
url: url,
dataType: 'html',
cache: false
});
return false;
}
if(e.Type=='mouseover')
{
var url = $(this).attr('href');
$(this).formBubble({
closebutton:false;
url: url,
dataType: 'html',
cache: false
});
$.fn.formBubble.text('hover hover hover hover');
}, function() { //mouse out
var thisBubble = $.fn.formBubble.bubbleObject;
$.fn.formBubble.close(thisBubble);
});
}
});});
</script>
hi i tried this but didn't work
if(e.type=='mouseout')
{
var url = $(this).attr('href');
$(this).formBubble.hide()
}

instead of binding with: .click(function(){ ... })
bind with: .bind('mouseover click',function(e){ ... })
then inside the function use: e.type which will be a string determining what event type was triggered
<script type="text/javascript">
$(document).ready(function() {
$('#foobar2').bind('mouseover click',function(e) {
if(e.type == 'click'){
// do some click event stuff
var close = true
} else {
// do some hover event stuff
var close = false
}
var url = $(this).attr('href');
$(this).formBubble({
url: url,
dataType: 'html',
cache: false,
closeButton: close
});
return false;
});
});
</script>