Using a callback for an external widget with Laravel 4.1 PHP Controller and JQuery/JSONP

Question

I am trying to make an external widget that will allow users on other sites to make a "vote", which I want to collect and store in my DB. I am trying to integrate this with my controllers/models in Laravel. However, when I place the javascript tag and the div on another site, the info is not being displayed. Right now I am trying to just pass simple info with jsonp. Here is the code:

WidgetController.php:

<?php

class WidgetController extends BaseController {


    public function external_widget() {


        $data = "{Hello World!}";

        if(array_key_exists('callback', $_GET)){

            header('Content-Type: text/javascript; charset=utf8');
            header('Access-Control-Allow-Origin: http://www.example.com/');
            header('Access-Control-Max-Age: 3628800');
            header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

            $callback = $_GET['callback'];
            echo $callback.'('.$data.');';

        }else{
            // normal JSON string
            header('Content-Type: application/json; charset=utf8');

            echo $data;
        }
    }

}

widgetscript.js:

(function() {

    // Localize jQuery variable
    var jQuery;

    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.11.0') {

        var script_tag = document.createElement('script');
        script_tag.setAttribute("type","text/javascript");
        script_tag.setAttribute("src","//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js");

        if (script_tag.readyState) {
          script_tag.onreadystatechange = function () { // For old versions of IE
              if (this.readyState == 'complete' || this.readyState == 'loaded') {
                  scriptLoadHandler();
              }
          };
        } else { // Other browsers
          script_tag.onload = scriptLoadHandler;
        }

         // Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    } else {
        // The jQuery version on the window is the one we want to use
        jQuery = window.jQuery;
        main();
    }

    /******** Called once jQuery has loaded ******/
    function scriptLoadHandler() {
        // Restore $ and window.jQuery to their previous values and store the
        // new jQuery in our local jQuery variable
        jQuery = window.jQuery.noConflict(true);
        // Call our main function
        main(); 
    }

    /******** Our main function ********/
    function main() { 
        jQuery(document).ready(function($) { 
           /******* Load CSS *******/
            var css_link = $("<link>", { 
                rel: "stylesheet", 
                type: "text/css", 
                href: "widgetstyle.css" 
            });
            css_link.appendTo('head');          

            /******* Load HTML *******/
            var jsonp_url = "http://myurl.com/widget/external_widget?callback=?";
            $.getJSON(jsonp_url, function(data) {
              $('#example-widget-container').html("This data comes from another server: " + data.html);
            });
        });
    }

    })(); // We call our anonymous function immediately

widgetstyle.css is left blank for now.

The relevant route:

Route::get('/widget/external_widget', array('uses' => 'WidgetController@external_widget'));

Finally, I try to call this on another web page with:

    <div id="example-widget-container"></div>

The "hello world" i'm trying to print out on another website is not displaying. Any ideas what issues are going on?

Answer 1

To use JSONP technique, you should return valid JSON object with a function call wrapped around it. JSON is a collection of unordered attribute-value pairs. {Hello World!} is not a valid JSON, try to use proper JSON formatting may fix your problem.

PHP

$data = "{msg:'Hello World!'}";

Javascript

var jsonp_url = "http://myurl.com/widget/external_widget?callback=?";
$.getJSON(jsonp_url, function(data) {
  $('#example-widget-container').html("This data comes from another server: " + data.msg);
});