echo javascript and html in php

Question

Trying to echo html on javascript condition in a php function. But i don't know if it's possible to echo out everything like this:

if(!is_user_logged_in()) {

    function add_preloader(){

       echo "<script>
    if (readCookie('referrer') == null) {
       <section class='loading-overlay'>

        <div class='loader-inner ball-grid-pulse'>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

        </div>

  </section>}
</script>" ;

    }

I'm trying to show a preloader only one time using cookie in a wordpress function

Yes, you can echo HTML and JS in PHP. And no, you can't output HTML in JS as it's invalid code. — Justinas
– Justinas, Commented Jun 23, 2016 at 10:42
I would never recommend you to execute the javascript inside a php function like that. and also , <script> is used for javascript functions , if you want to echo html inside it , you have to wrap html inside "" or ' ' (qoutes). But i can see also you are reading a cookie , you don't need javascript to read a cookie you can also read the cookie by using php $_COOKIE['referrer'] — Arsh Multani
– Arsh Multani, Commented Jun 23, 2016 at 10:42

Arsh Multani · Accepted Answer · 2016-06-23 10:47:35Z

0

First of all , i will not recomment you to echo the javascript inside an php function , second thing is i can see also you are reading a cookie , you don't need javascript to read a cookie you can also read the cookie by using php $_COOKIE['referrer']

so your code will be like :

if(!is_user_logged_in()) {

    function add_preloader(){

    if (!isset($_COOKIE['referrer'])) {
      echo " <section class='loading-overlay'>

        <div class='loader-inner ball-grid-pulse'>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

        </div>

  </section>" ;

    }

answered Jun 23, 2016 at 10:47

Arsh Multani

1,5911 gold badge11 silver badges31 bronze badges

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

Comments

Marc Compte · Accepted Answer · 2016-06-23 10:51:58Z

Maybe not the best idea, but yes you can. You have to think that the initial parser is a PHP and it outputs something. In your case the PHP would output this:

<script>
    if (readCookie('referrer') == null) {
       <section class='loading-overlay'>
        <div class='loader-inner ball-grid-pulse'>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </section>
    }
</script>

This code starts and ends with script and treats everything inside as a script. The problem here is that <section ... is not anything like Javascript.

You can't type in plain HTML inside a Javascript function and expect the browser to understand it. It should only use pure Javascript, something like ...

<script type="text/javascript">
    if (readCookie('referrer') == null) {
       var section = document.createElement('section');
       section.className = 'loading-overlay';
       var div = document.createElement('div');
       div.className = 'loader-inner ball-grid-pulse';
       section.appendChild(div);
       var innerDiv = document.createElement('div');
       div.appendChild(innerDiv);
       ...
       ...
       document.getElementById('container').appendChild(section);
    }
</script>

Here container would be the id of an HTML tag already existing in the DOM of your page.

Collectives™ on Stack Overflow

echo javascript and html in php

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related