1

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)

Community
  • 1
  • 1
bazsa001
  • 23
  • 4
  • PHP doesn't work like iFrames. – Unexpected Pair of Colons Apr 22 '13 at 21:21
  • 3
    You should read about AJAX technology. It is the best solution for client-server communication. I guess, you'll find the solution there. Otherwise, you cannot dynamically load `PHP` data into your page without reloading it. – Michael Sazonov Apr 22 '13 at 21:23
  • Welcome to Stack Overflow. Please read the [Frequently Asked Questions](http://stackoverflow.com/faq) and [How to Ask](http://stackoverflow.com/questions/how-to-ask). What have you tried so far? My suggestion would be to look into using Ajax, but without more information, your question is impossible to answer and we can't do the work for you :) – James Scholes Apr 22 '13 at 21:24
  • I'm not sure what you're asking. Possibly what you're wanting to do is send a $_GET variable to the page to tell the page which file to include. Then you want to set the page in the hyperlink? I think this is what you want, but I'm not sure what you're after. Do you have a php page which is including another page that you would like to change depending on the user's request? If so, this is one way. Another, slightly cheaper way is to use AJAX. – doliver Apr 22 '13 at 21:24

4 Answers4

0

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

Steve
  • 1,423
  • 10
  • 13
  • As seen from the question, this person is a beginner in WEB-Development. I would suggest him to learn the basics of JavaScript, PHP and AJAX, and then and only then propose to use jQuery or any other external library. – Michael Sazonov Apr 22 '13 at 21:29
  • Agreed! Basic JS, then jQuery. – Steve Apr 23 '13 at 11:17
0

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!

Community
  • 1
  • 1
William S.
  • 1
  • 2
0

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!

Michael Sazonov
  • 1,531
  • 11
  • 21
  • 1
    I wouldn't recommend node.js if you're new to JavaScript. It will add more confusion since it's a server-side technology (Yes JavaScript can now run on the server-side) and requires the ability to run a node server, which typically isn't available in most common hosting environments. I'd suggest start with plain JavaScript, then get into jQuery. It will probably be some time before node.js would be needed and it's for more specific server-side use cases, not client side. – Steve Apr 23 '13 at 11:16
  • Approved :) the late hours spoke for themselves – Michael Sazonov Apr 23 '13 at 11:39
-1

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>
    <a href="#" id="1">Page 1</a> <a href="#" id="2">Page 2</a> <a href="#" id="3">Page 3</a>
</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

O P
  • 2,327
  • 10
  • 40
  • 73