PHP scope -> Javascript scope pattern?

Question

Anyone have any clean patterns for getting php vars into the js scope?

Two ways I have done it before is either injecting it with an actual call from the base template inside a document ready wrapper.

(jQuery/Smarty Template)

{literal}
$(document).ready(function() {
    TargetClass.targetVar = {/literal}{$phpVar}{literal};
});
{/literal}

Also setting it to a tag and pulling that from the DOM once the JS executes.

HTML

<link id="phpVar" value="{$phpVar}" />

JS

var phpVar = $('#phpVar').attr('value');

.

Have any of you found a better method?

Community · Accepted Answer · 2023-11-17 20:42:18Z

3

You can generate JSON very easily from php. This is a nice way to get a whole array (or even a tree of nested arrays) of data to javascript in one go.

You can put it in a <script> header, or fetch it async with ajax.

Here's the php docs:

https://www.php.net/manual/en/ref.json.php

if you put the json directly into the code, then it's already in javascript format. If you get it back from an ajax request, it'll be one big string, and you can parse it by simply passing it to eval()

edited Nov 17, 2023 at 20:42

CommunityBot

11 silver badge

answered Sep 9, 2009 at 22:57

JasonWoof

4,2061 gold badge22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Spot Over a year ago

Hmm yeah, interesting. I never actually have a need to push that much data into the JS scope so I never thought of using JSON in the template. Actually a good idea. Cleaner. Thanks.

JasonWoof Over a year ago

oh, also you can get rid of that document.ready stuff, and just set a js global. You've got the value before the js is even parsed, so you don't need to wait for anything before you can set it. Simply: var fromphp = $js_val (where $js_val is expanded by PHP)

Collectives™ on Stack Overflow

PHP scope -> Javascript scope pattern?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related