JQuery fails to load when i use a php variable

I’m incorporating PHP code into JQuery like this:

                echo "<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
                <script type='text/javascript'>
                $(document).ready(function() {
                    var count = ($('.data').length + 25);
                    /* This is the line */var c = $c;
                    $('#data').load('data.php?v=' + count + '&c=' + c)
                    $('.btn-data').click(function() {
                        count = count + 25;
                        $('#data').load('data.php?v=' + count + '&c=' + c)
                    })
                })</script>";

The PHP variable shows as blue, there are no errors showing, but when I run it it refuses to work. I’ve tested everything else and I’m 100% sure PHP is the one causing the problem.

How can I fix this?

Answer

If $c is your php variable you will need to quote and join it inside an echo tag.

But as Carton (+1) said, is it a string, integer, object?

If it’s an integer, this should work…

<?php

echo "<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script type='text/javascript'>
          $(document).ready(function() {
          var count = ($('.data').length + 25);
          var c = " . $c . ";
          $('#data').load('data.php')
             $('.btn-data').click(function() {
                 count = count + 25;
                  $('#data').load('data.php?v=' + count + '&c=' + c)
             })
          });
      </script>";

If it’s a string this should work…

<?php

echo "<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script type='text/javascript'>
          $(document).ready(function() {
          var count = ($('.data').length + 25);
          var c = '" . $c . "';
          $('#data').load('data.php')
             $('.btn-data').click(function() {
                 count = count + 25;
                  $('#data').load('data.php?v=' + count + '&c=' + c)
             })
          });
      </script>";

If it’s an object, you will have to parse the var or encode it.

Sometimes if you want to echo or return big blocks of html inside php, you can use an output buffer to capture the html, and then you can either return the html via a function, or echo it. This just makes your html easier to read when it’s not wrapped inside echo quotes tags.

<?php

// c sting php var 
$c = 'string';

// start output buffer
ob_start();

?>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        let count = ($('.data').length + 25);
        let c = '<?=$c?>';
        $('#data').load('data.php');
        $(this).on('click', '.btn-data', function() {
            count = count + 25;
            $('#data').load('data.php?v=' + count + '&c=' + c);
        });
    });
</script>

<?php

// store everything between ob_start() and here into a php variable
$script = ob_get_clean();

// return script html
return $script;

// or echo script html
echo $script;

// not both together obviously

?>

Advertisement

Answer