I am writing an application that I want to make more user friendly by removing the amount of clicks needed to navigate.
At the moment pages are loaded like so:
<a class='pageloader' name='page1.html'>Page 1</a>
<script>
$('.pageloader').click(function(){
// Load the page that the user clicked on by taking the name property and appending it to includes/
$('.content').load("pages/" + this.name);
});
</script>
Basicly this takes the name of the clicked link and replaces the content div's content with whatever is inside the file that matches the name property.
Now my only problem is that I can't redirect people to pages using HTML because the only page that has proper styling is index.php.
Obviously I am now redirecting people to index.php after an action is finished, but I would like to redirect them to a specific page.
I've thought about calling
$('.content').load('pages/edit-plein.php');
(This code is inside a .php script that writes to a file)
But that only gives me an error since it cannot find the .content div.
Would anyone know a good method to redirect a user to the page I want?
As far as i understand you want to make shure the right content gets loaded (inside that div) when you share the link to a specific subpage on your site, but can only share a link of your index.php because of its styling.
I would suggest you add a variable to your URL, i.e. like
index.php?page=edit-plein
then get that var with PHP and create a JS call to your pageloader, like this:
<?php
if ( $_GET['page'] != '' ) {
echo '<script>$(".content").load("pages/'. $_GET['page'] .'");</script>';
}
?>
This is not a good way for links:
<a class='pageloader' name='page1.html'>Page 1</a>
Maybe you can try this:
Page 1
Page 2
And JS must be like this:
$('.pageloader').click(function(){
$('.content').load("pages/" + $(this).attr('id') + ".html");
});
I hope this solves your problem.
Related
To be clear - Ive already checked other Questions about refreshing div and the ideas I found were not exactly what I look for.
My site is made of plenty pages with the same header and footer (top, bottom, menu on both sides). I use smarty templates, and the Whole action of every page happens in one <div id="content">.
My users use to refresh most of those pages many times to do an action they've already done once again. With refreshing browser loads again header, footer, viewed page etc. I would like to bring them the button (instead of F5) which will refresh just a current content page (e.g. account.php) without refreshing whole site.
One of plenty structure:
<?php
$title = 'OneOfPlenty';
require_once("includes/head.php");
{
Whole action
}
require_once("includes/foot.php");
?>
header.tpl ends with <div id="content"> then comes
onofplenty.tpl and then in
footer.tpl I got </div> (close the content)
Here comes the question: Is it even possible? Am I able to create such a flexible button which will recognize which page is being displayed and will "know" to refresh just the content of this page?
Any ideas and help will be aprreciated.
Thank you
TTed
You could do an Ajax call with jQuery to get the output html of the tpl file of the page.
You could use an Ajax call, e.g. by using the jQuery get() function, e.g. like this
$.get("includes/account.php", function(data) {
$("#content").html(data);
alert("Load was performed.");
});
If you saved some kind of variable, either to session or to a data-content on your div. Just so you know which page you are on. Say if you are on account.php you set $('#content').attr("data-content", "account"). Then if you press the refresh button you could use an ajax get on $('#content').attr("data-content") + 'php' to re-import the data. Could be done with a SESSION variable as well.
I have an index.php with two major sections: the navbar and the main-content. The navbar contains links which will load another webpage to the main-content through this jQuery code:
jQuery('#main-content').load('sampleurl');
Some of these web pages contain links to another web page, so I want to add a back button.
I tried using the history.back() and history.go(-1), as well as the $_SERVER['HTTP_REFERER'], but they don't really work in my case.
How will I add the back button in this situation?
You should keep your last viewed page in JavaScript variable or in value of hidden input and then you only need to add button with
jQuery('#main-content').load(old_url);
You must always update your variable when you load your next page via jQuery('#main-content').load('sampleurl');
Try manipulating the javascript location or location.hash
https://developer.mozilla.org/en-US/docs/DOM/window.location
Of course, you need to be able to turn your URL back into the relevant page content too.
In conjunction with both Charlie and Michael's answers, since you are already using jQuery, another option is to include the jQuery Address plugin.
You can implement this idea, by creating a function to read a hash path to load new content. Following this, the content can be navigated by the built-in back + forward buttons.
The only challenge I foresee with this implementation is associating the new content with the hash path.
Good luck!
Just an idea: Add hash to Url whenever you load the page; and then you can use history.back()
$(function(){
if(window.location.hash === 'sampleurl'){
jQuery('#main-content').load('sampleurl', function(){
window.location.hash = 'sampleurl'; //<<-- match with your loaded page;
});
}
});
good luck !
does anyone know if i can get header in php to take a user to a certain point on a page when a form has been submitted and a function has finished and then it redirects a person back to a certain part of that page?
this is my if result:
$_SESSION['message_sent']="<div class=\"message_sent\"></div>";
header("Location: {$_SERVER['HTTP_REFERER']}");
it currently takes the user back to the page they was on but i want the user to be taken to the middle of the page?
thanks.
try doing as following, take for eg : "test" is the "name" attribute of anchor tag on the page :
HTML CODE :
<a name="test"></a>
<div>
.......
</div>
PHP CODE :
$path = $_SERVER['HTTP_REFERER']."#test";
header("Location:$path");
If you're familiar with having links within a page this should be simple.
You basically have your URL and append the id of the HTML element you want the page to go to when it loads. For example a URL like this:
http://www.mysite.com/index.php#about
Would take you to the following element on the index.php page:
<div id="about"></div>
I tried to understand - is it any method to ask browser not to refresh entire page when user clicks onto . Hash adding method is seen - I need another method, working with links without hashes.
May be any headers should be sent ? Or something another ?
I want to process GET queries returning only the part of HTML (or special js commands), not all page, and process it in AJAX-style.
You can ajaxify your links through jquery. Something like this:
$('a.ajax').click(function(ev){
ev.preventDefault();
var target=$(this).attr('data-target');
var url=$(this).attr('href');
$(target).load(url+' '+target);
}
This can be used in conduction with the following HTML:
<div id="output">
Hello World
<div>
and inside world.html you would need to have:
<div id="output">
Foo bar baz boo
</div>
In theory this should load content of the dif from "world" file into the div inside the first file, but I haven't tried it. I think it's what you need, because the regular link is still there, google will properly index this bypassing ajax and your users will be happy to see part of the page change.
you could make it 'fake' links doing something like this:
<span style="cursor:pointer;" onclick="loadPage('mypagename');">My Link</span>
The function then would be:
function loadPage(pageName){
// do ajax call here using pageName var
}
You cannot prevent navigation when a user clicks a hyperlink with a URL. Using a hash value to navigate or having your hyperlinks invoke JavaScript is generally the way to add navigation inside of a single page.
However, if you're trying to convert an existing page that's not designed this way, you would have to use JavaScript to modify hyperlinks so they invoke Ajax. For example:
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
var oldUrl = links[i].getAttribute('href');
links[i].setAttribute('href', 'javascript:void(0)');
links[i].onclick = (function(url) {
return function() {
// Then you can do your AJAX code here
}
})(oldUrl);
}
I recommend that you don't do something like this, though, and rather create your page with an AJAX design in mind.
Changing the url without using hashes can be achieved with the Html5 History API: http://html5demos.com/history
Not supported by older browser though, so you must always have a fallback.
Basically, I want the same effect as the oldschool html 'frameset' I think.
Take a look at this page please:
http://onomadesign.com/wordpress/identity-design/alteon-a-boeing-company/
If a user selects a project from industry -> transportation for example, I would like that the right scrollmenu keeps its initial state when the new project page comes up. So they won't get lost and have to click again to be in the same submenu section.
So, the right thumbnail navigation should stay in the same way, I don't want it to reload.
Do I have to do it with frames or iframes? Or can I make some kind of jQuery call to 'not reload' that div? Maybe PHP? I'm sorry, I am not a programmer from origin.
Update:
Guys, I managed to put the whole thumbnail navigation code into a seperate php file, called sidebar.php. Now this gets called in my single.php (Wordpress) by <?php get_sidebar(); ?>.
Should it now be easier to make this sidebar.php NOT refresh on page reload? I've been looking at cookies, php sessions, iframes.. but I can't get it to work.
Any more help would be greatly appreciated!
Facebook kinda does this without frames for optimization's sake. They take every single link and, if supported, using AJAX to load the page content without reloading the layout.
Obviously, this sort of thing may require significant restructuring of the internals of your app. Another option is to simply store the menu's state as a cookie on link click (see the jQuery Cookie plugin) and, on every reload, either have Javascript look at the cookie and dynamically restore the menu to its correct state, or use your internal PHP to read the cookie and decide what menu to display.
But if you get really desperate, you may end up falling back on frames. Sometimes that can be okay - but try everything else first :)
You also can detect what menu item was activated (you got the page request due to clicking on the corresponding link) and use this information to restore/select this menu item.
At least that is what I do and... No cookies or AJAX required!
You can use a technique known as "AHAH" Asynchronous HTML and HTTP. Essentially you're doing a jQuery
$.post("whatever.html",function(data) {
$("contentdivelement").html(data);
}
You can wrap this in a function like:
updateContent(sPage) {
$.post(sPage,function(data) {
$("contentdivelement").html(data);
}
}
This will load the content from your "frame" page into the div without reloading the page.
You can also bind to each of the navigation links and use their HREF as your path to load in your content div such as:
$(".menuLink").click(function() {
var menuLink = $(this).attr('href');
updateContent(menuLink);
/* prevents the browser from taking the parent to that link */
return false;
});
ADDITION:
Your menu may look like this:
<ul class="myMenu">
<li>Frame 1</li>
<li>Frame 2</li>
</ul>
Also,
If you want it to remember the page you're on you can use cookies or #anchors. There are many ways to add "tab" or "menu" anchors but one way would just be to use a jQuery plugin.
The most COMMON and TRENDY way to do it is to use #anchors. Your browser address bar ass #frame1 to the end so when the page is refreshed or reloaded it will load up "frame1" automatically with some additional code.
You can even called the anchor #/frame1.html and read the anchor in
$(document).ready(function() {
/* you'll need to either use a plugin or parse out the anchor from your current browser address bar */
updateContent(anchorContentVar);
});
Instead of updating your content using click-handlers I suggest a slightly different approach. Just replace your hyperlinks with this kind of link:
#info_page
Now set up a simple interval that reads out the current URL and updates the DIV accordingly:
__LOC = document.location.href;
setInterval(function(){
if (__LOC!=document.location.href) __LOC=document.location.href;
var fetchURL = __LOC.split("#")[1];
$.get( "/getcontent/"+fetchURL, function(d){ $("#mydiv").html( d ); } )
} 1000);
This allows visitors to use bookmarks as well.