Variable from html to javascript

Question

I am wondering on how to solve my problem , but I don't know which is the best way to do this. So I have an html page in which I am passing a id through $_GET[id_plot]) that I print it like this :

  echo "var id_get_plot = '".$_GET[id_plot]."'; ";

That , I suppose is a global variable , that , let's say it clearly, we all hate. The goal is to use this var inside an external script.

The solution I am adopting right now is to instanciate a namespace and then binding the var to it , like this :

HTML

      echo " Model = Model || {};
             Model.id_get_plot = '".$_GET[id_plot]."'; ";

SCRIPT.JS

      Model = Model || {};
      Model.get_id = function(){ 
         console.log(this.id_get_plot) //it prints the right value
      });

What I am thinking is : is this a good way to solve my problem? There are other , and if possible, more elegant way to solve this ?

Thank you in advance

"...elegant way to solve this?", yup, AJAX is the elegant way. — elclanrs
– elclanrs, Commented Jun 18, 2013 at 21:45
Don't generate JavaScript from PHP. Use json_encode() to create a JSON object that your JS can use. This decouples the two languages, and your data will be properly escaped — Ruan Mendes
– Ruan Mendes, Commented Jun 18, 2013 at 21:46
@elclanrs Normally I'd agree - AJAX is a good solution, but it's a bit heavyweight just to pass a small amount of fixed data into a page. json_encode() is quick and easy. — user1864610
– user1864610, Commented Jun 18, 2013 at 21:51
@elclanrs Making an extra request when it's not needed? Not that elegant — Ruan Mendes
– Ruan Mendes, Commented Jun 18, 2013 at 21:51
Ok, I got it , but I was also wondering on how "pass" the id from the html to the javascript. Is namespace a good solution for this? — steo
– steo, Commented Jun 18, 2013 at 21:54

Ruan Mendes · Accepted Answer · 2013-06-19 20:08:56Z

1

Don't generate JavaScript from PHP. Use json_encode() to create a JSON object that your JS can use. This decouples the two languages, and your data will be properly escaped

The simplest thing to put it into a namespace is the following, there are better ways, but this should get you going.

var Model = window.Model || {
     getId: function() {
        return this.id;
     },
     // Would be better as a constructor, but since you want a singleton
     init: function(id) {
         this.id = id;
     }
};
// If you need more than one value, make an object out of this....
Model.init(<?php echo json_encode($_GET['id_plot']) ?>)

edited Jun 19, 2013 at 20:08

answered Jun 18, 2013 at 21:54

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

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

3 Comments

steo Over a year ago

This is really new to me. I did not know that i could use php inside javascript. thank you!

steo Over a year ago

Uhm..it is not getting the value from the GET call \:

Ruan Mendes Over a year ago

@steo Yes there was a typo in there, it's fixed, but you should have been able to find it because the syntactically incorrect

Collectives™ on Stack Overflow

Variable from html to javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related