0

I wanted to use the postscribe library (https://github.com/krux/postscribe) to make an asynchronous request to google trends, which would update a div with a graph without requiring a page reload.

Using the library on its own through a few methods (drupal_add_js or a custom block) works just fine, but I wish for the js code to be reloaded everytime the appropriate ajax callback is initiated.

$form['trends-visual'] = array(
  '#prefix' => '<div id="trends-ajax-wrap">',
  '#suffix' => '<div id="trends-visualization-container"></div></div>',
  '#ajax' => array(
    'effect' => 'fade',
  ),
);

$form['trends-graph'] = array(
  '#prefix' => '<div id="trends-graph",',
  '#suffix' => '</div>',
);

$form['submit'] = array(
  '#type' => 'submit',
  '#value' => 'Submit',
  '#ajax' => array(
    'callback' => 'trends_ajax_submit_callback',
  )
);

The callback

function trends_ajax_submit_callback($ajax, &$form, &$form_state)  {

 $form_state['rebuild'] = TRUE;
 $commands = array();
 $commands[] = ajax_command_html('#trends-visualization-container',
   '<script>
     (function ($) {
       Drupal.behaviors.trends_ajax = {
         attach: function (context, settings) {
            postscribe(\'#trends-graph\', 
            \'<script src="//www.google.com/trends/embed.js?hl=en-US&q=Stephen%20Harper&tz=Etc/GMT%2B4&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=500&h=330">
            </script>\');
         }
       }
      })(jQuery);</script>');

return array('#type' => 'ajax', '#commands' => $commands);

Triggering the Ajax with $form['submit'] results in the following JS error:

Uncaught SyntaxError: Unexpected token ILLEGAL

This is referencing my JS code, specifically this line:

postscribe('#trends-graph', '<script src="//www.google.com/trends/embed.js?hl=en-US&q=Stephen%20Harper&tz=Etc/GMT%2B4&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=500&h=330">

Through googling it is suggested that there is an illegal hidden character somewhere, but after having looked at the code in VIM, EMACS, KATE, OKTETA, ATOM, JSBin, JSFiddle, and CodePen I am unable to find any strange hidden characters. The closest anomaly I can find are 0A characters through the hexeditor (Okteta), but I don't think those should be causing any problems.

Could someone provide some info as to how I can continue to troubleshoot?

Thanks a lot!

1 Answer 1

0

I managed to solve this by escaping one more character and removing one semicolon.

In the 2nd argument of ajax_command_html I was attaching a string which had two script tags, one inner and one outter. The inner closing script tag wasn't being passed unless I escaped its forward slash, like this:

<\/script>

Lastly, I had to remove the semicolon that was following "(jQuery)", just prior to closing the outter script tag, like this:

})(jQuery)</script>');

Hopefully this can be of use to someone!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.