I've been trying to add some AJAX/jQuery script to my site so that only the main content loads when you navigate through the site, and hence the navigation at the top will not reload.
This is my site structure:
<div id=container>
<div id="header">
<!-- Header + Navigation Buttons, same throughout the site. -->
</div>
<div id="main">
<!-- content of each page, different on each page. -->
</div>
</div>
Also note that each navigation button leads to an index.php file on a different sub-directory, e.g www.mysite.com/contact, www.mysite.com/comments etc.
How can I make the #header stay throughout the site, so when I click a link in the navigation bar that nav bar doesn't reload, however the #main content does?
I eventually would like to add transitions to the #main content aswell, so when you navigate through the site you'll never see a blank white page while the page is loading - instead you'll always see the nav bar etc. and the #main content would fade in and out.
Previously, I used this:
<script type="text/javascript">
$('#main').load('/subdirectory/ #main');
</script>
But it didn't work (note I did write the correct subdirectory) and the whole page would reload as normal.
If you could help me out I'd greatly appreciate it!
Thanks in advance!
mlazim14
<script type="text/javascript">
$(document).ready(function() {
$('#main').load('/subdirectory/ #main');
});
</script>
That should work. Are you sure the address is correct? Maybe the whole page wasn't loaded yet either. Try this, then 'echo' the contents in the index.php file:
$(function() {
$('#main').load('/comments/index.php');
});
Code inside the above function is executed when the page is ready. See jQuery .ready().
Related
I'm using jquery mobile and I'm in dealing with a problem:
I have 2 html pages: index.html and page.html
//index.html
...
<script src="script.js"></script>
<body>
<div id='contents'></div>
</body>
...
//script.js
$(document).ready(function(){
$.ajax({
...
success:
$("#contents").html(content_to_display).trigger('create');
...
});
});
and another page that calls the previous
//page.html
...
<body>
Back
</body>
...
the problem is that when I click on the Back button (after refreshing the page.html), the page index.html is displayed correctly, except the that stays empty unless I manually refresh the page (F5 or Ctrl+R) displaying the content I want to be displayed.
how to load the index.html page without manually refreshing the page every time?
Refresh is your problem, this is a timeline of what have happened:
index.html is loaded
page is changed to page.html and its body content is loaded into index.html DOM but link is still domain/page.html
Because of full page refresh, page.html is reloaded without a HEAD content of index.html.
page is changed to index.html and its body content is loaded into page.html DOM WITHOUT its HEAD part and that is a reason why javascript is not triggered
This problem will be fixed if both index.html and page.html have identical HEAD content, mainly reference to the same custom js file. For more solution to this problem (with solution) take a look at this ARTICLE, to be more transparent it is my personal blog. Or it can be found HERE.
I think you are looking for something like:
window.onbeforeunload = function () {
// stuff do do before the window is unloaded here.
}
this runs before the user is navigated away from the current page.
this means you can force the user to navigate to your page which will refresh correctly.
Try this instead of the backbutton if you are just navigating back one page:
BACK
Or give this a shot:
$.mobile.changePage(href, {changeHash: false });
We have done a site, that loads content into a div, using ajax. My question is, within that ajax page, can I initiate a new page to load onclick in the existing pages place.
So as it stands on my index page I have:
<section id="mycontent">
</section>
Onclick of a element my content gets loaded into the above section. Like so:
<span class="link_wrap" data-link="prices"><span class="link_title">Our Prices</span</span>
So on click of the above, our js pulls in the relevant page: prices.php
In the JS I have:
case 'prices' :
myFunctionAjax('prices.php', function () {
_self._focustitle();
});
break;
So what I would like to do is, in say the prices.php page have a link to say deals.php
That onclick, similar to above, loads IN PLACE of prices.php content the new content from deals.php.
Any suggestions ?
i was looking at this website and i am interested on how did the developer managed to load different htmls in a single page without the current page being reloaded...
here is the website: http://demos.kendoui.com/web/validator/index.html...
for example if you clicked globalization in the Framework section, you can see the url changed, the body changed also but a part of the page remains (the top part) and the current page is not reloaded...
i am just starting in web development and i want to know this technique... i hope you can share it to me.... thanks :)
It is using ajax partial updates. You send request to the server and get portion of the page and then place it in some element, for example in div.
Normal:
<html>
<head>
<head>
<body>
<div id="divToUpdate"></div>
#Ajax.ActionLink("Call Partial", "MyAction", "MyController", AjaxOptions{ UpdateTargetId = "divToUpdate" })
<body>
</html>
Partial:
<span> here is my partial view which will be placed in "divToUpdate" div after clicking "Call Partial" Link </span>
I've got a gallery of images, and I'd like users to be able to share those images to their social network.
When a thumbnail is clicked, an lightbox opens using colorbox, and ajax's in the images main view /images/view/<id> rendered as HTML, with an AddThis widget beneath it.
However I'm finding that because I'm loading the widget in using an ajax query there is obviously no event handler for it to catch and load it's bits. It's also, quite rightly, sharing the main url, seeing as it's been loaded in a lightbox.
Is there any way to overwrite this functionality or another sharing widget which will allow this kind of functionality? Or do I need to create my own sharing widget?
I have found a solution to this problem now, although it is more of a hack then anything else.
The basic principle is that you need to reinitialise the widget every time you load it back in.
The simple premise is that you include a ?domready=1 when loading the javascript.
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?domready=1#pubid=/*Your pubid*/"></script>
Then when you complete loading your ajax, you need to run,
window.addthis.ost = 0;
window.addthis.ready();
Which will reinitialise the widget. My code is thus. I cheated, and attached it to the global ajax handler, because of my php framework </aside>
$('.content').ajaxComplete(function(event, request, settings){
// We need to reinitialise the addthis box every time we ajax a lightbox in
// Apologies for using regex to read html when javascript can parse html!
// http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags
if(request.responseText.match(/gallery-lightbox/i)){
window.addthis.ost = 0;
window.addthis.ready();
}
});
Once you've done this, the addThis widget will now load properly. Onto the second problem, of specifying the lightbox content as the sharing item.
This was much simpler, in that you can add the url into the button element. So you end up with widget markup like the following.
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_preferred_2" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_preferred_3" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_preferred_4" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_compact" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?domready=1#pubid=/*Your pubid*/"></script>
<!-- AddThis Button END -->
All,
I am using JQuery UI Nested tabs. Consider the structure like this: There are 2 Main tabs: Animals, Birds. Under Animals, there are two tabs "Cats", "Dogs". Both the tabs "Cats" and "Dogs" should be loaded via AJAX when selected.. So, the code for them is something like this:
<div id="fragment-1">
<ul>
<li><span>Cats</span></li>
<li><span>Dogs</span></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("#tabs-loading-message").show();
$('#fragment-1').tabs({cache:false, spinner:''});
});
</script>
The issue is, I want to maintain a common div to load the AJAX urls. Ex: When you click on Cats or Dogs, the content for those tabs, should go into "<div id='commonDiv'></div> instead of going into "cats" div and "dogs" div.
The loading should be reusable, in the sense, if call reload("Dogs") from anywhere inside "dogs" tab, it should reload the "dogs" tab content.
How can I achieve this?
Just looking at the docs, nothings pops out as to how to do that. It's easy enough to not use the tabs widget though, and define your own click events for basic tab functionality.
<div id="fragment-1">
<ul>
<li><span>Cats</span></li>
<li><span>Dogs</span></li>
</ul>
<div id="commonDiv"></div>
</div>
$(document).ready(function(){
$('#fragment-1 a').click(function(){
$('#commonDiv').load($(this).attr('href'));
});
}):
You would need to define your own css styles though, as it looks like the tabs widget does that for you.
Not sure if I understtod you well; as far as I know if you give all your tabs the same tittle atribute, the UI will rehuse the same DIV to load the content, instead of creating a new one for every tab and hide or show as required. Is a good thing since the browser doesn't get so heavy weighted with a lot of DIVS loaded but hidden ...