How to add javascript in json data?

Question

I want to show image preview and caption using json and jquery. My PHP script encodes json data and sends to jquery for preview. The data contains html and javascript. In the preview I see HTML but javascript tag is omitted. I believe json parser removes this tag. Here is my code

PHP Code

$code = '
<div class="mosaic-block bar">
     <div class="mosaic-overlay">
         <div class="details">
              <h4>Sloppy Art - A Mess of Inspiration</h4>
              <p>via the Nonsense Society</p>
         </div>
     </div>
     <div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/florian.jpg"/></div>
</div>
<script type="text/javascript">jQuery(function($){$(".bar").mosaic();});</script>';

$json_msg = array('success'=>true, 'msg'=> $code);
echo encode_json($json_msg);
exit;

function encode_json ($mixed_data) {
    if(is_array($mixed_data) && isset($mixed_data['msg'])) {
        $mixed_data['msg'] = utf8_encode($mixed_data['msg']);
    }
    return json_encode($mixed_data, JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_QUOT);
}

Javascript

var form_options = {
    success:        ShowPreview,
    url:            url,
    type:           'post',
    dataType:       'json',
    clearForm:      false,
    resetForm:      false,
    cache:          false,
    timeout:        200000,
};
$('.preview-form').ajaxSubmit(form_options);


function ShowPreview(data) {
    if(data.success){
        $.fn.colorbox({html:data.msg});
    }
}

The above code displays everything fine in colorbox except this part is missing <script type="text/javascript">jQuery(function($){$(".bar").mosaic();});</script> How do I escape this javascript being parsed by json parser?

EDIT

I can confirm the problem is with json parser. I changed datatype from json to HTML in form submit option and then I found following encoded string in response E\u003Cscript type=\u0022text/javascript\u0022\u003EjQuery(function($){$(\u0022.bar\u0022).mosaic();});\u003C/script\u003E

I revert back then data into json using following code var data = jQuery.parseJSON(msg);

The script tag was removed from the data. Still trying to figure out why parser removes javascript tag?

Answer 1

jQuery(function($){...}); is a shortcut for $(document).ready(function(){...});

That means jQuery(function($){$(".bar").mosaic();}); Will be executed only upon ready() event. Since you are loading the code inside a colorbox, the ready() event is already fired and this snippet will never get triggered.

The best bet is to host your javascript separately and call a $.getScript() on the success() callback

If the script part itself is missing then you can create a JSON object in this way,

{
    html: "some html",
    js: "some js"
}

and then eval() the javascript code. (yes its bad security wise)

Also you will have to get rid of jQuery(function($){}) part