I am trying to load a frame-set in a dialog:
$("#dialog").load ("myFrame.html).dialog ({title:"Edit Info"}).dialog('open');
the dialog opens but empty, the frame is not loading. No error in firebug either.
If I try to open a simple page then it's loading OK (minus the css though).
Is there an inherit limitation of opening a frameset in a dialog?
I'm using jQuery 1.4.4 and jQueryUI 1.8.6
Thanks
Mike
Is there an inherit limitation of opening a frameset in a dialog?
Yes, there is, as explained in the jQuery docs:
jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.
Browsers will discard many of the structural elements of a page and this includes framesets. The only way to display framesets inside another page is using an iframe.
Related
I've got a website that I'm converting into an app using JQM. I've read about Pages and how the DOM loads but I'm still uncertain how to architect the site.
The main page of the application is based on the Google Maps API which uses JS to load. There are 150+ target pages so I don't want them to load until the user taps the link. All of the target pages also require JS to initialize. When they return to the main page the cached state should be the default but I also need the option to run JS if the query string changes. Content doesn't change often so my preference would be to cache data once loaded but there would need to be some way to flush the cache.
I converted the site to JQM. The target page JS didn't run so I added rel='external' to the links. The JS now runs on the target but when I link back to the main page it reloads the page without running initializing the JS. The obvious solution would be to add rel="external" but then I'd be defeating all performance value. Any recommendations on how I should structure it?
Using rel=external your links will not be loaded with Ajax and you will lose animated page transitions. If you want to run some script when a page displays, use this page event:
$(document).on("pageshow", "#selector", function(event, ui) { /* your code */ });
This and other useful events are described in jQuery Mobile API Documentation.
For example, pagecreate (the now deprecated pageinit) is called once when the page initializes.
About getting query string parameters, see this answer.
I included an external javascript file on a jquery mobile page. The javascript file modifies some html and css snippet generated at the server. I've tried putting the jquery code that modifies the markup in the following jquery mobile events -
pageinit, pagecreate, pageshow, pagebeforecreate
But the script doesn't modify the loaded markup on page load, but on page refresh, it works perfectly. So I'm trying to find a way to make the modification take place before the page renders.
Any suggested will be gratefully valued.
I've solved my problem. I included all the external javascript and css files on the index page, and it worked well.
This is because jquery mobile loads subsequent pages through ajax, after loading the first page.
I have 2 application layouts: application.html.haml and application.mobile.haml. But when I switch from mobile to the non-mobile version the mobile layout is still used for the first load. In Firebug console I see that the non-mobile view was properly returned, however the browser and the Firebug HTML tab show the mobile layout. Any idea what's going? It's fine after a refresh.
The issue turned out to be caused by JQuery Mobile.
I found the answer here: http://jquerymobile.com/demos/1.0a3/docs/pages/docs-pages.html
JQuery Mobile doesn't do full page reloads unless it's told to, so although the full html was returned, JQuery Mobile just replaced the page portion.
The key portion from the docs is:
"It's important to note if you are linking from a mobile page that was loaded via Ajax to a page with multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be a conflicts."
Recently, I encountered a similar problem.
In my case, Rails4's turbolinks suffered. Similarly as JQuery Mobile, turbolinks only updates the body part of a full page without updating the head part of the html when an intra-site link is clicked. I simply removed the require line for turbolinks in my application.js and the problem disappeared.
Can you use Html DOM in firefox plug in to...
1) write/Auto fill in a form?
2) Read values in label? Textboxes? And use them in your program?
In Firefox, the current document is accessible in JavaScript by content.document and from there you can do anything you would do in JavaScript on the page itself.
I have a set of jqueryui tabs that, when clicked, load in their content dynamically. It works great, except that one of the pages uses a jquery plugin itself. This results in two issues:
The main page that holds the tabs throws an error when loaded because there is js that refers to elements that haven't loaded yet (those elements are in the external file that contains the code that relies on the plugin).
If I embed the js that triggers the plugin functionality into the external file, it is outside of the document.ready function from the main page and therefore isn't usable.
Basically I am looking for a technique that allows me to ajax load an external html file into the DOM while not crapping out the main page itself because JS that is already there is expecting HTML which is not yet there.
Thanks.
I haven't used it yet, but I think that this is what you are looking for
Listen
This plugin brings a clean, light solution, to websites with dynamic loaded content, or full of event bindings.
Intead of bound, handlers for events, are registered along with matching selectors.
And they'll still work for new added content.
This is achieved, using Event delegation, so the plugin will only work for events that bubble
You need to encapsulate your jquery code inside of the $(document).ready() function. If you're saying the code that's waiting to load via AJAX may or may not be loading at the same time as the parent page (i.e. a user has to click the tab to load it, vs. it being the default load) then you're design is bad and you'll have to rethink the approach. Basically you can't have code in your parent page referencing DOM elements that don't yet exist, and may not exist until your user clicks a tab.