I have the following js:
$(function() {
$('#header a').click(function() {
$('#contentspace').empty();
// $("#contentspace").load(eventUrl + "#content");
$("#contentspace").load(this.href, + ' #content', function(response){
console.log($('#content', response).html())
event.preventDefault();
});
});
});
and html:
<div id="header" class="ui-corner-all ui-buttonset">
<a title="index" href="index.php" ><span>home</span></a>
<a title="code" href="code.php" ><span>code</span></a>
<a title="design" href="design.php" ><span>design</span></a>
<a title="illustration" href="illustration.php" ><span>illustration</span></a>
<a title="writing" href="writing.php" ><span>writing</span></a>
<a title="links" href="links.php" ><span>links</span></a>
<a title="about" href="about.php" ><span>about</span></a>
</div>
I use this to load sections of web pages into #contentspace, and give my practice site an ajax kind of feel. The problem arises when the user clicks to go back to the main page, and the main page is loaded inside itself. I thought I might've fixed it by adding - ' #header', to the .load argument, but this doesn't seem to do anything, and even if it had I can see how it would create other problems.
Summary: I'm having problems making an effective landing page with jquery. the home page is loading it's header and footers into itself.
Maybe you could separate the main page into something like index.html and home.html, index containing only the header and footer and the other containing only the content of the main page.
Then you could have index do the .load with 'home.html' once when the page is initially loaded (e.g. just before you attach the click handlers to the nav).
Related
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.
I am trying to on the click of a link display a different page inside a box using jquery (.load). I'm new to programming and web design so please make answers as simple as possible.
Here is my index.html code
<nav id="navBar">
Home
About
Contact
Shop
</nav>
<div id="loadZone"></div>
and my JavaScript
$(document).ready(function(){
$("#loadZone").load("homeLoad.html");
});
function homeLoad() {
$('#loadZone').load('homeLoad.html');
}
function aboutLoad() {
$('#loadZone').load('aboutLoad.html');
}
loading the home page (homeLoad.html) works fine
when I repeatedly spam the link for about you can occasionally see the content of aboutLoad.html
Any help appreciated
Thanks
A simpler method might be to store the urls as data attributes on the links, then when the user clicks a link get the stored url and load it. To load the initial content, trigger a click on it's link on load. Something like this would work:
Here is a working Demo
<nav id="navBar">
Home
About
Contact
Shop
</nav>
<div id="loadZone"></div>
<script>
$(document).ready(function(){
$('.navLink').click(function(e){
e.preventDefault;
$('#loadZone').load($(this).data('url'));
});
$('.navLink:eq(0)').click();
});
</script>
This is the first page where I try to open the detail.html;
<a href="detail.html" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
I have problems to load the scripts on detail.html (after href link is clicked on first page)
Here is my script in header of details.html(the page I go after href is clicked on first page), Problem is I can NOT get the console test print, that function is NOT called when details.html page is loaded. It only hits after I manually refresh the page
<script>
$(document).bind("pageinit", function(){//or $(document).ready(function ()
console.log('test');
});
</script>
To understand your problem I think you need to first understand how jQuery Mobile "loads" external pages. By default when you click a link to a separate HTML page JQM loads the first data-role="page" on that page and attaches it to the DOM of the first page, the thing is JQM only loads that page div and not any scripts etc. that are outside that container.
If you want to run code for a second page, you either need to include that script on your first page and use event delegation (since the second page is not part of the DOM yet) or include the script withing the second page's date-role="page" wrapper.
Case in point in your case if you want to run code for your details page you either need to include the script on your first page for example assuming you have a div on your detail.html page like the following
<div id="details" data-role="page"> ..rest of your content
</div>
Then on your first page you could do the following
$(document).on('pageinit', '#details', function() {
console.log('test');
});
Or alternatively you can include a script tag withing your "details" page wrapper.
EDIT:
As I mentioned this is the default behavior, however if you wish you can tell jQuery Mobile to do a full post when loading a second page by adding in data-ajax="false" or rel="external" to your link for example
<a href="detail.html" data-ajax="false" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
The difference between data-rel="external" and data-ajax="false" is if the second page is basically semantic in that data-rel="external" should be used if the second page is on a different domain.
I made you an working example: http://jsfiddle.net/Gajotres/Eqzd2/
$("#second").live('pagebeforeshow', function () {
console.log('This will only execute on second page!');
});
You can use on instead of live if you are using last version of jQuery.
Also take a look at my article about event flow in jQM page transition: https://stackoverflow.com/a/14010308/1848600
I have built a site that uses an index page which has a containing div for loading each page's content into.
At first I was including the external js files and doing the initialisations inside each individual page but 8/10 times the page was loaded, the elements relying on plugins being initialised didn't work but would upon a refresh.
Yesterday I changed the structure so that all external files and all initialisations were done in the index page rather than each individual page.
Now, everything seems to work first time but the second time the page is loaded via ajax the plugins aren't initialised.
Here is how I am doing it in my index page. (excuse inline js on the nav - wasn't me!)
// js files included at the top
<div id="navbar">
<ul class="clearfix">
<li>
<a id="myoeHome" onclick="loadContent('/myoe/amb-home.php')" href="javascript:void(0)"> Home </a>
</li>
<!-- some more li a's in the nav bar -->
</ul>
</div>
jQuery
function loadContent(url) {
// #content is the containing div where each page is loaded into
$("#content").load(url, function() {
if (url == '/myoe/amb-home.php') {
// initialisations etc. for the particular page
}
});
}
Any ideas on what I could do to improve the structure? There are even functions inside the loadContent function because I just moved all js for each page into its own if block.
this is my solution. Hope it helped.
HTML
<div id="navbar">
<ul class="clearfix">
<li>
<a id="myoeHome"> Home </a>
</li>
<!-- some more li a's in the nav bar -->
</ul>
</div>
<div id="content"></div>
JS
$("#myoeHome").live("click",function(){
loadContent('/myoe/amb-home.php');
});
function loadContent(url) {
// #content is the containing div where each page is loaded into
$("#content").load(url, function() {
if (url == '/myoe/amb-home.php') {
// initialisations etc. for the particular page
}
});
}
I have this page articles
In this page i have nav links on the left, and content loading on the right.
function showonlyone(thechosenone) {
$('div[name|="newboxes"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
my nav looks like this
<ul>
<li><a id="myHeader1" href="javascript:showonlyone('articles');" >ARTICLES</a></li>
<li><a id="myHeader1" href="javascript:showonlyone('whitepapers');" >WHITE PAPERS</a></li>
<li><a id="myHeader1" href="javascript:showonlyone('brochures');" >BROCHURES</a></li>
</ul>
and my content is in div like the following
<div id="articles" name="newboxes" style="display:none;">
<div id="whitepapers" name="newboxes" style="display:none;">
<div id="brochures" name="newboxes" style="display:none;">
Basically this page, is an interior page.
I have a home page, that i would like to have links to each section on, so the section i want shows up already so user doesn't have to click again.
Any idea how i do this?
Thank you for any help, and I apologize if i'm not using correct terminology.
if I well understood your question, on page "articles" just call showonlyone function
$(function() { // DOMready
showonlyone('articles');
});
and repeat this code for every internal page, changing the parameter
going by what i understand from your question is that..
u have links on home page..
when user clicks these links you want that particular section to be already opened when the interior page opens
like when user click "articles" then in the interior page the articles div should be visible
for this you will have to use hash tags in the following manner
on your home page..
provide the links with a hash tag like this
http://agencystudy.com/eic/microsites/microsites-02/articles.html#articles
then in your interior page in document ready event
$(document).ready(function(){
$(window.location.hash).show(200);
});