floatbox and Jquery mobile 1.3.1

Page: 1

Author Post
Member
Registered: Apr 2013
Posts: 8
Hi all,
I'm evaluating floatbox for a new project built using Jquery Mobile 1.3.1.
Floatbox seems to work properly, but only on the very first page of my project.
If I have floatbox on an external page (same domain and folder) floatbox doesn't work anymore.
It seems related on how Jquery Mobile handle JS files: it loads the js, css file from the first page and then it discard every other js, css on other external page, loading only the body (or, better, the <div data-role="page"> tag and his content).
The solution provided by someone is to include the js and css file in the body (or the div above) on the external page.
It works for some other js scrips but not for floatbox.
To make floatbox work on external page you have to reload the external page (but you cannot reload a page on a web app using jquery mobile). Then floatbox work on the external page and doesn't work anymore on the first page.
Just reload the first page and FB will work on the first page, but on the external page it will not work any more .... and so on...

I'm asking here if there is a plan to make floatbox compatible with jquery mobile.

TIA ;).

tony
Administrator
Registered: Aug 2008
Posts: 3382
I believe there are a number of sites successfully using Floatbox with jQuery mobile.

Can you link me in to a test page where Floatbox is not working? I'd need to see exactly what the problem is in context if I am to make the problem go away.

Thanks...
Administrator
Registered: Aug 2008
Posts: 3382
It doesn't look like you are interested in following up with an example. Let me wrap up this up then by conjecturing as to the nature of the problem you are having.

First, let me restate: Floatbox is compatible with jQuery mobile, so the question "is there a plan to make floatbox compatible with jquery mobile" is really a "have you stopped beating your wife yet" question.

From the description of the problem, it is almost certain that the pages are using AJAX navigation rather than typical http GET requests. This then reduces to a problem of initializing the Floatbox content by running fb.activate() after the AJAX fetch completes. There's a section in the instructions that discusses this.

Alternatively, you could use standard (non-AJAX) navigation in your application, as described in the jQuery mobile documentation at http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/ajax-nav/

Cheers...
Member
Registered: Apr 2013
Posts: 8
Quote
It doesn't look like you are interested in following up with an example. Let me wrap up this up then by conjecturing as to the nature of the problem you are having.

No, sorry, I'm REALLY interested in solving this problem but I had to change project in a hurry and, actually, I have no time to create a basic example (on another site not referencing the original domain). I need to do this on another domain and so I need to publish my pages there. I will do this soon.

Quote
From the description of the problem, it is almost certain that the pages are using AJAX navigation rather than typical http GET requests. This then reduces to a problem of initializing the Floatbox content by running fb.activate() after the AJAX fetch completes. There's a section in the instructions that discusses this.

You are right, the pages are using AJAX. I'm reading the instructions but a basic example would be great (I'm not a full-time programmer).
Is there a sample that will help me to set links to make fb work on a AJAX environment like JQuery mobile?

I really appreciate your help. And this is more appreciated since I didn't followed-up this thread.

Thanks for your help.

Tony
Administrator
Registered: Aug 2008
Posts: 3382
I went googling for a jquery mobile callback that can be fired on page fetch completion, but didn't find one. It must have one.

The corresponding callback in Floatbox's fb.ajax() function is simply to assign the desired function to the "success" (or "finish") parameter in the call. For jquery.ajax() the equivalent parameters are "success" and "complete".

jQuery mobile rides on top of jQuery, so it obviously has a content load callback available to it. How it is set, I do not know. I think you need a jquery mobile board to ask on.
Member
Registered: Apr 2013
Posts: 8
Quote
I think you need a jquery mobile board to ask on.

You're right. I'll do soon.

Thanks again.
tony
Administrator
Registered: Aug 2008
Posts: 3382
If you ever find out what it is, please report back and I'll add it to the Floatbox instructions along with the existing info for jQuery and .NET dynamic pages.

Page: 1