Develop Reference

Change page and change URL without refresh and keep content after refresh , like ReactJS website

I've tried to use jQuery's load() function to change/load content without reloading. That works, but the problem is: the URL keeps the same!
Even if i use history.pushState() to change URL, that does not solve the problem. Example:
with the famous window.history.pushState("object or string", "Title", "/new-url");
With that, I am creating a "fake URL" for each page - If I try to enter the website with this changed URL again, i get an error, basically the link does not exist;
If I refresh the page, i lost all Ajax loaded content - I need to keep the content when refresh;
When I click to change Ajax loaded page, keeps putting new links next to the previous one, as in the image sent;
I want to get this result: https://reactjs.org/ - transiting the pages, they do not reload and the link changes, it is updatable and the link works separately - how do i do it?
3) printscreen of my page and its url
Important: index.html, about.html and contact.html are existing files that will load with the jquery function below.
HTML:
<div class="navbar">
<div class="content">
<div class="logo">My logo</div>
<ul class="pages">
<li id="index">Index</li>
<li id="about">About us</li>
<li id="contact">Contact</li>
</ul>
</div>
</div>
<section id="page">
<div class="content">
<!-- PAGES LOAD HERE -->
</div>
</section>
<div class="footer">
<div class="content">
--Footer-- All rights reserved.
</div>
</div>
JS:
$(document).ready(function () {
$('li').on("click", function () {
$pageName = $(this).attr('id');
$('#page .content').load(`pages/${$pageName}.html`);
$('li').removeClass('active'); //only to remove the selection of actual page in CSS
$(this).addClass('active'); //only to add the selection of actual page in CSS
window.history.pushState("object or string", "Title", `pages/${$pageName}.html`);
})
})

you're describing "routing" which is the idea of URLs matching the content that is being display.
In jquery i'd recommend googling: jquery router or javascript router
IF you're writing other languages you can google [language] router.
most recently google is bringing up https://www.npmjs.com/package/jqueryrouter which is now forwarding to https://github.com/scssyworks/silkrouter
Once you choose a router, read the docs and come back with more questions.

What is the meaning of folder after hash(#) in the anchor tag?

In the Component Template section of this angular tutorial, they use the following code:
...
<ul class="phones">
<li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb">
<img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
</a>
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
...
In the anchor tag they use following value for href "#/phones/{{phone.id}}". As far as I know href="#" would jump to the top of page on click. And href="#mydiv" would jump to the element with id mydiv.
I've never seen something like href="#/folder1/myimg.jpg". Is it equivalent to href="/folder1/myimg.jpg"?

Putting the "#" symbol as the href for something means that it points not to a different URL, but rather to another id or name tag on the same page. For example:
Click to go to the bottom of the page
blah blah
blah blah
...
<a id="bottomOfPage"></a>
However, if there is no id or name then it goes "no where."
for more info you can see ...
What is href="#" and why is it used?
But in angularJS it is used for routing the request ... as angularJS provide very good support to built Single Page Application .. the parameter after # used to find out proper page to render ....
here is a nice example .. but you need time to understand it in depth ..

It seems like all anchor events will be interrupted by javascript and perhaps page will be loaded on background using ajax and browser's address line will change but it will not be cause for browser to reload the page. In HTML4 it was unable to change address line without reloading the page. So It's kind of workaround to:
Specify which page should be loaded by js.
Give the user ability to refer to specific page in future or share it.

i am struggling to add active class to my navigation menus with ajax

i used ajax on my site to load pages dynamically and add hashes to urls to preserve history and browser back button, and for this i am using jquery bbq plugin that is based on html5 history api and i have to say everything working fine except one issue and that is active class to current link.
i have two navigation main menu which is only on homepage and a second one is included on every page with php include function and its kind of a subnav of main menu.
as i said my problem is how to add active class to any link that is clicked so its look different from others and users should know where they are right now!
i tried different techniques but those only works with main menu and some kind of problem with secondary nav for better understanding please watch this video
as you can see in the video it works fine on main menu but only adds class to the secondary menu after click once on any link then click another link and then click back to original link, moreover when i refresh it removes the active class.
here is my code.
main menu
<div id="vertical-menu">
<!--<h2 class="logo">LOGO</h2>-->
<div class="logo">
<span class="arcd-male97"></span>
<h2 class="logo-name">AMR</h2>
<h6 class="logo-desc">ARCADE MUSIC REPOSITORY</h6>
</div>
<nav>
<ul id='menu' class="menu-items">
<li><i class="arcd-archive"></i></br>Browse</li>
<li><i class="arcd-music97"></i></br>Top albums</li>
<li></i></br>Top artists</li>
<li></i></br>Top lists</li>
<li></i></br>Charts</li>
</ul>
</nav>
</div>
secondary navbar
<div class="header_container" id="header_container"> <!--start header div-->
<div id="header_titles">
<h1 class="browse-heading">BROWSE</h1>
<h2 class="browse-subheading">GENRES & MOODS</h2>
</div>
</div> <!--end header div-->
<div id="tabnav_container"> <!--start tabnav_container-->
<div class="navtab_background"></div>
<nav>
<ul id="tabnav">
<li class="pop_tab"><i class="arcd-microphone352"></i>pop</li>
<li class="country_tab"><i class="arcd-guitarcountry"></i>country</li>
<li class="rock_tab"><i class="arcd-electricclone"></i>rock</li>
<li class="blues_tab"><i class="arcd-harmonicblues"></i>blues</li>
<li class="edm_tab"><i class="arcd-disc62edm"></i>edm</li>
<li class="jazz_tab"><i class="arcd-trumpet12jazz"></i>jazz</li>
<li class="rnb_tab"><i class="arcd-mic102"></i>r&b</li>
<li class="hip-hop_tab"><i class="arcd-musicplayer1hiphop"></i>hip hop</li>
<li class="reggae_tab"><i class="arcd-mic102"></i>reggae</li>
<li class="classical_tab"><i class="arcd-violin62classical"></i>classical</li>
<li class="folk_tab"><i class="arcd-guitar92folk"></i>folk</li>
<li class="soul_tab"><i class="arcd-mic102"></i>soul</li>
</ul>
</nav>
</div><!--end tabnav_container-->
and this is ajax script
$(function() {
// Keep a mapping of url-to-container for caching purposes.
var cache = {
// If url is '' (no fragment), display this div's content.
'': $('#default-homepage-contents')
};
// Bind an event to window.onhashchange that, when the history state changes,
// gets the url from the hash and displays either our cached content or fetches
// new content to be displayed.
$(window).bind( 'hashchange', function(e) {
// Get the hash (fragment) as a string, with any leading # removed. Note that
// in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
var url = $.param.fragment();
// Hide any visible ajax content.
$( '#main-container' ).children( ':visible' ).hide();
if ( cache[ url ] ) {
// Since the element is already in the cache, it doesn't need to be
// created, so instead of creating it again, let's just show it!
cache[ url ].fadeIn(1000);
} else {
// Show "loading" content while AJAX content loads.
$( '#loading' ).delay(500).show();
// Create container for this url's content and store a reference to it in
// the cache.
cache[ url ] = $( '<div class="bbq-item"/>' )
// Append the content container to the parent container.
.appendTo( '#main-container' )
// Load external content via AJAX. Note that in order to keep this
// example streamlined, only the content in .infobox is shown. You'll
// want to change this based on your needs.
.load( url, function() {
// Content loaded, hide "loading" content.
$( '#loading' ).fadeOut(1000);
});
}
})
// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).trigger( 'hashchange' );
});
thanks for any help!

I had problems with new browsers and found this, I think the only correctly working plugin: jquery address
and docs are here: http://www.asual.com/jquery/address/docs/#api-reference example usage is
$(function() {
//push it to history
$('#tabnav > li').click(function(e) {
e.preventDefault();
$.address.parameter("browse", $(this).attr("href"), false);
});
//catch changes
$.address.change(function () {
$.each($.address.parameterNames(), function (index, value) {
url = $.address.parameter(value);
$('a[href="'+url+'"]').addClass('active');
});
});
});

Angularjs: Load tabs based on active tabs but prevent rendering on visited tabs

I have a page having about 8 tabs and each tab has lot of html controllers(data bindings).so data rendering becomes slow.
So i used ng-if condition based on active tab which is found using ng-click on tab. The active tab is made visisble using css class.
So after using ng-if condition default tab gets loaded fast and on subsequent click on tab each tab gets loaded.But if i again click on the tab which was loaded previously then it again reloaded due to ng-if condition.
If i dont use ng-if condition based on active tabs then intial load of page is very slow but navigating between tabs will be faster due to entire tabs loaded at begining.But this method is not efficient as page load is slow at begining.
So i want to load tabs based on active tabs as shown below.But i dont want to reload or render the tab again for the tabs which are loaded once. So how it can be done?
<div class="claimant-data-nav " ng-controller="MyController">
<ul class="nav nav-tabs ">
<li ng-repeat="tabname in Mylist | unique:'TabName'" ng-class="{'active':tabname.TabName == 'Tab1'}">
<a data-target="#tab-{{tabname.TabName}}" data-toggle="tab" ng-click="activetab(tabname.TabName)">{{tabname.TabName}}</a>
</li>
</ul>
<div class="tab-content">
<a data-toggle="tab" class="mobile-tabs" data-target="#tab-{{tabname1.TabName}}" href="javascript:void(0)" ng-repeat="tabname1 in Mylist | unique:'TabName'">{{tabname1.TabName}}</a>
<div id="tab-{{tabname2.TabName}}" ng-class="{'tab-pane fade active in':tabname2.TabName == 'Tab1','tab-pane fade':tabname2.TabName != 'Tab1'}" ng-repeat="tabname2 in Mylist | unique:'TabName'">
<div ng-if="activetab == tabname2.TabName">
<!-- data binding logic here.It has lot of angularjs databindings.-->
</div>
</div>
</div>
</div>

Are you loading all the data from Ajax call or there are static templates that are being loaded. In either case, you need to maintain another scope map, which retains the state of tabs already loaded/clicked. Update your ng-if condition to execute a function which returns true or false. That function can first check for active tab and then check if it was loaded initially.
If the tab data was already loaded then its just a show/hide game, else show with Bindings and controller functions.

Activating URL from Another Page URL Using jQuery

Hi everybody and thanks for reading,
Basically, what I'm trying to do is activate a URL (which has a resulting jQuery plugin effect) from clicking a URL on a different page. As it stands, it does nothing other than link to the actual anchor tag without any effect. Weirdly though, if I refresh the page by pressing F5, this DOES activate the anchor tag with the proper effect.
Some information:
jQuery installation v1.5
jQuery plugin quicksand v1.2.1
jQuery:
$( document ).ready(function() {
if (window.location.hash.length > 0) {
$(window.location.hash).click();
}
});
HTML (initiating hyperlink with ID of 'ext'):
<li>Gallery
<ul>
<li>Exterior</li>
<li>Kitchen</li>
<li>Lounge</li>
<li>Bedroom</li>
<li>Bathroom</li>
<li>Hall</li>
<li>Scenery</li>
</ul>
</li>
HTML (targeted hyperlink with ID of 'ext'):
<ul class="gallerynav">
<li class="selected-1">All<span></span></li>
<li><a id="ext" href="#" data-value="exterior">Exterior<span></span></a></li></a>
<li>Kitchen<span></span></li>
<li>Lounge<span></span></li>
<li>Bedroom<span></span></li>
<li>Bathroom<span></span></li>
<li>Hall<span></span></li>
<li>Scenery<span></span></li>
<li>Misc<span></span></li>
</ul>
Thank you.