javascriptphpjquerywordpressthickbox

Thickbox does not show contents of file fetched via jQuery.get()

I am trying to open a php file (containing HTML markup) within Thickbox in WordPress.

So far, I have managed to get the Thickbox open up. The URL to the php file is also correct but it's content does not load up in the thick box. Here is my code:

Here is my Code :

$('.add').click(function() {
    $('html').addClass('image_spe');
    num = $(this).attr('data-num');
    formfield = $('.id_img[data-num="'+num+'"]').attr('name');
    var id=$("#post_ID").val();
    jQuery.get(dialog_url, function(){ /* here, dialog_url is the URL to the PHP file*/
    var f = jQuery(window).width();
        b = jQuery(window).height();
        f = 920 < f ? 920 : f;
        f -= 80;
        l = f/2;
        b -= 84;
        tb_show('Add', "#TB_inline?post_id="+id+"&width=" + f + "&height=" + b + "&inlineId=my-dialog");
        jQuery("#TB_window").css({'width':920, 'margin-left':-l});
    });

    return false;
});

The PHP code is here :

<?php 
?>
  <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      </head>
      <body>
          <div id="my-dialog">
              <p>TESTING... YOU SHOULD BE ABLE TO SEE THIS IN THICKBOX</p>
          </div>
      </body>
  </html>
<?php ?>

The thickbox opens without any issues and the URL to the file is correct. But the content is not displayed.

How can i do this ?

Solution

  • jQuery.get() might need a small modification.

    Change this... 

    jQuery.get(dialog_url, function(){...}

    ...to this

    jQuery.get(dialog_url, function(data){
    jQuery('body').append(data);
    ...
}

    Hopefully it should work!