I have made up a webpage on a private server as part of a full website redesign. The page calls up files such as contact.php with AJAX code to show the contents within a DIV layer, so that the actual page is still index.php but looks like a contact page.
What I would like to do is have a function that, when such links to make the AJAX call are clicked, will dynamically change the URL so that if somebody clicks the Contact link the page URL looks like index.php?page=contact (as an example).
Facebook has the sort of system I am looking to usewhen you click on a photo from the news feed and then change to another photo from the same user/gallery. I don't want something that just changes the URL from a hash tag (#), as that just adds complication to the design, whereas one that puts a PHP variable into the URL simply means I can write a PHP code to include the file directly if the variable is set.
Thanks.
Have you considered using History.js?
It sounds like you're wanting to essentially use $_GET vars to dictate what's served on the page... kind of. Although it also looks like you're calling in that content via ajax based on this var, so php is mostly irrelevant in this scenario since it would be js parsing the url and deciding what to ajax in. History will do all of this for you.
It reads the url as a state and serves as you tell it to. Obviously it's not that simple, but if you read the docs it's pretty clear how to use it.
https://github.com/balupton/jquery-history
Related
I have a PHP website that I send users to via a Dynamic URL like this:
http://mwebsitehere.com/?gw=1
well the page I send them too, works great with the code I am using to do certain things if the Dynamic content is set in the url. But whenever they click on a link on the page, which are ALWAYS changing, the Dynamic Content in the url is completely gone... For instances:
Lets say they are on the homepage that looks like this http://mwebsitehere.com/?gw=1, and then they click on a link that looks like this http://mwebsitehere.com/new-page/. Notice the ?gw=1 is completely gone from the url.
Is there a way to keep the Dynamic Links on every page if the url has dynamic content.
Like if it were to say ?gw=2 could all the links they click on or url somehow keep ?gw=2 on every page. Or if it said ?gw=1 for it to do the same thing.
Any help would be appreciated! Let me know if I need to explain my question better. Thanks!
I am also using wordpress, just in case you know anything wordpress specific! Thx!
the only reason to have get variables ?gw=2 in the url is if they are needed for that page, if you are wanting them for all pages,
have your scripts check to see if it exists in the $_GET array or $_COOKIES array, if its in the $_GET array but not it in the $_COOKIE array then set it in the cookies. That way your script will still see it,by checking the cookies.
No sense in cluttering the url with variables that dont need to always be shown.
If you want the exact same variable passed to every page, why not use
$_SESSION['gw'];
or
$_COOKIE['gw'];
to store "gw".
Otherwise you would have to pass it on via each link as follows
For example on page http://mwebsitehere.com/?gw=1
Link
There are a few ways you can do this.
You may use $_SERVER['QUERY_STRING'] and put it in every single link in your page. It will keep your links always repeating the same query string that your current file is.
You should try storing data in sessions! Then you can carry data from a page to another. Take a look at the PHP manual.
Good luck!
I'm looking for a solution similar to the php include method, except like at html's iframe tag, if I click a hyperlink on the included php, I don't want the browser to navigate the whole tab to the new url, but only navigating the included page without getting the parent page change/disappear.
UPDATE:
okay, thanks for the quick answers, seems like I didn't ask the right question:) so here is some background info: the whole page itself is a single-file website using the exactly same javascript+hiddendivs page changing method than that you just wrote. my problem is: I'm using a flat-file CMS to keep my News page managable by people having no coding knowledge. so I made an own template for the CMS only showing the news themselves. Then I embedded the CMS's index.php to my parent index.php with php include method and it looks really well, except my problem is, when I click "earlier posts", it navigates to the CMS's index.php and loads earlier news in there. I'd like it to load earlier news without navigating anywhere, just like at html's iframe method. (I will use iframe if there is no other solution, but its configuration would be really complicated if I wanted to stay cross-browser supportive)
From the action described it sounds like what you're looking for is not actually PHP but client side JavaScript. AJAX can perform exactly what you describe and there's a very easy library called jQuery to help you do this, with minimal effort.
http://api.jquery.com/jQuery.get/
http://api.jquery.com/jQuery.ajax/
You can bind your button to a JavaScript function which can then fire AJAX, grab the result of your other PHP page and display to the user in a .class or #id in the HTML, without leaving the current page.
If the behaviour your looking for is more advanced and "app like" you can also consider entire MVC JavaScript frameworks such as Backbone.js or Ember.js
The best thing you could possibly do is use jquery/javascript and manipulate a div (or the iframe) to where it navigates to X link when interacted with. You can actually change the url of an iframe using jquery and have it re-load to any url that you want. Reload an iframe with jQuery is a good example of how to do that. And for interacting with and digging through the contents of an iframe, instead of just changing the attributes of it, take a look at http://developer.vimeo.com/player/js-api.
Do keep in mind that the 2nd link is for a media player, BUT it still shows (and in a very simple way) how to interact well with iframes. You could use jquery to insert an id or class to the links in the page originally loaded into the iframe, then have the script on the 'parent page' navigate the iframe to one of the links when it's clicked. Just toy around with it some and have fun with it; a learning experience doesn't always have to be like a personal hell. I'll check back later and see how things turn out!
To do this you must understand what you are dealing with.
The *.php page loaded into user's browser is a processed and parsed page.
This parsing occurs at the server-side, and processed by the PHP processor on the server.
Now, after a *.php file is processed any interaction with it is lost. The only thing a user (client-side) sees is the result of this processing. Hence, to communicate with this page an information must be sent.
Normally, browsers send information on requesting a page. That is how the HTTP protocol works.
Since the user is the client-side, he must send relevant information (headers, variables, etc.) by the rules of the protocol. This means, a user must request the page and by this request the data will be sent.
AJAX technology allows you to open an HTTP request dynamically, on the background, while the page is still running with no need to refresh. It sends the relevant data according to protocol's convention and allows you to trigger a callback function to handle the answer when it arrives from the server.
Here you can find a beginner's tutorial, that will provide the necessary information for you to start.
P.S.
I would strongly recommend you not to use common external libraries like jQuery, node.js, Backbone.js etc. at the beginning. These libraries are tools that were created to simplify code writing for advanced developers. They may confuse you and mess up your programming logic and learning path.
Good luck!
Sounds like you want new content to appear on the page, without the user being directed to a new page. You can achieve this with jQuery. This is a quick example.
HTML:
<p>
Page 1 Page 2 Page 3
</p>
<div>
<div id="content1">
This is page 1.
</div>
<div id="content2">
This is page 2.
</div>
<div id="content3">
This is page 3.
</div>
</div>
jQuery:
$('#content2, #content3').hide();
$('a').click(function() {
var id = $(this).attr('id');
$('#content' + id).show().siblings().hide();
});
Live Example: http://jsfiddle.net/VxZKs/1
As some of you may know, Google is now crawling AJAX. The implementation is by far something elegant, but at least it still applies to Yahoo and Bing AFAIK.
Context: My site is driven by Wordpress & HTML5. An Custom Post Type has tree types of content, and the contents of these are driven by AJAX. The solution I came for not using hashbangs (#!) until fully understand how to implement them is rather "risqué". Every link as HREF linking to *site.com/article-one/?tab=first_tab*, that shows only the contents of the selected tab (<div>Content...</div>). Like this:
This First Tab
As you may note, data-tab is the value that JavaScript sends with AJAX Get, that gets the related content and renders inside a container. At the other side, the server gets the variable and does a <?php get_template_part('tab-first-tab'); ?> to deliver the content.
About the risqué, well, I can see that Google and other search engines will fetch *http://site.com/article-one/?tab=first_tab* instead of http://site.com/article-one/, making users come to that URL instead of showing the home page with the tab content selected automatically.
The problem now is the implementation to avoid that.
Hashbang: From what I learned, I should do this.
HREF should become site.com/article-one/#!first-tab
JS should extract the "first-tab" of the href and pass it out to $_GET (just for the sake of not using "data-tab").
JS should change the URL to site.com/article-one/#!first-tab
JS should detect if the URL has #!first-tab, and show the selected tab instead of the default one.
Now, for the server-side implementation, here is where I'm kind lost in the woods.
How Wordpress will handle site.com/article-one/?_escaped_fragment_=first-tab?
Do I have to change something in .htaccess?
What should have the HTML snapshot? My guess is all the site, but with the requested tab showing, instead of showing only the content.
I think that I can separate what Wordpress will handle when it detects the _escaped_fragment_. If is requested, like by Google, it will show all the content plus the selected content, and if not, it's because AJAX is requesting it and will show only the content. That should be right?
I'm gonna talk third person.
Since this has no responses, I have a good one why you should not do this. Yes, the same reason why Twitter banged them:
http://danwebb.net/2011/5/28/it-is-about-the-hashbangs
Instead of doing hashbangs, you should make normal URIs. For example, an article with summary tab on should be "site.com/article/summary", and if it is the default one that pops out (or is it already requested) it also should change to that URI using pushState().
If the user selects the tab "exercises", the URL should change to "site.com/article/exercises" using pushState() while the site loads the content throught AJAX, and while you still maintain the original href to "site.com/article/exercises". Without JavaScript the user should still see the content - not only the content, the whole page with the tab selected.
For that to work, some editing to the .htaccess to handle the /[tab] in the URL should be done.
We have an application writted in PHP. Its main view is for example: /pages/index.
Now when the user clicks on certain links, it pulls in other Views via ajax. ie. a call may look like /pages/publish, so the PHP outputs the relevant html for the publish section back to the index view.
The problem we have is we'd like to be able to give the user the option of refreshing and seeing the same view as before. So, my initial thought is this, when we use .load() in jQuery, to take the URL its going to load and store it somewhere to be read by the PHP if the user refreshes. Is the best way to do or can someone think of a better way to do this whole thing?
Check out jQuery.address which should solve your problems! It allows AJAX loading of new pages, and will update the address bar accordingly. If a user saves this URL and reloads it, the script on the page can then load the correct page.
Alternatively, if you're HTML5-only, then you can try history.pushState() which will modify the URL without using the hash symbol, but support isn't 100% yet. (I don't think... it certainly behaves oddly on iPad from my experience.)
Here's the situation.
I have a site where clicking hyperlinks within a certain div makes a jQuery function get the content of a div from a separate page. Because of this, the URL don't change. I need it to change as well as writing an entry in history.
My pages are setup like this (not sure this is the smartest way of going though)
access.php (main logon)
new-user.php
forgot-pass.php
index.php
controlpanel.php
etcetc. Now, all of these pages are reachable on their own and are mainly identical and all contain a div called "container". When clicking links, the content from this div gets erased and the content from the coresponding div (container) gets loaded from the file of the URL (href). I'm terrible at explaining..
So basically, what I need is some javascript that picks up the href link address and just pastes it in the url bar at the same time as it creates an entry in history so the back and forth buttons work.
I plan on extending this in a while as well, translating query strings as well. But there are a few constant static pages I need to take care of first. Any help would be very appreciated! :)
You are not allowed to change the entire URL by JavaScript but you can use URL hashes. I recommend you the browser history plug-in. You can simply register a handler to react on URL changes and load your corresponding content via ajax.
Have you looked at the jquery address plugin? Look at the examples. Is this similar to what you want?
It's not possible with "normal urls" (we must wait for a new generation of browsers...)
But there is a "trick": playing with anchors.
A link like "same_page.php#anchor" does not reload the page, but act on both the history and the adress bar.
So, if instead of having url like "page.php?param=lorem", you could have "page.php#param=lorem", you have your solution :)