Ajax content sometimes loaded into browser window

Page: 1

Author Post
Member
Registered: Jun 2013
Posts: 13
Location: Kiel, Germany
Hi,

on a page that contains a list of available jobs (it's a site of an employment agency) I have several links opening a Floatbox and loading the job details via Ajax. The links look like this:

<a href="/ajaxresources/ajax-jobdetails.html?job=87" class="floatbox fakeButton" data-fb-options="type:ajax width:650 caption2:~&lt;a href=&quot;jobs/vertriebstalent-junior-sales-manager-m-w.html&quot;&gt;Job-Beschreibung als eigene Seite aufrufen (z. B. zum Verlinken)&lt;/a&gt;~ showPrint:true enableDragResize:true contentClickCloses: false" title="Gesamtes Jobangebot lesen">Job-Details ansehen</a>


During my tests this worked absolutely flawlessly. Now my customer sent me a screenshot of the raw (and of course unstyled) Ajax content loaded directly into the browser window. The screenshot was made on an iPad.

So I tested again. Everything worked fine in all desktop browsers, but on my Android smartphone (Samsung Galaxy S4 mini) in Chrome I could observe the same phenomenon.

First I thought of some timing problem, but the JavaScript files are loaded synchronously in the <head> section of the page (no "async" attribute or other tricks), so they should be available when the links are visible. And obviously the Floatbox script is executed, too - the Ajax content isn't always loaded in the browser window, but only now and then. It can happen that the first two links I try work as expected, while the third shows the problematic behavior. When I navigate back to the page, the same link works as expected. It's not something I can reproduce reliably - sometimes everything works, sometimes there's one misbehaving link, sometimes more.

The URL of the page I'm talking about is http://www.headstarters.com/bewerber/aktuelle-stellenangebote.html, clicking on the orange buttons labelled with "Job-Details ansehen" opens the Floatbox popups.

Is there anything I can do to make sure the Ajax content is loaded correctly? Is there something I overlooked or is there something wrong with the links?

Thank you very much in advance for any advice! :)

Cheers,
Jan
Administrator
Registered: Aug 2008
Posts: 3382
I'm going to assume that this is occurring when the link is clicked quickly after page fetch time, before the page has had a chance to fully load. This would be consistent with seeing the problem on mobile but not on desktop because mobile devices typically load more slowly.

Floatbox "activates" itself on a page when the document content is ready. Part of activation involves assigning the onclick actions to the links to take them over with floatbox behaviour. Prior to activation, any link visible on the page is just a standard link that will navigate to its href when clicked.

You could try to optimize the page load so that the content is ready sooner.

An easy trick for slow-loading pages (or trigger-happy users) is to add onclick="fb.start(this); return false;" to your floatboxed links. The fb.start call will queue any clicks on the link that occur during page load and launch the floatbox when the page finishes loading. Activation will over-write that onclick action with the standard floatbox click action.

The Floatbox demo page on this site is quite large and so can be a little slow loading over a slow network. I block all clicks (and touches) on the page while it is loading by covering the entire page with a transparent div. There is an afterFBLoaded callback set in fbPageOptions which removes the transparent div when the page, and Floatbox, are ready for action.

The css used for that covering div is:
#cover {
position: absolute;
position: fixed;
width: 100%;
height: 100%;
z-index: 777;
}
Member
Registered: Jun 2013
Posts: 13
Location: Kiel, Germany
Thank you very much for your quick reply! :)

admin wrote
I'm going to assume that this is occurring when the link is clicked quickly after page fetch time, before the page has had a chance to fully load. This would be consistent with seeing the problem on mobile but not on desktop because mobile devices typically load more slowly.

That's what I thought first, too. But then I saw that for example the first and second click on Floatbox links loaded the content into the Floatbox popup while clicking on the third link lead to the described problem. And it also happens after quite some time, when the page should have been loaded completely (via WLAN).

Also, I used Charles to limit the bandwidth on my desktop, but wasn't able to reproduce it there. While it's not loading the page faster that way, it of course still processes it faster, which may make a difference.

admin wrote
An easy trick for slow-loading pages (or trigger-happy users) is to add onclick="fb.start(this); return false;" to your floatboxed links. The fb.start call will queue any clicks on the link that occur during page load and launch the floatbox when the page finishes loading. Activation will over-write that onclick action with the standard floatbox click action.

Thanks, I'll try this; I hope it helps.

admin wrote
The Floatbox demo page on this site is quite large and so can be a little slow loading over a slow network. I block all clicks (and touches) on the page while it is loading by covering the entire page with a transparent div. There is an afterFBLoaded callback set in fbPageOptions which removes the transparent div when the page, and Floatbox, are ready for action.

The css used for that covering div is:
#cover {
position: absolute;
position: fixed;
width: 100%;
height: 100%;
z-index: 777;
}

That's also a nice idea, thank you for the hint regarding the callback. While I wouldn't want to block all actions, I'm thinking of first setting the links to the URLs of the job details pages (complete pages with CSS etc.) and then changing them to the Ajax URLs via the callback.

Thanks again, I'll let you know if I could solve the problem.

Cheers,
Jan
Administrator
Registered: Aug 2008
Posts: 3382
If the problem is not at page load time, then my long-winded answer has no bearing.

If you modify the page elements after Floatbox's initial activation, you need to run fb.activate() to let Floatbox pickup the changes. See http://floatboxjs.com/instructions#dynamic
Member
Registered: Jun 2013
Posts: 13
Location: Kiel, Germany
Thank you for your second reply.

As you suspected, adding

onclick="fb.start(this); return false;"


didn't help. But I tried explicitly opening the Floatbox with fb.start(), and that seems to have done the trick. In my <head> section, I added

    <script type="text/javascript">
$(function() {
$(&#039;a[data-job-id]&#039;).on(&#039;click&#039;, function(event) {
var jobId = $(this).attr(&#039;data-job-id&#039;);
var jobUrl = $(this).attr(&#039;href&#039;);
fb.start(
null,
{
source: &#039;/ajaxresources/ajax-jobdetails.html?job=&#039; + jobId,
type: &#039;ajax&#039;,
width: 650,
caption2: &#039;&lt;a href=&quot;&#039; + jobUrl + &#039;&quot;&gt;Job-Beschreibung als eigene Seite aufrufen (z. B. zum Verlinken)&lt;/a&gt;&#039;,
showPrint: true,
enableDragResize: true,
contentClickCloses: false
}
);
return false;
});
});
</script>


below the line that loads the Floatbox script; my links now look like this:

<a href="jobs/account-manager-telesales-m-w.html" data-job-id="63" class="fakeButton">Job-Details ansehen</a>


That way the link to the full-fledged job details page is still there (just in case), and the Floatbox seems to open reliably. I don't have an iOS device, but I hope this will work there, too - I guess my customer will inform me soon about his experiences with this solution... ;)

I'm still not sure why just using the "floatbox" class doesn't work reliably on this page - maybe some other script somehow interferes with it or whatever -, but I'm happy that your script offers an alternative solution that works. :)

Cheers,
Jan
Administrator
Registered: Aug 2008
Posts: 3382
I can't be sure why those links are sometimes failing. The only possibility I can think of is that those links must be configured or modified by script, and that usually these modifications occur prior to DOMContentReady but occasionally occur afterwards. If this is the case, the simple way to fix things up would be to call fb.activate() after all scripted document modifications have completed.
Member
Registered: Jun 2013
Posts: 13
Location: Kiel, Germany
admin wrote
I can't be sure why those links are sometimes failing. The only possibility I can think of is that those links must be configured or modified by script, and that usually these modifications occur prior to DOMContentReady but occasionally occur afterwards.

The links themselves come directly from a PHP CMS and are not modified by JavaScript. I'm just checking the height of the boxes and set the height of all boxes to the maximum height so that they are all equally high. I guess that shouldn't interfere with Floatbox, or am I wrong?

admin wrote
If this is the case, the simple way to fix things up would be to call fb.activate() after all scripted document modifications have completed.

I'll try that as soon as I find some spare time, but I really like the solution I found. That way it is possible to open the regular job details pages by right-clicking on a link and choosing "Open in new tab", which wasn't possible before. It's also better for the search engine bots.

Cheers,
Jan
Administrator
Registered: Aug 2008
Posts: 3382
For completeness, I should point out that you don't have to revert to using to a custom fb.start action in order to use the source option. You can specify a separate source from the href in a standard floatboxed link.
<a href="pageForSearchSpidersAndJavascriptDisabled"
class="floatbox"
data-fb-options="source:pageForShowingInTheFloatbox"
>go</a>
Member
Registered: Jun 2013
Posts: 13
Location: Kiel, Germany
Good to know, thanks! :)

Cheers,
Jan
Member
Registered: Apr 2009
Posts: 56
This was a useful support thread.
Thanks for sharing the info! :)
« Last edit by jatss on Sat Jun 21, 2014 2:52 pm. »

Page: 1