I'm using JQuery Mobile for a simple mobile web application.
I'm using Single Page Anatomy.
When i'm performing $.mobile.changePage("sample.html",{transition : pop});
This seems to load the page without javascript.
Is there any work-around ? or Is there any new API to load external pages with page transitions also with DOM being loaded properly ?
If you inspect the DOM using firebug you'll see that the page is added to the DOM except that when you navigate away it is removed. If you want the page to stay in the DOM you can load the page first using the loadPage method
$.mobile.loadPage( "sample.html" );
And then navigate as you normally would using either a link or $.mobile.changePage
If you are talking about the javascript files not being loaded then this is intentional and it depends on how the page is loaded) and I don't believe this is new behavior specific to the JQM 1.1.1 release.
Related
I am trying to write an application in style of 4chan thread saver. I know that I can make a screenshot using html2canvas and even managed to do it. But how to load a html page without load it in browser? I care about keep the style of the page
This is not a jQuery issue. However, you should be able to do a XMLHttpRequest defined here and supply the url, to get the web page html back.
I'm developing a chrome extension. My background script and content script both get loaded when the page loads, but the problem I am facing is for instance on Facebook or Twitter when I scroll down and the site dynamically adds new content to the page. My background script and content script don't recognize that the page has loaded new content and doesn't do what it is supposed to do.
Is there any way to detect new content and make the background script re-launch?
My background script is set to persistent: true in the manifest, I was hoping that would do something useful but apparently not. Any help is appreciated. Thanks.
Sites with infinite scroll add new content dynamically to the page without changing its url (that is without using history.pushState/popState) so built-in chrome.webNavigation API won't work.
An established routine in such cases is to use a MutationObserver attached to document.body or the container element to which the new content is appended.
Alternatively you can add listeners for the events used by the js framework of the site, for example FB.Event on facebook or pjax events on github.
I have a problem regarding to jquery and jsp. I used a jquery load() to load the data on the same page but the main problem was when it was loading the url remains same as the home page but i want to change the url to what the data i have clicked. I already used meta refresh tag but it not working on jsp pages so Please help me to complete the task that to paste the url what the page i have been clicked.I used html tags and javasript and jquery which was saved in jsp pages.
Use window.history.pushState :
window.history.pushState({},'',"http://newurl.com");
and on jQUery .load example :
$("#div").load("http://mysite.com/newpage",function(){
window.history.pushState({},'newpage', "http://mysite.com/newpage");
});
And if you want to change the title of document as well, use :
document.getElementsByTagName('title')[0].innerHTML = 'New Page';
window.history.pushState({},'newpage','http://mysite.com/newpage' );
If you're concerned about compatibility towards older browsers and the more modern (although outdated) versions of IE, you have little choice that I'm aware of but either using a redirect which triggers an entire page load, or use the hash sign, which you can access via
document.location.hash
If you're not concerned about that, have a look at the HTML5 history API (http://diveintohtml5.info/history.html)
It's as simple as
history.pushState(null, null, 'newURL')
And doesn't break compatibility with the browsers back and forward buttons, provided your page takes those into account.
So I'm working with a few multipage Jquery Mobile documents that I want to be able to navigate between but not leave the WebView created by the mobile web app and still have the transitions. I've come across Todd Thomson's subpage widget and basically couldn't understand how to set everything up (visual learner and there are no template or demos on his github, no worries Todd if your out there).
So my question is, when you navigate from index.html to a multipage Jquery mobile document,page1.html via ajax is it possible to clear out what remains from the index.html and load the rest of the page1.html after the transition?
When you link from index.html to page1.html which is a mutli page document you need to add the attribute rel="external" to the link. This clears out the dom for you to allow linking between the multiple pages in the document via the # anchors.
I am building a web application which I intend it to work like a traditional 'software': as few page reload, and page redirect as possible.
My solution to page reload and redirect is to have them as 'tabs' within the app, so when you click on another tab, the div of your current content will shrink to 0 width.
My question is: how do I prevent the content (writtent in JS, w/ PHP backend) in a tab to load unless when it's clicked on?
(Assuming this is what I should do to reduce unnecessary load)
Just don't load it until the link/button/etc. to the tab is clicked.
See also the jQuery tab implementations.
If your back-end is in PHP, you should control what you send to the client from there.
By the time the js gets the code, it is too late to control what not to load. You can hide it, or remove it, but it has already been loaded.
So, to reduce unnecessary load, and as a good practice, you should only send to the client the active 'tab'. That has to be done in PHP in your case.