Load pages without duplicating content through AJAX

Asked

Viewed 383 times

1

I have a navigation system by ajax + pushState on my website. If the user clicks on an internal link, a $.post and I check in PHP if $_SERVER["REQUEST_METHOD"] === "POST" then I load a page, for example: indexPost.html, and, if the user directly access the link I make a $_SERVER["REQUEST_METHOD"] === "GET" then I charge indexGet.html.

Below is the example of indexes:

indexPost.html:

<p>Olá, esse é o conteudo!</p>

indexGet.html:

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <title>indexGet.html</title>
        <link rel="stylesheet" href="/style.css">
    </head>

    <body>
        <p>Olá, esse é o conteudo!</p>
    </body>

    <script type="text/javascript" src="/script.js"></script>
</html>

I had to resort to developing in this way because it carried, for example, the indexGet.html through the $.post the entire HTML file would be duplicated.

My question is: is there any simpler way to do this without always having to create 2 files for each action? Remembering that, I will have to do this with several files, IE, it would be a very tiring process.

I believe there is a simpler way, but I couldn’t think of anything better than that and besides, I researched and couldn’t find alternative examples.

EDITED

Well, here’s an example of what I use in my system:

index php. (which is requested by $.post through my script):

if($_SERVER["REQUEST_METHOD"] === "POST") {
    $html = new Template("caminho/views/post/index.html");
    //aqui vão outras variáveis do template...
    $html -> show();
} else if($_SERVER["REQUEST_METHOD"] === "GET") {
    $html = new Template("caminho/views/get/index.html");
    //aqui vão outras variáveis do template...
    $html -> show();
}

I’m using a template system, and as you can see, I’m saving the same file, but in different folders, one for each case.

In case it is POST, the index.html except in path/views/post/index.html has only the content.

In case it is GET, the index.html except in path/views/get/index.html has scripts and css’s in addition to content.

Thank you!

php ajax

1 answer

2


Most template systems I know work with the view and layout concept.

The view would be that of you indexPost.html and the layout indexGet.html, with the impression of a variable $content in place of the content.

Usually this layout is a more Eneric html, with the site menus, footer and things like that, and is used by all other views.

Usually, if you have the option to print only the view, disabling the layout, which I believe is the content you want when you receive a "post".

In your case, you could check if the request is an ajax, and disable the layout.

A very simplistic implementation could be this.

layout.html

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <title>indexGet.html</title>
        <link rel="stylesheet" href="/style.css">
    </head>

    <body>
        {CONTEUDO}
    </body>

    <script type="text/javascript" src="/script.js"></script>
</html>

example-view-hello-world.html

Olá mundo

example-view-stack.html

Olá Stack

Function that would render views with and without layout.

function renderView($name, $layout = 'layout') {

    $viewHtml = file_get_contents("caminho/para/views/$name.html");

    if($_SERVER["REQUEST_METHOD"] === 'GET') {
        $layoutHtml = file_get_contents("caminho/para/views/$layout.html");
        $output = str_replace('{CONTEUDO}', $viewHtml, $layoutHtml);
    }
    else{
       $output = $viewHtml;
    }

   return $output;
}

In this template system that you use, this concept is not so clear, but this predicted, it is called "using multiple html files".

Basically, if you want to show only the view, the code would be as follows:

$tpl = new Template('caminho/views/example-view-hello-world.html');
//aqui vão outras variáveis do template...
$tpl->show();

In case you wanted to use the layout, this:

$tpl = new Template('caminho/views/post/layout.html');
$tpl->addFile('CONTEUDO', 'caminho/para/views/example-view-hello-world.html');
//aqui vão outras variáveis do template...
$html->show();

As I said, the layout concept is not very clear in this template system, but it should work.

  • First of all, thank you for answering. Well, you cited several examples, and I think that confused me a little bit... In the first example of the function that would do the job of rendering the views, I did not understand what you did, because by my understanding, you uploaded 2 different files, just like I already do, because you load the $html name. and the $html layout., then it got a little confusing for me... I could explain better?

  • I took advantage and edited the question, putting more data, so that it is clearer and broad understanding.

  • This template system you are using does not use layouts?

  • What template system are you using?

  • I use this one: https://github.com/raelgc/template

  • edited the answer, see if it helps.

  • Thank you very much, through your reply I was able to open my mind to be able to adapt to my code. I already knew and used addFile() but I had not thought to use it in this case, will save a lot of space and lines of code! Hehe. Sometimes the answer is in front of us and we do not see. Thank you very much!

Show 2 more comments

Browser other questions tagged php ajax

You are not signed in. Login or sign up in order to post.