Upload pages without duplicating content through AJAX

Navigation
1

I have a ajax + pushState navigation system on my site. If the user clicks an internal link, it will be done $.post and I check in PHP if $_SERVER["REQUEST_METHOD"] === "POST" so 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 load indexGet.html .

Here is the example of indexe's :

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 this way because if I uploaded, for example, indexGet.html through $.post the entire HTML file would be duplicated.

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

I think there is a simpler way, but I could not think of anything better than that and besides, I researched and found no alternative examples.

EDITED

Well, here is an example of what I use on my system:

index.php (which is required 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 the case of POST , the index.html saved in path / views / post / index.html contains only content.

In case of GET , the index.html saved in path / views / get / index.html has scripts and css's in addition of the content.

Thanks!

    
asked by anonymous 19.04.2015 / 07:53

1 answer

2

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

The view would be this indexPost.html and layout indexGet.html , with the impression of a $content variable instead of content.

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

Normally, 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 do the job of rendering 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 you use, this concept is not so clear, but it is predicted, it is called "using multiple html files."

Basically, if you want to show only the view, the code would look like this: 

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

If 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();

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

    
19.04.2015 / 14:04
How to include dateInterval property inside a variable Merge image and map Google Maps