Load content dynamically based on url

Question

How can I Load content dynamically based on the url of the page.

EG: profiles.html#example-contenet1, profiles.html#example-contenet2

For each #example-contenet load different page content.

I have attempted to put this into a JSFiddle, however i think it might need a php backend. http://jsfiddle.net/JEUSz/3/

Maybe something like this:

switch ($_POST['name']) {
case 'example-name1':
    echo "<img src='img/pic.jpg' />"; 
    echo "<img src='img/pic.jpg' />";
    echo "hi";
    break;
case 1:
    echo "i equals 1";
    break;
case 2:
    echo "i equals 2";
    break;
default:
    echo 'fail';
    break;
}

try to use jquery history plugins – sanj Feb 25 '13 at 13:37 — sanj, Feb 25 '13 at 13:37

score 2 · Answer 1 · answered Feb 25 '13 at 13:37

2

That is the whole purpose of server side development. Read about routing, and pick a PHP router like this for example.

answered Feb 25 '13 at 13:37

moonwave99

21,957
3
43
64

score 0 · Answer 2 · answered Feb 25 '13 at 13:37

0

No you don't have to use PHP. You just need to create multiple HTML files and put them to the server. Then you may use AJAX to load the specific content (related to hash "#some-name").

Try this:

http://tutorialzine.com/2009/09/simple-ajax-website-jquery/

answered Feb 25 '13 at 13:37

Koala Yeung

7,475
3
30
50

Thank you for your help. I think if i adapt this, it should work. – Simon Feb 25 '13 at 13:41

Wayne Whitty · Answer 3 · 2013-02-25T13:44:10.483

With PHP, you could use variables found in the query string to determine the content of the body. Here's an extremely simple example for a small website:

example.php?content=contact_form

<?php
$content = isset($_GET['content']) ? trim($_GET['content']) : 'default';

switch($content){
    case 'contact_form':
        include('html/contact_form.php');
        break;
    case 'welcome':
        include('html/welcome.php');
        break;
    default:
        include('html/default.php');
}

Or:

<?php
$contentPages = array(
    'contact_form' => 'contact_form.php',
    'welcome' => 'welcome.php',
    'about' => 'about.php'
);

$content = 'default.php';
if(isset($_GET['content']) && array_key_exists($_GET['content'], $contentPages)){
    $content = $contentPages[$_GET['content']];
}

include('html/' . $content);

score 0 · Answer 4 · edited May 23 '17 at 12:15

Your example code is pretty good, but you have to use variables instead of a hash tag.

So instead of profiles.html#example-contenet1, it would be profiles.html?name=example-content1

Then your switch statement would work correctly.

Some additional information on the $_GET variables: http://www.w3schools.com/php/php_get.asp

The hash tag portion of the URL isn't picked up by the server, for more information on that you can check out this question:

Can I read the hash portion of the URL on my server-side application (PHP, Ruby, Python, etc.)?

score 0 · Answer 5 · answered Feb 25 '13 at 13:38

Use a js file for every page.

index.html => index.js
guestbook.html => guestbook.js

and so on. Thats ok because you need different implementations in different pages. If you want to share functions over pages use a global.js and include this file in every page.

score 0 · Answer 6 · answered Feb 25 '13 at 13:44

This is how I do it. Inside the php files I change $template.

//Get content
$template = file_get_contents("main.html");

//Content based on _GET['page'] value
switch($_GET['page']){
    case "home": //Form Page
        include("inc/form_year.php");
        break;
    case "company_register": //Form Page
        include("inc/company_register.php");
        break;
    case "confirm_user": 
        include("inc/confirm_user.php");
        break;
    case "posts": 
        include("inc/posts.php");
        break;
    case "question": 
        include("inc/question.php");
        break;
    case "post_question": 
        include("inc/post_question.php");
        break;
    case "post_answer": 
        include("inc/post_answer.php");
        break;
    case "comment": 
        include("inc/comment.php");
        break;
    case "create_post": 
        include("inc/create_post.php");
        break;
    default: //Any page that is not defined in this switch will lead to this page
        include("inc/form_year.php");
}

Load content dynamically based on url

6 Answers6