We Keep Coding

Change html content and url without reloading the page

I see many websites such as gitHub changing it's html content and URL without refreshing pages.
I find one possible way to do this in HTML Histroy API.
Here is the code.
HTML
<div class="container">
<div class="row">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="row">
<div class="col-md-6">
<div class="well">
Click on Links above to see history API usage using <code>pushState</code> method.
</div>
</div>
<div class="row">
<div class="jumbotron" id="contentHolder">
<h1>Home!</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
home.html
This is home page
about.html
This is about page
contact.html
That one is content page
JAVASCRIPT
<script type="text/javascript">
jQuery('document').ready(function(){
jQuery('.historyAPI').on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
// Getting Content
getContent(href, true);
jQuery('.historyAPI').removeClass('active');
$(this).addClass('active');
});
});
// Adding popstate event listener to handle browser back button
window.addEventListener("popstate", function(e) {
// Get State value using e.state
getContent(location.pathname, false);
});
function getContent(url, addEntry) {
$.get(url)
.done(function( data ) {
// Updating Content on Page
$('#contentHolder').html(data);
if(addEntry == true) {
// Add History Entry using pushState
history.pushState(null, null, url);
}
});
}
</script>
This code is working fine even you go back or forward in browser.
But the problem is that when you refresh page it only shows the file which is being refreshed. For example, if you refresh the about.html then only the following will show: This is the about page.
Unlike the gitHub it can't show the complete page. As you see in gitHub, even you refresh a page it will show the page same as how it was before refreshing.
How can I do that?
Thanks...

You may use Routie or Director to do the routing. And within their callback functions write the code to update the part of your HTML page, for this you may use Fragment.js.

You can change DOM anytime you want without loading the page.
Use fundamental XMLHTTPRequest or Ajax to contact the server without refreshing the browser.
There are many frameworks which offer convenient url routing which can change content automatically without page refreshes. Angular JS is my favorite such framework which offers great routing capability among many other things.

You have to check/set the value of your variable on the event onload of the page.

Your code does not work - when you click on a particular link the page does refresh. correct me if i am wrong.

How do I load my java event using from an external link?

I have a page with a visiual menu system that when clicked fills the designated area with an image and approriate text. Below I have included an example of the containers and script used on the page.
There are around 20 of them in all and each has its own individual # tag. If I try to reference the page via a link like the one below. It doesn't change the content of the page to match the unique # tag. I think this is due to the script being a click event only. Can someone give me an idea of how fix this so I can use this link externally on other html pages within the site and have the appropriate # information show up.
http://jets.chiefaircraft.com/skymaster/available-models.html#af816sw
The menu html:
<div class="box">
<a href="#bh248" class="scheme-links" data-scheme="bh248">
<div class="boxinner">
<img src="http://cdn1.chiefaircraft.com/skymaster/images/gallery/bae-t1/BH248.jpg" alt=""/>
<div class="titlebox">BAE Hawk T-1 - In Stock<br />RAF 2004 Scheme
</div>
</div>
</a>
</div>
The click event:
$(document).ready(function(event){
$('.scheme-links').click(function(event){
var scheme = $(this).attr('data-scheme');
$('.gallery').hide(event);
$('#gallery_' + scheme).show(event);
});
});
The event references this information to fill the selected areas:
<div id="gallery_bh248" class="gallery">
<div class="gallery-image"><img src="http://cdn1.chiefaircraft.com/skymaster/images/gallery/bae-t1/BH248.jpg" alt=""/></div>
<div class="gallery-info">
<div class="gallery-text">
<h2><u>Skymaster PRO ARF Plus</u><br />
BAE Hawk T-1:</h2>
<h3>RAF 2004 Scheme (BH248)<br />
In Stock: Only $5,199.50 + Freight</h3>
</div>
<div class="gallery-upgrade">
<p><b>Includes the Following Upgrades:</b></p>
<ul><li>Jet Airframe: BH248 RAF 2004 Scheme</li>
<li>Scale Landing Gear: AP921</li>
<li>Speed Brake Assembly Factory Installed</li>
<li>Landing Gear & Doors Factory Installed</li>
<li>Cylinder Set for Gear Doors: AP925</li>
<li>Cockpit Details w/o Pilot: AP927</li>
<li>Exhaust Pipe (P120-P160): AP923</li>
<li>Complete Air Kit: AP921K</li>
<li>Kevlar Fuel Tank: AP922</li>
<li>Hardware Kit: AP924</li>
<li>Wing Bag</li></ul>
</div>
</div>
</div>

Is what you want?
Once the website loads, you can recognize what hash came with it, and make a proper function to load it.
Please elaborate your code further so if this isn't the correct answer, I can be of help/edit.
$(function()
{
// Moving page to hash on open
var hash = null;
if(window.location.hash)
{
hash = window.location.hash;
window.location.hash = '';
window.location = hash;
}
});

image not loaded after <img..> appended with jquery

My website contains the following code:
<ul class="thumbnails1">
<li>
<img src="~/Images/man1.jpg" alt="n/a"/>
</li>
</ul>
<input type="button" value="See More" onclick="OnSeeMore()"/>
<script type="text/javascript">
function OnSeeMore() {
$('.thumbnails1').prepend('<li><img src="~/Images/man1.jpg" alt="n/a"/></li>');
}
</script>
The original image appears well, but when i click "See More" button, I can see the list item is dynamically added, but the image shows the "alt" text n/a instead of the "man1.jpg" image. so what am I doing wrong?
I basically try to copy google's image search behavior, by showing only some of the images in the DB and then show more upon request.

~/Images/man1.jpg is a server-side relative path. If you are adding the node on the client side, you need to use /Images/man1.jpg assuming the Images folder is in the root folder for your site.

The relative path:
<img src="~/Images/man1.jpg"
Should be "resolved" on the server, if you add it on the client as is, the path is invalid.

Why does your URL include a ~? It should not use some linux specifc path since that is not a URL. It should be the path to get to it from the webserver, not the file system.
<!-- Relative -->
<img src="./Images/man1.jpg" alt="n/a"/>
<!-- Absolute -->
<img src="/Path/to/my/directory/Images/man1.jpg" alt="n/a"/>

batman.js data-route adding characters to url

I have a html template doing this.
<ul id="things">
<li data-foreach-thing="Thing.all" data-mixin="animation">
<a data-route="routes.things[thing].new" data-bind="thing.id"></a>
</li>
</ul>
The data-route attribute is returning a url like this:
http://localhost:3000/#!/things/new
I don't know why it is adding the #!
I'm using batman.js 0.9 with rails 3.1
Any help figuring this out is be appreciated, thanks.

Here's a good description of hash bang urls hash bang urls. This is normal for batman to do this (pretty much all javascript frameworks do this). You can enable "pushstate:true" which will disable it (however it will fall back to hash bang if you're on a legacy browser).
Regarding your batman.js view not being rendered, I ran into a similar issue. I didn't have an error in my chrome console, however the view wasn't being rendered. You need to make sure you have a data-yield attribute for your view to attach to.
For example:
<div id="container" data-yield="main">
</div>
Excerpt from batman.js github:
Now when you navigate to /#!/faq/what-is-art, the dispatcher runs this
faq action with {questionID: "what-is-art"}. It also makes an implicit
call to #render, which by default will look for a view at
/views/app/faq.html. The view is rendered within the main content
container of the page, which is designated by setting
data-yield="main" on some tag in the layout's HTML. You can prevent
this implicit rendering by calling #render false in your action.
Are you trying to show a link to the show action for the thing? It should look like this if you are:
<ul id="things">
<li data-foreach-thing="Thing.all" data-mixin="animation">
<a data-route="routes.things[thing]" data-bind="thing.id"></a>
</li>
</ul>
Here's an example of some code I'm using (the order of the data- attributes doesn't matter):
<div data-foreach-section="sections" data-mixin="animation">
<a data-bind="section.SectionId" data-route="routes.sections[section]"></a>
<p data-bind="section.Name"></p>
</div>

Cannot a Back button to nested list (Latest Version)

I'm having problems trying to get the back button to show in a nexted list. I can see that the same is happening to your demo's here:
http://jquerymobile.com/test/#/test/docs/lists/lists-nested.html
You can see the problem here:
http://jquerymobile.com/test/#/test/docs/lists/lists-nested.html&ui-page=Animals-8
or just click any list.
Here is my actually issue:
<ul data-role="listview" data-inset="true">';
<li data-icon="info">
<h3 class="ui-li-heading">Heading here</h3>
<p class="ui-li-desc">Author: <strong>some author</strong></p>
<p class="ui-li-desc">Description: <strong>some description</strong></p>
<ul data-role="listview" data-inset="true" data-add-back-btn="true">
<li>sometthing here</li>
</ul>
</li>
</ul>
Is this a bug or I'm I forgetting something?
Thanks
UPDATE: Another example:
<ul data-role='listview'>
<li>
<li><div>Some Text</div><p>ddd</p>
<ul data-role='listview'>
<li>
some text here
</li>
</ul>
</li>
</li>
</ul>
No back button. How do I make the back button appear?

To reenable the back button simply add data-add-back-btn="true" to the page container:
Related: JQuery Mobile Latest 03 June 2011 Version - No back button
You are using the tests and not the demo, so I guess this would be the latest (or close to) build.
http://jquerymobile.com/test/#/test/docs/lists/lists-nested.html
http://jquerymobile.com/demos/1.0a4.1/#docs/lists/index.html
UPDATE:
http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Adding Back buttons
jQuery Mobile has a feature to automatically
create and append "back" buttons to any header, though it is disabled
by default. This is primarily useful in chromeless installed
applications, such as those running in a native app web view. The
framework automatically generates a "back" button on a header when the
page plugin's addBackBtn option is true. This can also be set via
markup if the page div has a data-add-back-btn="true" attribute.
If you use the attribute data-rel="back" on an anchor, any clicks on
that anchor will mimic the back button, going back one history entry
and ignoring the anchor's default href. This is particularly useful
when linking back to a named page, such as a link that says "home", or
when generating "back" buttons with JavaScript, such as a button to
close a dialog. When using this feature in your source markup, be sure
to provide a meaningful href that actually points to the URL of the
referring page (this will allow the feature to work for users in
C-Grade browsers. Also, please keep in mind that if you just want a
reverse transition without actually going back in history, you should
use the data-direction="reverse" attribute instead.
Maybe try:
$(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.addBackBtn = true;
});