Loading same file for simple content loading and js content loading

[aavrug]

Is there a way that I can create a single file and use for both purpose. One I am loading the contents setting some variable and if the content will send from js it will replace those variables?

[TorbenKoehn]

I don't exactly understand what you're trying to achieve haha

Can you give me some details?

[aavrug]

I want to render a single file which will get data from php and js both.

[TorbenKoehn]

So you want a template that can be used in PHP and JS?

How do you want to pass the data to the jade files?

There are multiple approaches to whatever you're trying to achieve, maybe you have some code examples and I just make them work? haha

[aavrug]

article.story.article-hero
    div.article-image-wrapper(alt=$post['story']['headline'], width='1280')
    div.container
        div.content
            a.article-category(href=$link)= $post['story']['sections']['name']
            h1.article-hero-headline= $post['story']['headline']
            a.article-hero-author(href=$authorLink)
                span= $post['story']['author-name']
            div.timestamp= date('F d, Y, g:i a', $post['story']['published'])

[TorbenKoehn]

And you want to use the same template in JavaScript?

What I'd do is probably rendering the template at the server and call it via AJAX (e.g. jQuery's load()-method)

/path/to/your/templates/article.jade

article.story.article-hero
    div.article-image-wrapper(alt=$post['story']['headline'], width='1280')
    div.container
        div.content
            a.article-category(href=$link)= $post['story']['sections']['name']
            h1.article-hero-headline= $post['story']['headline']
            a.article-hero-author(href=$authorLink)
                span= $post['story']['author-name']
            div.timestamp= date('F d, Y, g:i a', $post['story']['published'])

/template.php

<?php

use Tale\Jade;

$renderer = new Jade\Renderer([
    'cache_path' => './views/templates',
    'paths' => ['/path/to/your/templates']
]);

//Get arguments fed by GET and POST
$args = array_replace($_POST, $_GET);

//Get template to parse by PATH_INFO or e.g. a specific $args variable
$path = $_SERVER['PATH_INFO'] ?? ($args['path'] ?? null);

if (!$path)
    die("Template path not given");

//DONT FORGET TO SANITIZE $path, MAKE SURE . AND .. ARE NOT ALLOWED AND THE PATH DOESNT CONTAIN MALICIOUS STUFF

echo $renderer->render($path, $args);

/index.jade

[...]
body
    #articleContainer

    script.
        $('#articleContainer').load('template.php/article', {
            post: {
                story: {
                    headline: 'Some headline',
                    sections: {
                        name: 'Some Category Name'
                    }
                },
                //etc.
            }
        })

This is the only way I see that really gives you full Tale Jade features in all your templates, server-side and client-side.

[aavrug]

So, as much I got, this means I have to create two different files.

[TorbenKoehn]

No, you basically just need one Jade template, but you need some kind of processing mechanism/proxy file to render these templates, since Tale Jade is simply a PHP library, you can't load it in JS dynamically.

Look at the above code, the article.jade template can be used in PHP and JavaScript. In PHP you can use it normally ($renderer->render('article', ...)) while in JS you have to use the Proxy-File (template.php above) and AJAX (jQuery's load() method in this case) ($('#selectorOfTheElementYouWantTheTemplateContentsIn').load('path/to/proxy/file.php/article', ...))

[aavrug]

Ok great thanks. I think this will definitely solve my problem.

[TorbenKoehn]

Sure. If you have further questions, keep this thread updated, we can re-open it then :)