CODEWITHSUNDEEP
javascriptphpjquery
user1834464
user1834464

Reputation:

Ways to pass information from PHP to JQUERY?

I'm having a hard time figuring out what is the best way to transfer information from PHP to Jquery. I know putting PHP in Javascript is a really bad alternative (my JS and PHP files are seperated anyway), so what I usually do is print the info with PHP in the HTML with a input type hidden and retrieve the info in JQuery using the element.text() or .val() or any other method, but I feel this is kind of noobish. Is there a better way?

Upvotes: 0

Views: 146

Answers (2)

zzzzBov
zzzzBov

Reputation: 179176

I recommend never using a server-side language to build JavaScript. Instead, keep your data in HTML (model), your styles in CSS (view), and your interactions in JS (controller).

When you need to pass data to JavaScript, make good use of attributes and templates.

When it comes to passing data via attributes, you can go a long way with just using native attributes.

In this example, it is quite apparent that the link will open a modal, and the [href] attribute is used to point to where the modal lives:

<a href="#modal" class="modal-link">Open modal</a>
<div id="modal">lorem ipsum</div>

When you can't fit data within native attributes, you should make use of [data-*] attributes.

In this example, [data-tooltip] is being used to store a rich-text tooltip.

<div data-tooltip="&lt;p&gt;lorem ipsum&lt;/p&gt;">...</div>

Even more importantly, jQuery automatically grabs and casts all [data-*] attributes on a DOM node when .data() is called on the node.

<div id="example"
    data-foo="bar"
    data-fizz="true"
    data-max="100"
    data-options="{&quot;lorem&quot;:&quot;ipsum&quot;}">
    ...
</div>
<script>
    $('#example').data();
    /*
    {
        foo: 'bar',
        fizz: true,
        max: 100
        options: {
            lorem: 'ipsum'
        }
    */
</script>

The thing to watch out for is JSON encoding within HTML encoding. jQuery makes it very straight-forward to get the data out of the DOM node without needing to worry about decoding, but in PHP you need to make sure that you json_encode data before calling htmlentities:

<div data-example="<?= htmlentities(json_encode($someArray)) ?>">...</div>

In some instances you may want to make use of jQuery's .attr() method.

For large amounts of data, such as an HTML template string, you can use <script> tags with a template mime type (such as type="text/x-jquery-tmpl"):

<script id="template-example" type="text/x-jquery-tmpl">
    <h1>${title}</h1>
    <p>${body}</p>
</script>

Or you can use the HTML5 <template> element:

<template id="template-example">
    <h1>${title}</h1>
    <p>${body}</p>
</template>

You can then access the HTML contents of the element run it through whatever your favorite flavor of string templating happens to be.

Upvotes: 1

Ken Herbert
Ken Herbert

Reputation: 5236

You can simply echo PHP variables into Javascript variables for your jQuery to use like this:

<?php
$stringVar = "hi";
$numVar = 1.5;
?>

<script>
var stringVar = "<?php echo $stringVar; ?>";
var numVar = <?php echo $numVar; ?>;
</script>

This can be used for practically any data type as long as you convert it correctly upon echoing it (oftentimes json_encode() is enough for complex structures such as arrays and objects).

Also note that this way will only work if your jQuery code is included after these variables have been defined.

The other way is to look into using AJAX, but if these are static variables that don't need to change within the lifetime of the page then I would go with the method above.

Upvotes: 1

Related Questions