Develop Reference

Kill twice called function and reload once onclick [duplicate]

I'm using JQuery lightSlider. It works pretty well (well, actually, I had to jig the code a little bit, but enough of that for now).
What I am trying to achieve is to dynamically replace the lightSlider content with ajax return data, and this I can do.
With each new data set, I call the lightSlider plugin again. This is the "success" or "done" section of my ajax function:
var lightsliderstring = "";
for(i=1;i<thumbsArray.length;i++){
lightsliderstring += "<li>\n";
if( $("#as_feature").val() ){
lightsliderstring += " <h3>" + $("#as_feature").val() + " photo " + i + "</h3>\n";
}
lightsliderstring += " <img src=\"/" + thumbsArray[i] + "\" />\n";
lightsliderstring += "</li>\n";
}
$("#lightSlider").html(lightsliderstring);
$('#lightSlider').lightSlider({
auto: true,
gallery: false,
item: 1,
loop: true,
slideMargin: 0,
thumbItem: 0
});
I call lightSlider again, with each new ajax call, because calling lightSlider only once doesn't seem to work. Maybe it's because the content is dynamically created after the DOM is loaded? Anyway, what I would like to do is clear the lightSlider function after each ajax call, because I think they are piling up on each other in the same div.
After one lightSlider call, it looks good:
But on my second ajax call, when lightSlider is instantiated again, it starts to "stack". Notice the doubled-arrows, vertically misaligned, and also the vertically doubling of the index dots below the picture:
What would cure this is some way to clear the first instance of lightSlider.

Assuming you are using a newer version of lightslider than 1.1.3 you should be able to .destroy() the existing instance as follows:
var slider = $('#lightslider').lightSlider();
slider.destroy();
For safety, you will need to check the slider is something before you call the destroy method though!

The $("#lightSlider").empty() or $("#lightSlider").html('') didn't work for some reason. The lightslider instances continued to pile up with every new form submission. I don't know why. Neither did the ("#lightSlider").lightslider().destroy() method seem to work, and that could be for some odd reason that I can't pinpoint, maybe something to do with the way I'm manipulating the DOM, I don't know.
What finally worked was to nest the <ul id="lightSlider">...</ul> block within a <div id="carousel-container">...</div> block. Then, with each new form submission, I deleted the entire #lightSlider block with a $("#carousel-container").html(''); Then I dynamically re-created the entire <ul id="lightSlider">...</ul> with the new, updated content. Here's the working code:
$("#carousel-container").html('');
var lightsliderstring = "<ul id=\"lightSlider\">";
for(i=1;i<thumbsArray.length;i++){
lightsliderstring += "<li>\n";
if( $("#as_feature").val() ){
lightsliderstring += " <h3>" + $("#as_feature").val() + " photo " + i + "</h3>\n";
}
lightsliderstring += " <img src=\"/" + thumbsArray[i] + "\" />\n";
lightsliderstring += "</li>\n";
}
lightsliderstring += "</ul>\n";
$("#carousel-container").html(lightsliderstring);
$('#lightSlider').lightSlider({
auto: true,
gallery: false,
item: 1,
loop: true,
slideMargin: 0,
thumbItem: 0
});

Jquery tool tip is not showing with AJAX data load

I am having issue regarding the showing tooltip on the ajax loaded content, I am adding the tooltip to ul with a function, and trying to bind it with mouse over event as it works.
str += '<li><a href="#" class="tooltip-1" data-placement="top" data-original-title="' + _icon_list[2] + ':' + obj[_icon_list[1]] + '">' +
'<i class="' + _icon_list[0] + '"></i></a></li>';
after adding the data I am trying to bind it
$('a.tooltip-1').on({
"mouseover": function() {
tool_tip();
},
"mouseout": function() {
$(this).tooltip("disable");
}
});
function tool_tip() {
$('[data-toggle="tooltip"]').tooltip()
}
it's getting callback but not showing the tooltip? here is the link of theme which has the tooltip and i am using it with my dynamic content.
http://www.soaptheme.net/wordpress/citytours/shortcodes/

Where is your ajax function?
Just add a title="your tooltip text here" in your href and in you ajax callback call this command.
$('a.tooltip-1').tooltip( );

lightgallery does not work with dynamically generated elements

I have implement lighgallery plugin to my local site... and this is not working with dom elements ...
for example
1.) append dom element created with js to html code..
if i create something like this in js "<span id='imgcon'><img src="image"></span>" and this all code is in a varialbe lets call galleryview (var galleryview) and this variable i append to a div that is in html file <html><head></head><bdy><div class="container"></div></bdy></html> and append like this from js file code $(".container").append(galleryview); and in end i use this $(".imgcon").lightGallery(); does not work...
Here is jsfiddle demo not working with dom
2.) images are in html code
i have html code smthing like this <html><head></head><bdy><div class="container"><span class="imgcont"><img src="image"></span></bdy></html>
This works fine as it.$(".imgcon").lightGallery();
Here is jsfiddle working demo without dom.
Question : why i cannot use dom with lightgallery ?
First demo is not working becasue i use js dom and second demo is working because i use html code in html file.. or there any problem with my code..

Simply put your $(".imagecontiner").lightGallery(); inside the click handler
http://jsfiddle.net/o0y70kv0/1/
The above will work only for the first dynamically created gellery.
To make it work for multiple elements: pre-create in-memory appendable elements and assign to each the .lightGallery() instance
http://jsfiddle.net/o0y70kv0/6/
$(document).ready(function() {
var imagesarray = [
"http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg",
"http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg",
"http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg",
"http://i765.photobucket.com/albums/xx291/just-meller/national%20geografic/Birds-national-geographic-6873734-1600-1200.jpg",
"http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg"
];
var hiddenimages = "",
albumcover;
$("#appendnewcontainer").click(function() {
$("<span />", {
class : "container",
appendTo : $("#fotoappendarea"),
append : $("<span />", {
class : "imagecontiner",
html : "<a class='dfed' href=" + imagesarray[1] + "><img src='" + imagesarray[1] + "' class='_34'/></a>"
}).lightGallery()
});
});
});

when you generated gallery item after than you need to use below code in your project
var $methods = $('#gallery-container');
$methods.lightGallery();
$methods.data('lightGallery').destroy(true);
$methods.lightGallery({
thumbnail: true,
animateThumb: true,
showThumbByDefault: true,
});

How to retrieve id from selected item using "this"

I am new at jQuery/javascript. I tried some suggestions I found on this forum but so far it did not help.
THis is what I am trying:
When loading categories from a database ( using ajax) this HTML statement is added for each category:
$("#Links ul").append('<li id=\"cat' + i + '" data-catid=' + i + '>' + categorie_tekst[1] + '</li>');
Using F12 I see that the lines are correctly added.
E.g. <li id="cat3" data-catid="3">Seafood </li>
Next step is selecting a category in the screen and retrieve the products of this category using the value set for data-catid.
I have been told that I could "this.id" but so far no luck. Displaying the value of this.id with alert returns the correct value but for some reason I can't use it.
When I add (#cat3).attr(“data-catid”) in the code it works. But different options like these did not work:
("#cat"+ this.id).attr(“data-catid”)
(this).attr(“data-catid”)
var x = $(this).id();
var rest = x.substr(4, 1);
Everything with "this" creates error : Uncaught TypeError: ("#cat" + this.id).attr is not a function...
Trying to display any of these options does not give any output (not even a popup when I set an alert)
Any help would be appreciated!

You are loading dynamic values. Please use Event Delegation. And the $.one() binds the event once.
You need to add this in your ready function.
$(document).ready(function () {
$("#Links ul").one("click", ".cat", function(){
alert($(this).data('catid'))
});
});
To get the IDs of the elements, use $(this).attr("id") or $(this).prop("id") (latest jQuery) instead of this.id, as sometimes, it might return the jQuery object.

As you are creating elements like
$("#Links ul").append('<li class="cat" id=\"cat' + i + '" data-catid=' + i + '>' + categorie_tekst[1] + '</li>');
create elements using jQuery
$("#Links ul").append( $('<li></li>', {
class: "cat",
id: "cat" + i,
data-catid: i,
text: categorie_tekst[1]
});
As you are creating elements dynamically use Event Delegation. You have to use .on() using delegated-events approach.
$(document).ready(function () {
$("#Links ul").on(event, ".cat", function(){
alert($(this).data('catid'))
});
});

How to stop jQuery page elements from repeating?

My jQuery code runs when I click a link. However, if I click the link multiple times, the code will repeat itself and appear under the previous code, which I don't want it to do.
Also, if I click the "close" option, and reopen it, it will have repeated. How do I stop it from doing this? Here is the code, by the way:
$("#pop").click(function() {
$("#overlay_form").fadeIn(1000);
$("#statsStr").append('<br />' + strOne).fadeIn(1000);
$("#statsCun").append('<br />' + cunOne).fadeIn(1000);
$("#statsAgil").append('<br />' + agilOne).fadeIn(1000);
$("#statsWis").append('<br />' + wisOne).fadeIn(1000);
});
$("#close").click(function(){
$("#overlay_form").fadeOut("slow");
$("#statsStr").fadeOut("slow");
$("#statsCun").fadeOut("slow");
$("#statsAgil").fadeOut("slow");
$("#statsWis").fadeOut("slow");
});
Thanks for the help!
EDIT: I have taken the suggestion to change my code to this:
// append the strings only once on load
$(function() {
$("#statsStr").append('<br />' + strOne);
$("#statsCun").append('<br />' + cunOne);
$("#statsAgil").append('<br />' + agilOne);
$("#statsWis").append('<br />' + wisOne);
});
$("#pop").click(function() {
$("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeIn(1000);
});
$("#close").click(function(){
$("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeOut("slow");
});
And while it works great, there is one problem. The game I am making requires the "#pop" function to update every once in a while to display what your "stats" are. Is there any way to refresh the code so that it will display the updated variables?

EDIT try this for your solution:
//call this method whenever you want to update your stats
//passing in the variables
var updateStats = function(str, cun, agil, wis) {
$("#statsStr").html('<br />' + str);
$("#statsCun").html('<br />' + cun);
$("#statsAgil").html('<br />' + agil);
$("#statsWis").html('<br />' + wis);
};
$("#pop").click(function() {
$("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeIn(1000);
});
$("#close").click(function(){
$("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeOut("slow");
});
$(document).ready(function() {
// assuming you have set these variables in the current scope.
updateStats(strOne, cunOne, agilOne, wisOne);
});

Consider using one() instead, which only triggers the event once.

It sounds like what you really want to do is show the #overlay_form on pop and hide it on close.
You could add the html to the page when it is rendered but use display none. That way you can simply show / hide when you click pop or close.
See if this example has the behavior you would like.
http://jsfiddle.net/qh4eN/1/
<style>
#overlay_form {
display: none;
}
</style>
<div>
<span id="pop">pop</span>
<span id="close">close</span>
<div id="overlay_form">
<div id="statsStr">statsStr</div>
<div id="statsCun">statsCun</div>
<div id="statsAgil">statsAgil</div>
<div id="statsWis">statsWis</div>
</div>
</div>
<script>
var strOne = "strength";
var cunOne = "constitution";
var agilOne = "agility";
var wisOne = "wisdom";
$("#pop").click(function() {
$("#statsStr").text(strOne);
$("#statsCun").text(cunOne);
$("#statsAgil").text(agilOne);
$("#statsWis").text(wisOne);
$("#overlay_form").fadeIn(1000);
});
$("#close").click(function(){
$("#overlay_form").fadeOut("slow");
});
</script>