Develop Reference

Issue with ID's in browser when same content is loaded a second time in a div

I am creating a website where all my content is loaded into a div name content. my menubar is also loaded in to a div name menu.
The problem arises when i click the same link for a second time. So for instance i would click on members.php for a second time, the content is loaded into the div but some of my functions dont work as expected as they rely on and id which has been set. An ID can only be used once so when i load the page for the second time the ID doenst work. I would have to remove it before loading the content another time (which isnt an option) - as there are many ids.
i would be using jquery to load the content into the div. for instance $('#content').load('members.php');
but upon doing this the second time my id's would not work (content of the first page load stays intact) is there a way to reload that div.
Also is this normal behavior?

You can use a flag to define if this content loaded before or not, check it every time you call the loading function if it is not loaded before then load it, else no need to reload it again.
//initialize members_loaded variable when your page start.
var members_loaded = false;
//then when you want to load data check for it, change it to true in your complete function (when ajax done)
if(!members_loaded){
$( "#content" ).load( "members.php", function() {
members_loaded = true;
});
}

Truly Refresh/Reload a jQuery mobile page div

I'm currently working with a file that contains several jQM page divs (single page approach).
I have a refresh button in the header of these pages that I'm trying to get to refresh individual page divs based on "getActivePage". The reason for this interactivity is there is a running list of items that users will be needing to refresh to see new content coming in to listview(s).
I've had various visual refreshes altering the following function, but none seem to totally refresh the DOM or the contents of a desired pagecontainer or jQM page div. With the following code, I'm able to see a visual transition and I arrive at the desired/same jQM page div that I'm trying to refresh. The problem is, the contents aren't really being reloaded it seems. (I have a way in the test environment of changing the listviews to test the refreshes and I'm not seeing those changes take effect) I'm wondering if I'm not passing in "id_urlNav" properly or if this is even possible with .pagecontainer("change"...).
When all was lost, I ended up inserting window.location.reload();, but this seems to be bad form for pagecontainer manipulation. If anyone has any idea why this isn't working, please let me know. Thanks in advance for reviewing!
// script to reload/refresh jQM pages
// scoped to internal page hashes vs. overall window
// "change" is used vs. "load" for internal reloads vs. AJAX content
function refreshPages() {
// the camel casing on the first part of the pageContainer object below
// is important
var id_url = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
var id_urlNav = "#" + id_url;
console.log("id_urlNav" + " =" + " " + id_urlNav );
// window.location.reload();
// keeping the below in case 1.5 finally arives with proven solution
$.mobile.pageContainer.pagecontainer( "change", id_urlNav,
{
allowSamePageTransition : true,
showLoadMsg : true,
// reloadPage reloads entire jQM set of pages, forgetting the getActivePage
// reloadPage is deprecated
// reload "reloads" the getActivePage, but doesn't show new content
reload : true,
transition : 'fade',
changeHash : 'true'
}
);
}
// /refresh code
I read some on the jQuery forums about there being a bug related to reload: vs. the now deprecated reloadPage:, but I don't know if that is some of the cause of the malfunction or not.

jquery fail on DOM modify made with html()

In my website, I build the page navigation based on hashchange:
var hashHome;
$(window).bind( 'hashchange', function(e) {
var homeClass = "home";
var url = $.param.fragment();
if($('#page-content').hasClass(homeClass)){
hashHome = $('#page-content').html();
}
if(url ==''){
//homepage with nothing(no hash)
if(!$('#page-content').hasClass(homeClass)){
//alert("load frim cache ->#"+url);
$('#page-content').addClass(homeClass);
$('#page-content').html(hashHome);
}
}else{
//go to some page
if($('#page-content').hasClass(homeClass))
$('#page-content').removeClass(homeClass);
initAction(url);
}
})
$(window).trigger( 'hashchange' );
When the site loads its homepage, the homepage gets stored in hashHome. If user navigates away, the initAction(id) replaces the entire $('#page-content')'s content with other pages' content. When the uses navigates back to home, it restores the stored home back to the $('#page-content').
My problem is that all of the jQuery stopped working on the homepage.
I've read about live() already but it seems that it needs a event like click() for it to work. How do I fix this?

I figured out that i need to store my entire page before i change the content of the div that is surrounding it
var content$('#page-content').html();
then do the content change
that way, when i reinitialize all my jQuery plugins, they will loose all of their old reference and use the new content variable, instead of a double initialization
and finally, i've the original question's code also won't work since the script tag look like this: <script type="text/javascript">...</script>, IE for some reasons won't recognize this, so I have to change it to <script></script> in order to make it cross browser compatible

Detect first page load with jQuery?

I need to detect the first time a page loads in jQuery so that I can perform some actions only when the page loads the first time a user navigates to that page. Similar to server side code page.ispostbasck. I have tested $(document).ready and it fires every time the page loads so this will not provide what I need. I have also tried the jQuery Load function - it also fires every page load. So by page load an example is that I have an HTML input tag on the page of type button and it does not fire a postback (like an asp.net button) but it does reload the page and fires $(document).ready
Thanks

You will have to use cookie to store first load information:
if (! $.cookie("cookieName")){
// do your stuff
// set cookie now
$.cookie("cookieName", "firstSet", {"expires" : 7})
}
Note: Above example uses jQuery Cookie plugin.

An event doesn't exist that fires only when the page is loaded for the first time.
You should use jQuery's .ready() event, and then persist the fact that you've handled a first time page load using your method of choice (i.e. cookie, session variable, local storage, etc.).
Note: This method will never be fool proof unless you can store this information at the user level in a DB. Otherwise, as soon as the user clears their cookies, or whatever method you choose, the "first time loaded" code will fire again.

I just ran into this problem and this is how I handled it. Keep track of the first time the page loads by using a variable initialLoad:
var initialLoad = true;
$(document).ready(function() {
...
...
...
initialLoad = false;
});
Then in other functions, you can do this:
if (initialLoad) {
//Do work that is done when the page was first refreshed/loaded.
} else {
//Do work when it's not the initial load.
}
This works well for me. If the user is already on the page and some jQuery functions run, I now know if that user just loaded the page or if they were already on the page.

The easy solution is to use jQuery ‘Once’ plugin
$(element).once('class-name', function() {
// your javascript code
});

What is the recommended ordering of an AJAX load and history.pushState?

For instance, in jQuery, setting up a link to load something into a region, should I load the content before calling history.pushState?
$('#link').click(function () {
$('#region').load('regionContent', function () {
history.pushState(null, null, 'newUrl');
});
return false;
});
Or should I load the content after calling history.pushState?
$('#link').click(function () {
history.pushState(null, null, 'newUrl');
$('#region').load('regionContent');
return false;
});
The former seems preferable to me, because I feel the URL shouldn't change until the content does, but I've seen the latter more often (e.g. https://github.com/blog/760-the-tree-slider), so I'm wondering which is considered best practice.

With both your examples, when the user hits the back button the content isn't going to change! As you haven't got anything inside your state change handler.
Essentially you'll want to do this:
$('#link').click(function () {
History.pushState(null,null,'newUrl');
});
$('body').bind('statechange',function(){
$('#content').load(History.getState().url);
});
This will make it when you click a link, the state of your page will change, and that given the state of your page has changed, it will load in the new content. Hitting the back button in your browser, will also cause the state to change, and thus load in your new content.
Now here I have used History.js's statechange and History.getState().url instead of the native popstate and State.url as different browsers will fire the state change event at different times. For instance safari will the state change event at page load, where chrome and firefox don't - causing in safari your content to load twice. History.js provides a consistent API across all browsers, and if you wish even HTML4 browsers by falling back to hashes.