CODEWITHSUNDEEP
phpjqueryhtml
olga
olga

Reputation: 969

How to assign a file contens from php script to Jquery script variable?

I want to read the html file to variable $shtml in the php script (controller). Then pass this variable to jQuery variable and in jQuery perform the certain div with certain attributes search, i.e. extract some data from the file. I am not able to get the html file contents to jQuery script - script stops working. How to make this?

Corrected question:

<?php
....// action in Controller
  $filenameHtml = "some.html";
  $file1 = fopen( $filenameHtml, 'r');
  $shtml1 = json_encode( fgets($file1) );
 return $this->render('RecRecipBundle::dish/blue.html.twig', array(
            'shtml1' => $shtml1,
        ));
...
?>

Twig template:

{% block %}
<script type="text/javascript">

 document.getElementById('click_me').addEventListener( "click", function(event) {
    ( function(event) {
        var filestr = "{{ shtml1 }}" ;
        var parsed = jQuery.parseJSON( filestr ); //if i add this line the script stops working
        //alert ("parsed" + parsed);
        alert(filestr);  // prints : &quot;&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&quot;
        alert(this);
    }).call(document.getElementById('click_me'), event);
});            
</script> {% endblock %}

Original Question:

Php controller:

/**
 * Lists all Dish entities.
 *
 * @Route("/blue", name="blue")
 * @Method({"GET", "POST"})
 */
public function blueAction(Request $request)
{

$filenameHtml = "/var/www/RecB1_28/dwnl/Blueberries_raw_nutr.html";
$shtml1 = fgets($file1);

// it does not work with any of file read methods: fread, fscanf, file, file_get_contents 

$ans = $request->request->get('ans', ''); // will use later to pass jQuery variable to the php script

( isset($ans) and !is_null($ans) ) ? $ans : ''; // print_r($ans);
( isset($shtml1) and !is_null($shtml1) ) ? $shtml1 : ''; // 

return $this->render('RecRecipBundle::dish/blue.html.twig', array(
        'ans' => $ans,
        'shtml1' => $shtml1,
        'my_php_variable' => "just to check if prints",
    ));
}  //   public function blueAction(Request $request

Twig template:

{% extends "RecRecipBundle::layout.html.twig" %}

{% block body %}

<!-- works only with 'my_php_variable', if i use 'shtml1' script stops working -->
    <a href="#" id="click_me">Click Me</a>

   <br><br> WORKS:  my_php_variable = {{my_php_variable}} 
    <br><br> WORKS: shtml1= {{shtml1}}
       {# <br><br> WILL USE LATER TO PASS jQUERY variable: ans = {{ ans }}, #}

{% endblock %}

{% block footer %} {% endblock %}        

{% block javascripts %}

<script type="text/javascript">


 document.getElementById('click_me').addEventListener("click", function(event) {
    (function(event) {
        // .html() returns the html as plain text
        var filestr ='{{my_php_variable}}' // script works, alert window pops-out
        //var filestr ='{{shtml1}}' // script does not work, alert window does not pop-out
        //var filestr ='{{shtml1}} '.html(); // script does not work, alert window does not pop-out
        alert(this);
    }).call(document.getElementById('click_me'), event);
});       

</script>

{% endblock %}

Upvotes: 1

Views: 47

Answers (1)

jeroen
jeroen

Reputation: 91734

The best way to pass a value from php / twig to javascript, is to encode it as json. That way special characters will be escaped and in case of a string, the value will be quoted with double quotes.

So in your twig file you can pass the value as json and then you decode it in javascript. This will work for any kind of variable, so you can also send arrays or objects:

<script type="text/javascript">
    var php_variable = JSON.parse( {{ my_php_variable|json_encode() }} );

    // the rest of your script block
</script>

You can use json_encode() in the php function as well instead of in twig, as long as you use it only once.

Edit: Based on your edit, this is wrong:

var filestr = "{{ shtml1 }}" ;

json_encode() takes care of the encoding - and where necessary quoting - of the variable, so you should not add quotes manually. It should be just this:

var filestr = {{ shtml1 }};

Upvotes: 1

Related Questions