Why can't I get the icons when I use jQueryUI with Google Ajax API within Jetpack?_问答_开发者

Why can't I get the icons when I use jQueryUI with Google Ajax API within Jetpack?

开发者 https://www.devze.com 2022-12-18 04:47 出处：网络

I can\'t get any icons to be shown on a modal dialog box when I try to use jQueryUI via Google Ajax API. The icons do not appear but when I click on the locations where they are supposed to be the rel

I can't get any icons to be shown on a modal dialog box when I try to use jQueryUI via Google Ajax API. The icons do not appear but when I click on the locations where they are supposed to be the relevant functinality works (e.g. I can resize and close the modal dialog box). Here's the problematic screenshot and my code for Jetpack:

http://www.flickr.com/photos/64416865@N00/4303522684/

function testJQ() {
    var doc = jetpack.tabs.focused.contentDocument;
    var win = jetpack.tabs.focused.contentWindow;

    $.get("http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js", function(js) {

     var script = doc.createElement("script");
     script.innerHTML = js;
     doc.getElementsByTagName('HEAD')[0].appendChild(script);

     $.get("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js", function(js) {

        var script = doc.createElement("script");
        script.innerHTML = js;
        doc.getElementsByTagName('HEAD')[0].appendChild(script);

        $.get("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css", function(js) {

        var style = doc.createElement("style");
        style.innerHTML = js;
        doc.getElementsByTagName('HEAD')[0].appendChild(style);

        script = doc.createElement("script");

        script.innerHTML = 'var myDialogFunc = function () {';
        script.innerHTML += '$("<div id=dialog title=\\"Basic Dialog\\"> <p>The dialog window can be moved, resized and closed with the X icon.</p></div>").appendTo("body");';
        script.innerHTML += '$("#dialog").dialog({'
        script.innerHTML += '      bgiframe: true, height: 140, modal: true';
        script.innerHTML += '  });';
        script.innerHTML += '};';       

        doc.body.appendChild(script);
    win.wrappedJSObject['myDialogFunc']();      
        });
    });
    });
}

On the other hand, in a simple html document I can use Google 开发者_如何学PythonAjax API, load jquery and jQueryUI and get the icons correct without any problems. Here's the screenshot and source code that works as I expect:

http://www.flickr.com/photos/64416865@N00/4303522672/

<html>
<head>

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
var myDialogFunc = function () {
  $("#dialog").dialog({
  bgiframe: true, 
  height: 140, 
  modal: true
 });
};

  // Load jQuery
  google.load("jquery", "1.4.0");
  google.load("jqueryui", "1.7.2");

  google.setOnLoadCallback(function() {
    myDialogFunc();
  });

</script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />

</head>

<body>

 <div id="dialog" title="Basic Dialog"> 
  <p>The dialog window can be moved, resized and closed with the X icon.</p>
 </div>
</body>

Any ideas about why I can't get the icons in my Jetpack version?

Code below solves my problem:

js = js.replace("url(", "url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/", "g"); 
style.innerHTML = js;

Why can't I get the icons when I use jQueryUI with Google Ajax API within Jetpack?

精彩评论

关注公众号

热门标签

图文推荐

Why can't I get the icons when I use jQueryUI with Google Ajax API within Jetpack?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：