I've been staring at this one for a while and I'm completely stumped. You'll need firebug for this, take a look at the AJAX requests. They seem to be multiplying after each click of next and previous until it's too slow to load entirely:
http://www.ftsdev.com/freegreen/virtual-tour-prototype/virtual-tour.html
All the JavaScript source for this is in:
/freegreen/virtual-tour-prototype/js/virtual-tour.js
Functions to look at:
launchVirtualTour()
$('#vt-next').one('click',function()
$('#vt-prev').one('click',function()
When ajaxComplete() is called I check the file that loaded against an Array outside of the callback function. This allows me to determine whether or not it's the first or last element in the series so that I can hide the Previous or Next buttons accordingly. I have a feeling that the problems lies somewhere in lines 80-82 where I add 1 to the inArray() value stored in indexInArray.
I've searched around but can't find any similar situations out there, any help is much appreciated.
Thanks!
I briefly tried out the page. From a quick skim of the code and my gut reaction, it looks like you aren't unbinding previously bound click events. As far as I can tell this is the flow to your bug:
User clicks to bring up a slide show
You bind next/prev click events
User clicks around, using the next/prev buttons
User clicks out of the current slide show
User clicks into another slide show
You bind next/prev click events
User clicks around, using the next/prev buttons, causing content to be called twice
You need to unbind the click events when the user clicks out of the first slide show. Or don't bind in step 6.
Related
I made some brackets for a tournament and I'm using Owl carousel to serve videos on each clicked match.
The problem I've been trying to solve is this: Create a link after each click on a match, have this link clicked (by itself) which will, in turn, activate a certain slide in the carousel. Unfortunately that's the only way this could be made to work, because the Owl carousel needs links for callbacks. It's something like in this fiddle: http://jsfiddle.net/EwFMn/9/ except that in my example I have the brackets loaded below.
Now (after searching for a solution and trying every method suggested here in other questions on SO) I couldn't find a way to get a link which was appended to a div to be clicked too immediately after being created. What I get is this: on clicking a match, a link is created which needs to be clicked separately to get the behaviour I described above.
I have tried all the methods which use
on('click', selector-to-your-element , function() { ... });
as well as simply:
$('.something').click();
as well as other methods using live and delegate. None of the solutions proposed on other similar questions on SO worked. It seems as if at the time when the click event is triggered jQuery doesn't find the link it has just created to click it, so the link only works after you click it manualy.
The problem is I need this to not only work on one single click but also I need this link to get destroyed after it automatically gets clicked. I'm not even sure this is possible with jQuery. I'm curious if anyone has a working solution for this.
You can't trigger the href with a javascript click event. You need to do something like this:
$('.button').on('click',function(){
location.href=$(this).attr('href');
});
$("[href=#seven]").trigger('click');
I have a pretty complex system with a few AJAX calls which render different templates into other templates in PHP.
One of these templates is a edit form for my entity. This form is rendered hidden into my website until a button was clicked, which will then fire a jQuery toggle() to switch out a part of my site for this edit form.
This works fine until the user is using the jQuery UI slider on my site.
What happens if the user navigates within the slider is that parts of my site will be reloaded with AJAX.
When the button for the toggle() then will be clicked the animation goes of as often as the slider was used (so if the slider was used 4 times the toggle will animate an switch out the 2 elements 4 times).
I debugged through it and couldn't find the mistake, i can't provide a jsFiddle which could rebuild the situation nor can i give access to the site. The click function will be fired only once, so i really can't explain why this is happening.
To mention is that i have 3 buttons which will trigger this event:
#poi_edit_ajax will be shown when the slider was used in the template which will be rendered per AJAX.
#poi_edit_first will be shown by first access to the site and nothing has been reloaded per AJAX.
#poi_edit_last will be shown so the user can come back from the edit view
The Javascript is the following:
$("#poi_edit_ajax").click(function(){
$(".toggle_edit").toggle('slow');
});
$("#poi_edit_first").click(function(){
$(".toggle_edit").toggle('slow');
});
$("#poi_edit_last").click(function(){
$(".toggle_edit").toggle('slow');
});
I don't think that somebody can give me a solution with just this information, but that's everything i can provide now, so my Question now is simply if it is possible to tell the toggle() function from jQuery to only run the animation ONCE PER CLICK.
I don't think that jQuery one() can be used for this, because so the click event could only be used once per pagevisit.
EDIT
According to the comment, i tried out if multiple event handlers will be registered within the AJAX calls, which is true.
The code to fix this is simple:
$("#comment_first").unbind("click").click(function(){
$('.toggle_information').toggle('slow');
});
$("#comment_last").unbind("click").click(function(){
$('.toggle_information').toggle('slow');
});
$("#comment_ajax").unbind("click").click(function(){
$('.toggle_information').toggle('slow');
});
I just need to unbind the Lister before bind it again, else they're gonna stuck and multiple Listeners will react to the click event!
You are probably binding the Click event multiple times (by loading javascript through the AJAX calls). Make sure you bind the Click handler (which triggers the toggle()) only once.
Take a look at this answer: https://stackoverflow.com/a/969011
A (slightly modified) quote from that answer, for quick reference:
function alertEvent() { alert("test"); }
$(".ajax").bind("click", alertEvent);
//When you want to ensure it won't happen twice...
$(".ajax").unbind("click", alertEvent);
$(".ajax").bind("click", alertEvent);
This method will only remove the event you specify
I am using a bootstrap popover on svg elements in D3. Multiple popovers can be open at any given time. What I would like to know is how to, on clicking on a popover at the back, to force it to move to the front i.e. being focused on?
Is there any way to increment the z-index of an individual popover to move it forward manually?
Thanks.
Edit:
I have managed to create a fiddle using the suggested answer. The problem arises that, with using the global variable, it increments the z-index correctly on the most forward popover, but after bringing one to the front I am not able to access the others i.e. to even click the ones behind...so the click handler is not even being called. I'm thinking there is some type of layering going on. For example: If you look at the children nodes and click on one (the link in the title of the popover), then click on another one to semi-overlap the first open one - click the one behind and it will move forward. Click the one that is now behind and nothing happens:
jsfiddle.net/Sim1/YME9j/9
Is there an alternative to incrementing the z-index to bring a popover forward without hampering interaction with those that are behind it?
You should be able to do this in a click handler:
element.on("click", function() {
d3.select(this).attr("z-index", d3.select(this).attr("z-index") + 1);
})
As #AmeliaBR pointed out, this won't really work if you have more than one popover though as the z-index is only incremented by one. In a case like this, you could have a global variable that keeps track of the maximum z-index and use that.
The CMS I'm using (Invision Power Board) has nifty Sign In links that when clicked open a dialog instead of changing the page. I found an example of how to create such a link:
...
The problem is, every time the mouse is moved over the link, the click handler is added. So if I move my mouse over the link ten times and then click it, the Sign In dialog comes up ten times.
I tried changing it to:
...
But that doesn't work. There aren't any errors in the console, but nothing happens when the link is clicked.
I was able to get this working, but it required some non-inline code:
<script type="text/javascript">jQuery("a.signIn").on("click", ipb.global.inlineSignin);</script>
But that's a problem, because I may have sign in links on different sections of pages (that are generated independently) and if I have the above snippet more than once, then I'm back to the same problem.
Is there any way to make this click handler work using only inline code?
You need to invoke the method
...
I'm having trouble recreating the issue in jsbin without giving away project-specific details (I'm using JSON from an API), but I'm running into an issue that I can't seem to get around, and would really appreciate any help or insight.
I start with the following markup:
I have a blank unordered list.
<ul id="results-list">
<!-- it is blank for now, and will be populated via jQuery -->
</ul>
And also an input.
When that input has been submitted, I run some code to populate #results-list with data, based on a JSON response. All's well. In that population of the data, I embed links that go nowhere, to make it like a sidebar navigation (user clicks on a link, and the main content area's content changes accordingly). This works fine the first time around.
Then, I've got an anonymous function running inside of .live() for clicking on those links in #results-list.
$("#results-list a").live('click', function(){
// populate the main content area with the correct information.
});
Okay, so that works just perfectly the first time around. Once the user changes what's in the input, and resubmits the form, all of the items in the main content area change accordingly, but there are two of them. If they resubmit the form again, there are three. And so on.
So, the main content stuff is duplicated X times, with X being the number of times the form has been submitted.
I realize this is a somewhat vague question, but I wanted to see if anyone had any pointers as to what may be going on? This is all happening within a normal $.getJSON method call.
Any ideas?
If you call the live function after each post, jQuery will just keep adding event handlers to the DOM, so the handler will get called multiple times. To get round this, either just call the live function once, or if you have to set up event handlers after each post use unbind and then a bind function (i.e. bind or something more specific like click).