We Keep Coding

Linking URL to a page loaded inside a div

I have a webpage hosted in Firebase that loads content from another HTML page inside a div upon clicking a link using:
$('#div').load(url);
The problem is that this method does not change the URL for the page so it is uniquely identified. Is there a way to make it so that when running that command it changes the URL so that the user can bookmark the page, and when that page is loaded it recreates the page with the loaded HTML?

Delay the page rendering until an iframe is loaded

We have the following situation:
We have a webpage (let's call it Page A) that gives us only the header of a website.
We have another webpage (let's call it Page B) that gives us the content with no header and includes the Page A in a hidden iframe.
When Page A is loaded it will get its own HTML and add it in an empty div in Page B.
All of this is working as expected.
My question:
Can I delay the page rendering of Page B when it reaches the iframe, wait for the iframe to load and when the HTML is populated in Page A to continue the rendering. The behaviour should be as if I'm calling the contents from a synchronous AJAX call. The idea is NOT to show the content of the Page below the main menu until the menu HTML is populated.
The business logics behind this:
We're using an external service as a forum and we need to add our website header above. They can give as a free-html slot where we can put our own HTML. The header is dynamic so we need to load it each time from an URL. Since their site may response faster we don't want the content to load and several moments later the menu to pop out of nowhere. We need to have the menu HTML populated before we continue showing the content. The Menu HTML is populated from an iFrame by the iFrame so we need to wait for it to load.
Any help will be appreciated.

Maybe you can hide the contents of Page B via style="display:none;" and then show the contents when iframe's load event fires.

Insert the markup for the <iframe> dynamically in a content loaded event handler. Since you've tagged the question jquery
$(window).on("load", function() {
var iframe = $("iframe").attr("src",url).whatever();
$("whatever selector").append(iframe);
})

Ajax reloading the same page, with 2 javascript files

Ok so I have a bit of a problem. I am using a template home page. A top Navigation Bar, Side Navigation bar and a "#Content_Area" div
To avoid loading and reloading tons of standard JS libraries
bootstrap-datepicker.js,
bootstrap-editable.min.js,
bootstrap-wizard.min.js,
bootstrap.min.js,
docs.min.js,
jquery.min.js,
moment.min.js,
rowlink.js,
select2.min.js + all the css
each time a user just navigates to a different page (that use the same exact template) I am just reloading the content area with jQuery .load() function. It works perfectly, with some cool fadeIn() and fadeOut() effects on loading (which I really like).
Say a user goes to Link A. That loads the contents of A.jsp
Then goes to Link B. That loads the contents of B.jsp
So far so good, the Major Problem is if he goes back to A and A has some custom Javascript. The browser created a temp js file 1.js (confirmed with Firebug) then on the second visit (the page did NOT reload at all) it created a second temp file 2.js containing exactly the same code, resulting in nothing working on the second visit.
How do I get rid of those temp files when emptying the div?

Refreshing dynamic listviews in JQM when navigating between pages

I'm creating a mobile app using jquery mobile and cordova. I've successfully loaded a dynamic listview from a json ajax call. My issue is that when I navigate to another page, then press the back button, the original page's listview does not load and there is nothing where it should be. If I refresh the page, the listview appears. Rather than refresh the whole page every time I navigate to this page, how would I refresh just the listview?
I've tried refreshing the listview both when the DOM and the window have loaded, and before both, and using $(document).on("pagebeforeshow", "#pagenamehere", function() {}); to no avail.
To be more specific, I have two pages with listviews. The navigational steps go as follows:
1. load page 1: listview shows
2. navigate to page 2: its listview does not show
3. press back: page 1 listview shows
4. navigate to page 2: its listview still does not show
5. refresh page 2: its listview DOES show
6. press back: page 1's listview does NOT show
This process should make it clear that the listview only loads when the url is directly input or reloaded; for some reason navigation between pages (different html files) breaks this.

If you have script inside the head tag of the second page and this page is loaded through Ajax, then the script won't execute.
Try to move your script from the head tag inside the second page's div (<div data-role="page" id="mySecondPage">) or create a JS file and load it on the first page's load. Relevant example here
jQuery Mobile uses Ajax to perform pages transitions so during the transition jQuery Mobile will only inject the contents of the response's body element (or more specifically the data-role="page" element). Nothing in the head of the page will be used (except the page title).
In conclusion, any scripts and styles referenced in the head of a page won't have any effect when a page is loaded via Ajax. They will execute if the page is requested via HTTP and that's why your listview is loaded after a full page refresh.

Ajax get new page

there is a script what can run loaded javascript again?
My problem is when I load page by Ajax(jquery). And i load page to body. Content what was loaded is ok, but javascript dont run again.
Example: Page -> click button -> reload body content -> content is datatable and nothing more (javascript stay).
Is there any solutions for this problem ?