PHP error when trying to set html element to google trends embed

Question

I am getting an error when trying to set the html property of an element with jquery to google trends embed.

<!DOCTYPE html>
<html>
<head>
    <title>Titlw</title>
</head>
<body>
    <div class="hide" id="google_trends"></div>
</body>
<script type="text/javascript">
    /*! jQuery v3.4.1 | (c) JS Foundation and other contributors | jquery.org/license */
</script>
</html>
<?php

echo "
<script>
    $('#google_trends').removeClass('hide');
    $('#google_trends').html('<script type=\"text/javascript\" src=\"https://ssl.gstatic.com/trends_nrtr/2213_RC01/embed_loader.js\"></script> <script type=\"text/javascript\"> trends.embed.renderExploreWidget(\"TIMESERIES\", {\"comparisonItem\":[{\"keyword\":\"a\",\"geo\":\"\",\"time\":\"today 5-y\"}],\"category\":0,\"property\":\"froogle\"}, {\"exploreQuery\":\"date=today%205-y&gprop=froogle&q='a'\",\"guestPath\":\"https://trends.google.com:443/trends/embed/\"});</script>');
</script>";


?>

Error message -

"Uncaught SyntaxError: Invalid or unexpected token"

Why even involve PHP in this? (That error also reads like a developer console error, not PHP/server side) — user3783243, Aug 04 '20 at 23:33
Why are you doing this? Surely you can simply add the script to the html. Why use JQuery? And why is PHP being used? — Guy Lowe, Aug 05 '20 at 06:43

my_workbench · Accepted Answer · 2020-08-05T08:30:49.240

You do not need to print the output using echo function.It will embed itself within the specified div. Here the div id is google_trends
Your requirement to show/hide google_trends div will be fulfilled by initializing jquery using ready function. Once the page loads, it will remove hide class and show google trend request results.
Use renderExploreWidgetTo function than renderExploreWidget.With this, you can define your div id in which you want to display your output.

Try the following code.

<!DOCTYPE html>
<html>
<head>
    <title>Titlw</title>
    
</head>
<body>
    <div class="hide" id="google_trends"></div>


    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1328_RC04/embed_loader.js"> </script>
 </body>
</html>

<script type="text/javascript">
$( document ).ready(function() {
    $('#google_trends').removeClass('hide');
    trends.embed.renderExploreWidgetTo(google_trends,'TIMESERIES', {'comparisonItem':[{'keyword':'a','geo':'','time':'today 5-y'}],'category':0,'property':'froogle'}, {'exploreQuery':'date=today%205-y&gprop=froogle&q=a','guestPath':'https://trends.google.com:443/trends/embed/'});

});

</script>

Note: This is a standalone code as I have added jquery CDN link and google trend's ember_loader js file.

PHP error when trying to set html element to google trends embed

1 Answers1