Hi I have a situation that I am end up loading the script dynamically and use its method as shown below, but by the time code for dialog execute the JQuery UI method doesn't get load in the browser. can some one help where the issue in the code??
<html> <head> <title> test Dialog </title> <style type="text/css"> body { font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif; } .ui-dialog-osx { -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; border-width: 0 8px 8px 8px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> </head> <body> <img name="AppDefault" id="appdefaultID" style="border-width: 0px; cursor: pointer; width: 25px; height:25px;" src="flower_150.jpg"></img> <div id='dgTest' style='display:none;'> Hello World </div> <div id="dialog-message" title="Important information"> <span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float:left; margin:0 7px 0 0;"></span></span> <div> <p> Hello Test </p> </div> </div> <script type="text/javascript"> $.getScript('/jquery-ui.min.js', function(response,status){ debugger; alert(status);}); $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', '/jquery-ui.min.css')); var target = $("#appdefaultID"); var horz_measure = target.offset().left; var vert_measure = target.offset().top; $("#dialog-message").dialog({ modal: true, draggable: false, resizable: false, show: 'blind', hide: 'blind', position: { my: "left top+15", at: "left", of: target }, width: 400, dialogClass: 'ui-dialog-osx', buttons: { "I've read and understand this": function() { $(this).dialog("close"); } } }); </script> </body> </html>