-
Notifications
You must be signed in to change notification settings - Fork 666
Support onBeforeShow callback for content loaded via Ajax #56
Comments
Hmmm... if I'm reading the Hopscotch code correctly, the onNext callback should get invoked before moving on to showing the next step (line 1622 calls the callback, then line 1648 tells the bubble to render itself for the next step). However, there doesn't appear to be any mechanism in place to tell Hopscotch to hold up for asynchronous behaviors, so It appears an ongoing theme with the open issues is the necessity to reveal via API a method to tell Hopscotch to recalculate its positioning after the DOM is changed. This could be coupled with a step config option that tells Hopscotch not to render the bubble until it's told to do so (thus your callback would be responsible to call In the interim, there's a few (somewhat hacky) options I can think of that might help...
I hope this helps! |
Oh crumbs... sorry... the previous comment is inaccurate. Hopscotch doesn't reach line 1622 until after it's determined what the next step should be by querying the step targets. So, given that, only options two and three are still viable, but option two is only viable if the target exists on the page before triggering onNext. IMO, I don't think this is desired behavior... the docs aren't specific, but I think the general impression is that onNext would trigger first, as an immediate action to clicking the Next button, instead of waiting until we've determined what the next step should be. But, perhaps the original intent is that we shouldn't do anything that might affect the page (things that onNext might carry out) until we've actually determined where we're going next. I think I'm going to play around with option three (the multipage flag) a bit... if this works as a viable option (after addressing the above), this might be a reasonable path forward for adding this sort of "waiting" functionality to Hopscotch. Any thoughts? I'm curious to know what everyone's general impressions are around the onNext callback and whether what's described above is in sync with everyone else's use case, or if the "suppress until we've found something relevant" behavior is desired. |
I was trying to use hopscotch in a similar scenario, where content is loaded via AJAX, and the tour should target an element from that loaded content. While the Would be great if an |
As a reference, I am using this structure to work around this limitation: var waitForElementVisible = function(element, callback) {
var checkExist = setInterval(function() {
$element = typeof element == "function" ? $(element()) : $(element);
if ($element.is(':visible')) {
clearInterval(checkExist);
if (typeof callback == "function") {
callback();
}
}
}, 100);
};
var nextOnCallback = function(callback) {
var currentStep = window.hopscotch.getCurrStepNum();
callback(function() {
window.hopscotch.startTour(theTour, currentStep);
});
};
var theTour = {
id: theId,
steps: [{
title: 'title',
content: 'content',
target: 'target',
placement: 'bottom',
onNext: function() {
$('.ajax-call')[0].click();
nextOnCallback(function(callback) {
waitForElementVisible(function() {
return $('.element-to-wait-for');
}, callback);
});
},
multipage: true
}, {
title: 'title',
content: 'content',
target: '.element-to-wait-for',
placement: 'bottom',
onPrev: function() {
window.hopscotch.startTour(theTour, window.hopscotch.getCurrStepNum());
}
}]
}; |
I need this enhancement as well. In the meantime, thanks for the workaround! It works great. |
Yah I'd definitely rather use support for deferred/async to properly await showing. I would prefer a full lifecycle mechanism, like:
This would solve almost all issues regarding waiting for async stuff, doing things before/after showing, and preventing/canceling next/prev actions (even returning true/false for |
@kamranayub +1 Vassilis |
+1 |
Thank you @luksurious Your workaround saved me. |
I was able to get the desired effect by returning I then resume the tutorial on step 2 at the end of my async call, since returning Something like this: (sorry if its messy - i dont work with JS that often)
|
I have a scenario where a form will be loaded via Ajax upon clicking on a button. I want to have a step to target on the first input field of the form. I've tried to load the form in onNext callback of the previous step. But it seems like the position of the next step's element is calculated before onNext is triggered and the next step is being skipped because the form has yet to be loaded at that time.
Is it possible to add onBeforeShow callback to allow loading of content via Ajax?
The text was updated successfully, but these errors were encountered: