I have a JSP page, where some parts of the pages are loaded from the backend using AJAX. For example, when I first open the page, the URL is http://www.made-up-domain-name-because-of-stack-overflow-restrictions.com/listUsers.do. The page contains an "add user" button, which loads HTML content (containing a form etc.) from the backend to the div-element with id "addArea". The URL stays the same the whole time (naturally), as the request is done in the background.
The problem I have is that the content loaded using AJAX is not completely viewable with any means.
Using Firefox I can see the new HTML with the Firebug add-on and "Inspect element", but the content within the script-tags is not visible that way (also not in the "Script" tab in Firebug - only the originally loaded scripts appear there). If I use "View page source" in FF a page reload is executed and I don't see the newly generated content (I only see the content of page http://www.made-up-domain-name-because-of-stack-overflow-restrictions.com/listUsers.do as it was when first loaded).
With Chrome I have the same problem as with Firefox.
Using IE I see only the original source.
Of course I can work around this by adding debugging mechanisms to the JS code and working half-blind, or moving parts of the JS code to external files etc., but if by any means possible, I would prefer to just view the code loaded using AJAX. Any suggestions, perhaps using some add-on?
Update: There is a better way: see the accepted answer for this question: How to debug dynamically loaded javascript(with jquery) in the browser's debugger itself?
You can use the JavaScript Deobfuscator extension for that. It can show you what scripts are compiled/executed on a webpage - including the ones that were loaded dynamically.
Related
I was reading up on ajax and how it empowers us to exchange data with a server behind the scenes and consequently avoid full page reloads. My confusion lies here, I don't really understand what full-page reloads mean. I think it's probably cause I've been working with ajax/react since the start I guess and have not really seen any webpage of mine fully reload when I access stuff from a database or an api.
It'd be great if someone could explain what they are and why did we need them before ajax?
A full page load is where the entire page is downloaded from the server. A page typically consists of several sections: header, footer, navigation, and content. In a classic web application without AJAX, a user clicks on a link to another page, and has to download the full page, even though only the main content is changing. The header, footer, and navigation all get downloaded again even though they don't change.
With AJAX there is the opportunity to only change the parts of the page that will change. When a user clicks on the link, JavaScript loads just the content for that link and inserts it into the current page. The header, footer, and navigation don't need to reload.
This introduces other problems that need attention.
When AJAX inserts new content into the page, the URL doesn't change. That makes it difficult for users to bookmark or link to specific content. Well written AJAX applications use history.pushState() to update the URL when loading content via AJAX.
There are then two paths to get to every piece of content. Users can either load the URL containing that content directly, or load the content into some other page by following a link. Web developers need to test and ensure both work.
Search engines have trouble crawling AJAX powered sites. For best compatibility, you need to employ server side rendering (SSR) or pre-rendering to serve initial content on a page load that doesn't require JavaScript.
Even for Googlebot (which executes JavaScript) care must be taken to make an AJAX powered site crawlable. Googlebot doesn't simulate user actions like clicking, scrolling, hovering, or moving the mouse.
Content needs to appear on page load without any user interaction
You must use <a href=...> links for navigation so that Googlebot can find other pages by scanning the document object model (DOM). For users, JavaScript can intercept clicks on those links and prevent a full page load by using return false from the onclick handler or event.preventDefault() in the click handler.
I'm developping a jqm application with spring mobile in the back-end.
Whenever I hit the browser refresh button on my mobile phone the page is completely devastated afterwards. Browsers back-button works properly.
The data are still available due prg pattern (flashAttributes in Spring) after refresh. Only the view is malformed.
Any ideas how to solve this problem?
From jQuery Mobile docs :
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax
So what happens is - in jQuery Mobile, the scripts and styles defined in the head are loaded only once. So, in normal conditions, it works fine, as all the pages will use the scripts loaded from the first page.
But. When you refresh a page in-between, it triggers a page-reload instead of the ajax navigation model thatjqm uses. So all the scripts and styles loaded from the first page will not be included from here on out.
What you need to do is "reference the same set of stylesheets and scripts in the head of every page", so that even if you hit refresh in the middle, the scripts and styles that had been loaded from the head of the first page are loaded again.
I recommend you read the docs from the above link fully to gain a better understanding.
I've written an Firefox extension to inject some script and css to all web pages loaded while this extension is installed.
Up to now, everything works fine. As soon I open a new page it loads en the script and css are injected. But what I want is that the extension is loaded before the page.
Example; I'm loading the twitter intent page. With my extension I'm customising this page. Right now I first see the twitter page, then the extension is loaded and my changes to the intent page are implemented.
What I want is the opposite. I first want to load everything from the extension, so as soon as the twitter page loads it is directly visible with my custom changes implemented trough my extension.
Currently I'm using the following lines to implement the scripts/styles. Although I've got the "contentScriptWhen" set to start, this won't fix my problem..
include: '*',
contentScriptFile: [data.url('jq.js'), data.url('js.js')],
contentStyleFile: data.url("css.css"),
contentScriptWhen: 'start',
I've 'solved' this problem. I'm loading the Twitter Intent (TI) page in the background as soon my index page is loaded.
While the TI page is loaded, it closes again. The page is in cache now, next time TI is loaded everything is instant correctly.
You can find more about background loading here: developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs
In this fiddle is shown how I did the trick; FIDDLE
You can also start by preventing the document from getting parsed then on the side fetch the same document, make any modifications on the fetched document and inject it in the page. Here is what I currently use https://stackoverflow.com/a/36097573/6085033
I have a bookmarklet that opens a dialog (in reality an iframe) and extracts some information. When the dialog is dismissed I want to put that information into edit text fields on the original page in the browser (like the way LastPass will automatically fill-in login forms on a page).
Is this possible? I'm thinking that same-origin-policy will prevent this, but maybe there is a way (without installing extensions such as greasemonkey, etc).
Edit: to be more precise: the bookmarklet appends a DIV to the original page; that DIV contains an IFRAME that loads my page; this page fetches some information; once this information is fetched within the IFRAME I want to remove the DIV and (somehow) put that information into the original page.
The issue I face is communicating the information in the IFRAME back to the original page.
What you are looking for are the functions addEventListener and postMessage.
Relevant links:
http://caniuse.com/#feat=x-doc-messaging
How do you use window.postMessage across domains?
If using the current Chrome, Firefox, and Safari, when switching between
http://www.facebook.com/my_name
http://www.facebook.com
The side panel for feed and chat, and any chat box actually stays. I thought when the URL changes, the page has to refresh as a whole, but obviously, this is not the case here. How is that done?
On IE 9, the URL actually became http://www.facebook.com/#! and using the "hash" to do ajax without refreshing the page, which is more understandable.
You can change the URL and page history from javascript without actually reloading the page.
See this answer on another question.
Note, that if you type the new URL by yourself and press enter the whole page reloads.
this might be the internal linking in the webpage with hidden DIVs with IDs and onClick those Hidden DIVs get visible with javascript and with AJAX content is loaded it will be a good if you browse the site disabling javascipt