main.php:
<div id="test" class="test">
<?php include("data.php");?>
</div>
data.php:
In this php, i have a few query, and then print some list...Each list in an own DIV tag, and all DIV tag is "closed" when the page is load, except the last one that the user opened. I use cookie to save the the DIV ID to know which i have to open when the page is reload.
JS PART:
var test= $.cookie('test_cook');
$('div[class*="test"]').hide();
var op = $.cookie("test_cook");
alert(op);
$('div.test' + op).show();
$('input:image').click( function() {
var nr = $(this).attr('id').substr(7,2);
$('div.test' + nr).toggle(400);
$.cookie("test", nr, {expires:1 });
});
PHP PART:
In searctest.php a print some list what the user search for, and if they want, can send to database.
include("searchtest.php");
If i reload, or close the page, then cookie is works well, the last opened DIV tag stay open. But after user make a search, and POST it, then the cookie variable will empty.
Could you suggest me something how can i bypass this?
Use Ajax instead of posting. That way the local page context isn't wiped out.
I don't know whats the problem really, but you can force to reload the cookie in the header of the POST reponse.
<?php setcookie(cookieName,$_COOKIE["cookieName"],time, domain,... ); ?>
I think that It's not the better solution..but it can works.
One question. The path of the post request is in the same path? For example, if the cookie is valid in the path /example/ and your post it's going to another path /example2/ the cookie will not works in /example2/ path. In that case, you can to declare the cookie in the root path (/), but I don't know how to do it in that JQuery plug.
Good luck and sorry for my bad english.
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 am looking into sending the user back two (or maybe more) pages from where they came. What works so far is
<strong>
<a href="javascript:history.go(-3)">
Click here to go back to the view
</a>
</strong>
However, the [history] page being called does not refresh to show the changes.
So I have the idea of referring the referrer. PHP gives me $_SERVER['REFERER'] to use, which is OK but only up to one level. How do I get the referrer (of referrer...) of $_SERVER['REFERER'] ?
As far as I know, you cannot do that in PHP. The simple answer is no, because PHP is server-side, and gets just the current referrer, while Javascript is client-size, running on the browser, which actually does have 2 or more history steps.
Consider re-thinking why you want this to happen. You can never guarantee that the 2-step back referrer (even the last one) is still in your site.
Pure JS. No PHP.
Modify your existing code like this.
<strong>
<a href="javascript:window.name='autoLoad';history.go(-3)">
Click here to go back to the view
</a>
</code>
Now add this JS to the page, where you are being redirected. say test.html when you click history.go(-3)
function autoLoad(){
if (window.name=='autoLoad') {
location.reload();
window.name='';
}
}
and in the body tag add this
<body onload="autoLoad()">
In server variable $_SERVER['REFERER'] is only the last referrer. If you want to use previous you have to save them to session. The problem is that you can't find out which browser tab initialized the request - so your history would be mixed for all tabs.
Solution would be using JS to force the browser to reload page.
You could do something like this, or use cookies if you like them more, but you don`t need PHP for this.
<input type="hidden" id="reload" value="0">
<script type="text/javascript">
window.onload = function(){
var el = document.getElementById("reload");
if(el.value != "0")
{
window.location.reload();
}
el.value="1";
}
</script>
hi i am using ajax for loading pages, and also for back button facilities. everything is worked fine except one. Well i narrowed down my problem but cant get any solution. my main page has a container div where i load most of the pages without reloading the whole pages like in gmail.
as for pjax it also loads tags for seo friendly url.
but there is a div in the main page contains "<?php echo $pagename; ?>" it gets the pagename from the loaded page and showed it in the div. well it worked only if the browser reloads. otherwise when i open pages continuously it does not change, it shows the previous one.
so how do i fix this issue. i am thinking about refreshing the div that contains the pagename. so how do i do that?
PHP code is always executed on the server side, so this div won't change when you use pjax. You need to change the pagename div manually as you do with the content div. You can do this with 2 pjax calls, or by splitting the ajax response into pagename and content (but maybe then pjax is not the right solution).
You can send a ajax request to the file that contains echo $pagename and display the response(which would be $pagename) using javascript.
Since you are using jquery, you can use $.ajax for this purpose.
Here is the code
$.ajax({
type = "POST",
url = "your-php-file-path",
}).done(function(response){
$("#div-id").html(response);
});
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 !
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.