Develop Reference

Creating and structuring the index page

I have a test website www.lemonbrush.com is has the two menu items "Home" and "About".
When we click on the "About" menu, the About page is loaded dynamical, which is great, but when I type the About page's url directly http://www.lemonbrush.com/about.html into the address bar, my whole plan goes for six.
I need some guidance in how shall I structure and load the pages so that the whole header and navigation are included even when we use the direct URL in the address bar.
My skills are HTML and Javascript.
Please see the following screen shots.

When you're clicking the menu item you are updating the page with the data, but when you are going to the link directly you are just getting the data. one way around this is to have common elements for the page, ie. navigation menus, In a javascript file and then use a script tag with a link where you want it on the page.

so, since i thought it would be nice for my project, to have a usable browser history and bookmarkable subpages, i yesterday tried the approach from my comments of the OP.
step 1: change the anchors in your navigation bar to something like that:
home
about
needles to say, that they don't need to be inside the same parent element. those links could be anywhere.
step 2: remove the on click handler from your script, that reacts on the navigation bar clicks!
step 3: create a function, to listen to the onhashchange event. (this has to be done once, on the main html page)
//create a function for the onhashchange event
window.onhashchange = function()
{
//check if a location hash is used
if(window.location.hash != null)
{
//store current location hash in a variable
requestedPage = location.hash;
//remove the '#' from the location hash value
requestedPage = requestedPage.replace('#','');
//load content from subpage into your content frame
$('#contentFrame').load('./' + requestedPage + '.html', function( response, status, xhr )
{
//catch 'file not found' errors and load start page
if ( status == "error" ) {
$('#mainPanel').load('./start.html');
}
});
};
for your page, you have of course to adapt, use the correct selectors and the correct file names.
you then would call your page via www.mydomain.com, and every subdomain via www.mydomain.com/#subPage

jQuery Tabs - Don't Load Tab via # (tab content id)

I am running jQuery v2.1.1-beta1 & jquery-ui-1.10.4 with the following JS in my script file:
$(document).ready(function(){
$('.festival-list').tabs({
beforeActivate: function( event, ui ) {
ui.newTab.index();
}
});
};
I would like to solve the 2 issues:
Problem 1:
I have a series of tabs which work fine. I have a tab with an li with an id of Press (#press). If I load the url (http://website-url.com/news/#press). The content (tab block) shows properly.
However when this url is used as an href in a footer a link the page loads but fails to load the tab (#press) correctly. At present I have to click the footer link then the relevant tab to load the block, there is no automation.
Problem 2:
Secondly I would like to hash to the url, hopefully this will help UI during navigation.

The hash in the url only works on the initial load because the $.ready function is only run once (on page load). If you want to make sure the tabs & URL match each other after the page load, you could do something like
$(window).on('hashchange', function processHashChange(e) {
...
});
If you're looking for more of a site-wide solution, especially if you want the UI to do complex behaviors based on the URL hash (e.g. more than hide/show a tab in one part of a page), you might want to look into a proper JavaScript routing library like Crossroads.

document.location strange behaviour? / alternative jsTree link solution?

I've build up an menu with jQuery.jsTree and every item should contain a link to a specific page. With jsTree it isnt possible to click these links due to the prevention of the standard behaviour of
<a href="index.php?content=example" ... >....</a>
links (this is actually an example of one of my links. The index.php is my standard page and just the content will be replaced). In order to fix that I found this solution:
jQuery(".tree").bind("select_node.jstree", function (e, data) {
document.location = data.rslt.obj.children("a").attr("href");
});
This solution works partly for me, which means the clicked link works but in the opened window Firebug tells me that jQuery is not defined. Is it possible that on document.location the browser "forget" the library imports (as I mentioned I stay on the index.php page and just replace the content)?
and the other question is: does anyone may know a better solution for the enabling of the links in jsTree without edit the library itself ?
thanks in advance!

If your links at first look like:
<a href="index.php?content=example" ... >....</a>
And you want to load the content into a div with ID maincontent
You can do something like:
$(".tree a").each(function(){
var $this = $(this);
$this.click(function(){
$("#maincontent").load($this.href, function(){
// this callback functions fires once load is complete,
// incase you need to do post-load operations
});
return false;
});
});
This will byposs loading the new page as a normal link would, and fetch the page via AJAX and load the returned HTML into the DIV with ID maincontent.
Code is untested, but I've done this in the past so should work as is.

Data transition = Slide not working -dynamic list

I am new to Jquery mobile.
I am trying to get Sliding effect when i navigate to another page say # display2 from thie below code.
but i am not able to get slide effect.
If I remove the rel="external" i am able to slide but on the #display2(page whihc i would navigate to),the query string values are returned as null.
so if i put rel="external" the parameters are passed to #display2 but slide transition not working.
if i remove re="external" slide works but the querystring parameters are returned null.
can you please let me know is there a way where both of them work together.
('#display').on('pagebeforeshow', function () {
// $(this).find('[data-role=header] .ui-title').text(json.getLOBXMLResult[currentItem].FolderName);
$.ajax("AppstoreWS.svc/getLOBXML", {
beforeSend: function (xhr) {
$.mobile.showPageLoadingMsg();
},
complete: function () {
$.mobile.hidePageLoadingMsg();
},
contentType: 'application/json',
dataType: 'json',
type: 'GET',
error: function () {
//alert('Something awful happened');
},
success: function (data) {
result1 = data.getLOBXMLResult;
$('#categoryList').children().remove('li');
$.each(result1, function (index, output) {
$('#categoryList').append('<li>' + output.FolderName + '</li>');
});
$('#categoryList').listview('refresh');
}
});
});

Part 1 - why rel=external worked & other options
The reason why rel=external works with no transition is because this expects the browser to open an external page and therefore, disable ajax. To counter-effect this, you've got numerous options :
By using Single page template
You could make your two pages into a single page. This is called a single page template and your second page's reference would be #page2 (or any name you'd give as the ID). This is how it'd look like :
<div data-role="page" id="page1">
<!--Stuff in page 1-->
</div>
<div data-role="page" id="page2">
<!--page 2 stuff-->
</div>
Advantages
The DOM can leverage the power of ajax driven navigation.
This would make partial loading, script loading easy, as you'll need to refer all this only once.
Data-transfer between pages is very simple. You'll just have to store the data in you need in a global variable or in the data property of the #page2, and retrieve it in the pageinit or pageshow (or any event) of the second page.
Transitions, etc will work.
There will be no page refresh.
Disadvantages
If the HTML content of the two pages are large, it'll be difficult for maintenance.
By using rel=external
As you might have seen, rel=external can be used only when a page refresh is absolutely needed. Its upto the user's choice. If an a tag is marked with rel=external it means the browser will treat it as an external link, and will ignore jQuery Mobile's ajax navigation system.
By referring all the scripts of page 2 in page 1
Generally, to be able to use page transitions, you must use ajax system of navigation in jQM. So the general behaviour of ajax is as follows :
page1 will request for page2 in page2.html.
The <body> of page2.html alone is taken from page2.html.
The <head> section( which might contain your scripts, which might have your query-string logic) will be ignored.
So to change this, you can refer to page2's scripts in page1.html's head so that these scripts will be loaded and ready when jQM's ajax system pulls the body of page2.html.
<script src="jqm.js"></script>
<script src="page1.js"></script>
<!--page 2 scripts-->
<script src="page2.js"></script>
Advantages
Your transitions will be working properly.
The common scripts will not be referred to multiple times, hence much faster loading times.
Query strings will also work
Disadvantages
If the two pages have very little in common, you'll end up having unwanted scripts in your first page.
What if you have more than two pages? What if you have 10 pages? Will you refer to all 10 pages' scripts in page1. I dont think thats the way.
By referring to page2 scripts inside "data-role=page" section of page2.html (recommended)
This will bring the scripts along with the page when ajax brings it in. This will also work with query strings. This will look something like this :
<div data-role="page" id="page2">
<script src="page2.js"></script>
<!--- your html-->
</div>
Advantages
The scripts pertaining to a particular page are restricted to within that page.
Transitions will work.
Query strings will also work
Part 2 - alternative to query string
The reason I'm saying this because Query strings are archaic technology, because at that time, there was no way to store to data. They're also insecure because user can see the data you send over the URL. You must consider using something like localStorage. I'm not saying you must NOT use query strings. It's just that there are better options available for mobile data storage. See this link for more info about how you can use this localStorage. Also, see this for all the options you have. Now, looking at your query string :
platform=' + output.FolderName + '&sid=test
This could easily be made into an object. So in the click function of the anchor tag inside <li>,
$(document).on("click", "li a", function(e) {
//stop default action.
e.preventDefault();
//take the href; Im assuming its page2.html?platform=outputFolder&sid=test
var params = this.href.split("?");
//now params[0] = page2.html
//param[1] = platform=outputFolder&sid=test
//set this in localStorage
localStorage["page2params"] = param[1];
//change to page2.html
$.mobile.changePage("page2.html", { transition : slide });
})
Then, in the page2.html's pageinit method, you could retrieve it for your use :
//assuming you have a page with page2 as id in page2.html
$(document).on("pageinit", "#page2", function() {
var params = localStorage["page2params"];
//do anything you want with params.
});

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