Jquery mobile popup content appearing during page load - jquery-mobile

I'm using Jquery Mobile in my website, and I have a page with popups. I don't directly navigate to this page, but I inject the content with Ajax :
$("#myDiv").html(data).enhanceWithin();
The problem is that occasionally, when the page is loading, the popups content appear for half a second on the screen and then disappear...
Is there a way to avoid that ?

Related

JQM jump to previous page after clicking link

I'm using prestashop (1.4), I've installed 'mobile theme' module (for mobile client) which uses jqm (1.3.2) on top of jquery (1.9.1)
If I go to a page and as soon as the page displayed but before the page is fully loaded , I click on a link, the new page is displayed and then after a few second the previous page is displayed.
I think that when JQM finished to load the previous page it's call some handler that cause it to display.
I solve it by changing the JQM code (line 5021, http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js) so that it will display any link as an external link.
but I would like to know if I can fix it without changing the JQM code

Jquery Mobile popup causing page to scroll to top when multipage layout. (on iPhone)

I have a multipage layout and if I've navigated to a page (even the first page) and the URL now has #PageNumber in it, any closing of any popup in any manner will cause the page to scroll to the top.
Obviously, this isn't ideal, and I want to know if there's anyway to stop it.

jQuery Mobile changepage, displaying images

I am writing a jQuery Mobile single page application.
In one of my divs (data-role="page") I have a few images (img elements) which I load in "pagebeforeshow":
$('#a1').attr("src", "images/smile.png");
When I first navigate to this page (using changepage), the image is displayed correctly, but if i click back and press the link to this page again, the image is not displayed.
If I use window.location (instead of changepage), everything work fine, but then I cannot control the transition (slide, flip etc').
Any ideas why is this happening?
Thanks!
Try using pagebeforechange instead of pagebeforeshow

Primefaces LightBox slows down loading of the page opened inside LightBox

I am using Primefaces LightBox popup window in my application. The problem I am facing is when I click the link to open the corresponding page, it's too slow to display the page through LightBox. It's take more time to loading. How can I solve it?
Link for LightBox :
<p:lightBox style="display:inline">
Login
</p:lightBox>
When I click the link, the corresponding page login.xhtml is to be opened through LightBox. I am using PrimeFaces 3.0 and JSF 2.0.
Check out the Dialog component as a replacement for LightBox for your scenario. Dialog can replicate Lightbox's popup capabilities with the additional ability to make the login page modal (e.g. you can force the user to either complete the login process or close the login popup). Furthermore, unlike LightBox, Dialog is capable of pre-rendering its content so when the Dialog is popped-up, the user wont experience any UI delay due to the popup going to fetch its content. Note, if you want to keep the login page in a separate xhtml file, you can include it inside the Dialog component using a Facelets include.

How to open a html page as a popup with in the page (no new window opens) using Jquery

I am having the link button and when i clicked on the link button the popup will be open (with in the page itself like a modalpopup. now i have to get the popup feel using jquery and inside the div text should come from database.
How is it possible for getting the message from the backend.
means open a div in a modal popup feel using jquery
or opens the html page in a popup in the same window using jquery
Thanks and Regards
Vara Prasad.M
Take a look at the Facebox jQuery plugin. It does pretty much exactly what you're asking for. For example you can have a link like this to some remote page like so
text
then just call the facebox plugin when your content is loaded like so
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
});
and your content will render in a modal window. You can also take a look at Fancybox or ThickBox which provide very similar functionality.
There are two steps to your problem:
Open a modal popup using jQuery
Fetch server side content and display it in the modal dialog
Use jQuery Dialog (http://docs.jquery.com/UI/Dialog) for popping open a modal dialog, and then use jQuery load (http://api.jquery.com/load/) for loading the content from the server.
The server page you call will make the database query and output the contents to the response buffer.

Resources