locked
JQuery UI Dynamic Loading $.getscript and using the Dialog method RRS feed

  • Question

  • User9952089 posted

    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>

    Thursday, May 26, 2016 1:35 PM

All replies

  • User61956409 posted

    Hi nicksoft,

    $.getScript('/jquery-ui.min.js', function(response,status){ debugger; alert(status);});

    Please make sure if the URL is correct, and I’d like to know if alert(status) return “success”.

    Besides, the following sample works fine on my side, you could refer to it.

    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <%--<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>--%>
    
        <style>
            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>
            $.getScript('//code.jquery.com/ui/1.11.4/jquery-ui.js', function (response, status) {
                if (status == "success") {
                    $("#Button1").click(function () {
                        $("#dialog-message").dialog();
                    })
                }
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <input id="Button1" type="button" value="Show Dialog" />
                <br />
    
                <div id="dialog-message" title="Important information" style='display: none;'>
                    <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>
            </div>
    
        </form>
    </body>
    

    Best Regards,

    Fei Han

    Friday, May 27, 2016 6:40 AM
  • User9952089 posted

    Thanks a lot Fei. Does this URL has to be Hosted URL or local File path or local relative path should work as well??

    Also if you have multiple JQuery file and one one Jquery-UI file loaded in browser for some app, then do we need to do any thing tricky to get Dialog method work?? I am asking because for JQuery methods to work, some time we have to do $.noconflict(true); in order to resolve the conflict between 2 instances and stay working with one instance. So in that sort of environment, do we need to try specific coding to get Dialog method working??

    Friday, May 27, 2016 1:52 PM
  • User-474980206 posted
    Yes, if you load two jquery libraries, and then include a library that uses jquery, you need to be sure the active jquery is the one the library supports.

    But the issues with your code, was you where calling dialog before the the script loaded. See how the above example the dialog was configured in the script loaded callback.
    Sunday, May 29, 2016 4:33 PM