How to do a partial page refresh with Javascript/jQuery - javascript

I have two separate navigable areas on my site. The lefthand column has its own navigation, and the righthand column (the main content area) has its own set of links:
I'd like to be able to press on a link on the left-hand side (like "Resume", "Email", etc.) and only load the new page within that lefthand sidebar (without refreshing the entire browser window).
I am using divs to load the right side's (main content) navigation, and the entire sidebar's content:
<script>
$.get("navigation.html", function(data){
$(".nav-placeholder").replaceWith(data);
});
$.get("sidebar-content1.html", function(data){
$(".sidebar").replaceWith(data);
});
I'm doing basically the same thing for the lefthand sidebar to load its three links:
<script>
$.get("sidebar-navigation.html", function(data){
$(".sidebar-nav").replaceWith(data);
});
</script>
When I press on a link that's inside the left sidebar, how do I just refresh that pink area?
Thanks for any help!

If I understand your question correctly, then you might find JQuery's .on() and .load() functions useful here.
The .on() method allows you to bind event handlers to DOM elements that are not currently present in the page, which is useful in your case seeing that the contents of navigation.html are dynamically added to the page.
The .load() method is a helper that basically achieves what you're doing with $.get() and $.replaceWith() via a single method call.
For details on how these can work together, see the comments below:
/*
Use $.on() to associate a click handler with any link nested under .sidebar-nav,
even if the links are dynamically added to the page in the future (ie after a
$.get())
*/
$('body').on('click', '.sidebar-nav a', function() {
/*
Get the href for the link being clicked
*/
var href = $(this).attr('href');
/*
Issue a request for the html document
or resource at href and load the contents
directly into .sidebar if successful
*/
$('.sidebar').load(href);
/*
Return false to prevent the link's default
navigation behavior
*/
return false;
})
Hope that helps!

First of all you don't need to use replaceWith method of jQuery, that is for returning the replaced elements which you don't have any in this example. You can use $(".sidebar").html(data)
For the links to load in another div, you could do something like this right after you load navigation links.
// this will interfere all the links would load inside sidebar-nav div
$("div.sidebar-nav a").click(function(event) {
var urlToGet = $(this).attr("href"); // gets the url of the link
$.get(urlToGet, function(data) { // loads the url
$("div.main-content").html(data); // puts the loaded url content to main-content
});
event.preventDefault();
});

You can use like below example.(JQUERY)
<div id="div3" class="left">
<button onclick="refresh()" id="refresh">
Refresh
</button>
</div>
<div id="div4" class="right"></div>
var content="<h1>refreshed</h1>"
$(document).ready(function(){
$('#refresh').click(function(){
$('#div3').html(content); //it will just overrides the previous html
});
});

Related

Is it possible to make a link to a one page webpage to open and position itself at a specific article?

Is there a way to open a specific artical via an external link and focus on it when the links open on a one page wepage?
I have a webpage that shows content as you click on links by hiding and showing the divs. What i want is to make an external link to my webpage in the form of mywebpage/(div's name) and have the link open my page but showing the content of that div right away, instead of its usual opening content you would get when clicking on just the ordinary mywebpage link.
Is it possible? And how?
Short answer: yes.
Long answer: You will have to examine the URL's hash on page load and manually translate that into hidden or shown divs (or other positioning).
While you're at it, you could include browser history support when your divs are opened and closed.
Pulling apart what I did for http://www.tipmedia.com (Segment starts on line 322 of the page source)
//on page ready
$(document).ready(function() {
//examine hash
if(window.location.hash == "#thanks") {
//scroll to an anchor tag, slight delay to insure correct page height
setTimeout(function() {
$('html,body').animate({scrollTop:$("#contact").offset().top}, 0);
},500);
//hide and show necessary divs
$("#contactThanks").css({"display":"block"});
$("#contactIndex").css({"display":"none"});
$("#contactGeneral").css({"display":"none"});
$("#contactMeeting").css({"display":"none"});
$("#contactCareers").css({"display":"none"});
//clear the hash (not necessary for your use)
window.location.hash = "";
}
}
The history stuff is easy too, I used Modernizer.js for the best cross browser support, but it looks like this (non-Modernizer use is very similar)
//during the hide/show of new content...
//if history is available
if(Modernizr.history) {
//this data is whatever it is you wish to save
lastPageState = { div:divName, pos:amount, page:lastLoadedPage };
history.pushState(lastPageState, divName.substring(1,divName.length-6), "index.html");
}
//...
//then later, the popsate event handler
window.onpopstate = function(event) {
//examine event.state and do whatever you need to
//example segment starts line 989
//Whatever data you saved would be read here and you would do the appropriate action,
//hiding or showing divs, reloading AJAX content, etc.
}
Yes, you can use an anchor link.
So in your target page name the div with an id,say div id="target".
Then in the referring page use a link in this form
Referring Page:
GO to Target Info...
Target Page:
<div id="target">
...content...
</div>
FYI-"target" is just an example name, it could be anything...

Loading only the middle section when a tag is clicked

How do most websites load only the middle section of the page when you click on a link (a-tag)? If this is done through AJAX then how does that change the URL to the given href in the a tag? I know I can use the .load function, but this doesn't change the URL to the one given in the href of the link.
If on a link click content is loaded into some interior section of a website, it's usually fetched asynchronously by means of AJAX and injected into the DOM structure. The URL of the site does not change during this process.
Consider the following example with three different links. Using jQuery, for each of the links the default navigation is disabled and instead content is injected into the main content div.
HTML
<nav>
Link 1 |
Link 2 |
Link 3
</nav>
<div id="main"></div>
JavaScript
$(document).ready(function() {
$('nav a').click(function(event) {
event.preventDefault(); // Prevent the default link navigation
// This is the point where you could fetch content (for instance
// from the href of the clicked link). For this example we just
// generate a string containing the href.
var content = 'Content for ' + $(this).html();
$('#main').html(content); // Inject the content
});
});
Check out the live demo on JSFiddle.

Fade in different section with static header and footer using javascript?

i was wondering how to create a dynamic website where the page layout is as follows:
header, section, footer
The header and footer would always be static and when the user clicks a part of the nav e.g About Us (within the header) the section in the middle dynamically changes and fades in the About Us section.
I would like to use pure javascript if possible and without it being part server-side, I assume you would give the sections ID's and in the javascript "onClick" of the nav link, the one section would display:none and another section would display in replace of it.
I found a similar example on this website: http://www.templatemonster.com/demo/44858.html
What is the easiest way to create this effect? I have a VERY brief idea but how could you go about this?
If anyone could include a jsfiddle example, would be much apprieciated
What you are looking to do is called pjax. Pjax uses XML Http requests(ajax) to load a specific piece of content into a placeholder like you are trying to do.
Someone clicks to a new page.
Javascript requests this page from the server.
Once loaded, optionally fade out the old content.
Replace with the new content and optionally fade it in.
Use pushstate to add a state to the browser history. This allows the back and forward buttons to work.
Here is a pjax library that is handy for doing this easily across new and old browsers and has a good explanation:
https://github.com/defunkt/jquery-pjax
It would not be a good idea to include all of the content on one page with display:none because then it will still need to be downloaded by the browser even if the user never views it. Nevertheless, here is a JSfiddle showing this approach which is close to what you described:
http://jsfiddle.net/Tb4eQ/
//Wait for html to be loaded
$(document).ready(function(){
//Store reference to frame to load content into in a var, as well as the content to load in.
var $content = $('#div_1');
var $frame = $('#my_frame');
//Bind an event handler to the click event of something
$('#press').on('click', function(){
//fade out the frame, swap in the new content, and fade it back in.
$frame.fadeOut('fast', function(){
$frame.html($content.html()).fadeIn('fast');
})
});
});
You can use the jQuery method .load() which loads data from the server and place the returned HTML into the matched elements. Also the .toggle() method allows you display or hide elements.
Consider the following example: Suppose we have a page named index.html ...
<header>
<nav>
<ul><li id="nav-about">About us</li></ul>
</nav>
</header>
<section>
<article id="dynamic-viewer">
Dynamic content will be placed here!
</article>
</section>
<aside>
<div id="loader" style="display:none">
<img src="http://www.ajaxload.info/images/exemples/24.gif" />
</div>
</aside>
... and we have another file named about.html which is just a view:
<div>
<h2>About us</h2>
<p>This content is placed dynamically into #dynamic-viewer</p>
</div>
Now, I will load the content of about.html into the content wrapper in index.html using the jQuery.load() method.
//Click handler to load the "about" view
$(document).on("click.about", '#nav-about', function() {
fnShowLoading(true);
//Loads the content dynamically
$('#dynamic-viewer').load('views/about.html', function() {
fnShowLoading(false);
});
});
//Shows or hides the loading indicator
function fnShowLoading (show) {
$('#loader').toggle(!!show);
}
Actually, the only lines that matters here are:
//loads the content dynamically
$('#dynamic-viewer').load('views/about.html', function() { });
//shows or hides the loader section
$('#loader').toggle(!!show);
You could try to use Ajax calls to partially refresh parts of the page or just load the whole thing and let jQuery handle the hiding and showing of elements on click events.
http://www.w3schools.com/ajax/
http://api.jquery.com/hide/

Javascript: history not loading page

I have a menu that loads a new html file in a div. The loading is done by a click event attached to the menu's <a> tags. The loading works well and I add the new load to the history by constructing a new href with a hash tag.
But when I use the back button, the URL is updated correct in the browsers address field, but the page is never loaded. If I focus the address field and press enter it loads.
This is the javascript located in the mypage.html header.
<script type="text/javascript">
$(document).ready(function() {
// replace menu link click
$(".right-menu a").live('click', function(ev) {
ev.preventDefault();
ev.stopPropagation();
window.location.href = $(this).attr('href');
$("#content-right").load('mypage'+window.location.hash.substring(1)+'.html');
return false;
});
// If page loads, load the content area according to the hash.
var hrtag = window.location.hash.substring(1);
if(hrtag=="")
hrtag='about';
$("#content-right").load('mypage'+hrtag+'.html');
window.location.hash = hrtag;
});
</script>
This is the menu
<ul class="right-menu">
<li>About</li>
<li>Screens</li>
<li>License</li>
<li>Download</li>
<li>Donate</li>
</ul>
If I load the page as mypage.html, the javascript will append the hash #about and load the div id "content-right" with mypageabout.html
If I click the menu, for example download, it will load the div id "content-right" with mypagedownload.html
In both cases, the window.location will be set to the hash version of the page, mypage.html#about and mypage.html#download to register them in the history.
If i click the menu in the following order; license, about, screens and then click the browser's back button, the address field will show; mypage.html#about, mypage.html#license but it will NOT load the pages!?!
The URLs are obviously in the history, but they don't load.
Any clue to what might be wrong here?
// Thanks
EDIT - The solution
Thanks to Andres Gallo's article I came up with this solution:
<script type="text/javascript">
$(document).ready(function() {
// Make sure the page always load #about
LoadIDWithURL('#content-right','myPageAbout.html');
window.addEventListener('hashchange',function() {
if (window.location.hash != "") {
// We have a hash, use it!
LoadIDWithURL('#content-right','MyPage'+window.location.hash.substring(1)+'.html');
} else {
// We do not have a hash, force page reload!
window.history.go(0);
}
});
});
// Load the targetID with the URL loadURL.
function LoadIDWithURL(targetID,loadURL) {
$(targetID).load(loadURL);
}
</script>
I wrote a very detailed article on this exact topic. It explains how to build exactly what you are trying to do.
Furthermore my article also explains how you can pass parameters in your links to have javascript do special things
Here is a link to the article http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/
The best method is to attach your functionality to your hashchanges rather than to you click events. This allows any changes in history to take advantage of your javascript functionalities.
This is normal behaviour when navigating between pages which differ only in their hash. You have two options:
Use the hashchange event, or an emulation of it, to detect when the user changes the hash by navigation back or forward and update the page appropriately
Use the HTML5 history API.
you can try with hashchange
$(function(){
$(window).hashchange(function(){
// some event
})
})

Loading an external .htm file into a div with javascript

So I got this code
Javascript:
<script type="text/javascript">
$(function(){
$('.ajax') .click(function(e){
e.preventDefault()
$('#content').load( 'file.htm' )
})
})
</script>
html:
Link
it works perfectly in firefox, but nothing happens when I click the link in chrome and IE simply opens a new window with the file. any advice?
I am not a coder of any sort, and I know there is more than one way to make this work.
This is what worked for me for MY situation.
I had a working site but with A LOT of code / DIV content all in one page and I wanted to clean that up.
I hope this Helps someone else!
I have been searching for this solution for quite some time and I have run across many examples of how it can work in different instances.
My scenario was as follows:
I have a photography website that uses a series of DIV tags containing the various "pages" so to speak of the site.
These were all set as:
<div id="DivId" style="display:none"></div>
The following script in the head of the page:
$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("slow").siblings().hide("slow");
});
});
</script>
and called using the anchor links like this:
HOME
Where name was the name of the DIV to be called.
Please note the DIV will be called inside the parent container DIV.
Lastly and most importantly for this particular question and scenario, the DIV were all placed on the page as shown above.
Each div content was created just as if it were within the DIV tags but minus the opening and closing DIV tags and then saved as a separate .txt file, and called by placing this is the head of the parent page:
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js">
and
$(document).ready(function() { // this runs as soon as the page is ready (DOM is loaded)
$("#DivName") // selecting "div" (you can also select the element by its id or class like in css )
.load("PathToFile.txt");// load in the file specified
$("#AnotherDiv").load("AnotherFile.txt");// Additional DIV can be added to populate DIVs on th eparent page.
});
Change the link to href="#" or "javascript:void(0);return false;"
<a class='ajax' href='#'>...</a>
The loading logic is all in your ajax call. But, you have also a link which points to the file, too.
So, it seems that some browsers give different priorities on how the click is handled.
Anyway, links that do something other than changing page (f.ex. executing js) shouldn't have an explicit HREF attribute other than something that "does nothing" (like above)
I believe the problem is that the script loads before the document is loaded.
try this:
$(document).ready(function (){
$('.ajax').click(function(e){
e.preventDefault()
$('#content').load( 'file.htm' )
});
});
I am not sure, but i can not see any other problem.

Categories