2012-07-02 4 views
1

https://stackoverflow.com/a/6065421 было полезно узнать, как подтвердить загрузку jquery. моему виджету понадобится класс, который был написан с помощью jquery. могу ли я получить некоторую помощь по внедрению этого другого класса, построенного с использованием jquery? спасибо,встроить скрипт jquery после загрузки jquery виджетами

Ниже приводится отрывок из приведенной выше ссылки с моим кодом, добавленным в заключительной части, как указано в коде комментариях:

(function(window, document, version, callback) { 
    var j, d; 
    var loaded = false; 
    if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "/media/jquery.js"; 
     script.onload = script.onreadystatechange = function() { 
      if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) { 
       callback((j = window.jQuery).noConflict(1), loaded = true); 
       j(script).remove(); 
      } 
     }; 
     document.documentElement.childNodes[0].appendChild(script) 
    } 
})(window, document, "1.3", function($, jquery_loaded) { //my code added below 
    var script_tag = document.createElement('script'); 
script_tag.setAttribute("type","text/javascript"); 
script_tag.setAttribute("src", "http://mysite.com/widget/slides.jquery.js"); 
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 

$('#slides').slides({}); //this line gives an error. 
}); 

прямо сейчас, я пытаюсь следующее на основе ответа (s) при условии, на этот вопрос (линия, которая бросает ошибку отмечается с комментарием):.

//this function is called after jquery being embedded has been confirmed. {mysite} placeholder is nonexistent in actual code. 
function main() { 
jQuery(document).ready(function($) { 
    var css_link = $("<link>", { 
     rel: "stylesheet", 
     type: "text/css", 
     href: "http://mysite/widget/widget.css" 
    }); 
    css_link.appendTo('head'); 

    $('#crf_widget').after('<div id="crf_widget_container"></div>'); 

    /******* Load HTML *******/ 
    var jsonp_url = "http://mysite/widget.php?callback=?"; 
    $.getJSON(jsonp_url, function(data) { 
     $('#crf_widget_container').html(data); 

     $('#category_sel').change(function(){ 
      alert(this.value); 
     }); 

     $.getScript("http://mysite/widget/slides.jquery.js", function(data, textStatus, jqxhr) { 
      alert(1); //fires ok 
      $('#slides').slides({}); //errors 
     }); 
    }); 
}); 
} 

error 1: $ is undefined .../slides.jquery.js?_=1341349267810 Line 22 
error 2: $("#slides").slides is not a function .../widget.js?1341349266628 Line 61 

$ ('#' слайды) слайды ({}); работает, когда я тестировал работу виджета. однако при вводе в виджет вышеупомянутые ошибки - это то, с чем я столкнулся.

у кого есть больше предложений?

после ожидания пары недель, я просто взял код из класса jquery, который мне нужен, и поместил его в тело после подтверждения загрузки jquery. я бы предпочел импортировать класс jquery после загрузки jquery, но я не мог понять это.

ответ

0

выждав пару недель, я просто взял код из класс jquery, который мне нужен, и поместил его в тело после подтверждения загрузки jquery. я бы предпочел импортировать класс jquery после загрузки jquery, но я не мог понять это.

1

Поскольку вы уже загружены JQuery, возможно, было бы проще использовать $.getScript() function, чтобы получить файл slides.jquery.js - что-то вроде этого:

<!-- language: lang-js --> 
(function(window, document, version, callback) { 
    var j, d, loaded = false; 
    if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "/media/jquery.js"; 
     script.onload = script.onreadystatechange = function() { 
      if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) { 
       callback((j = window.jQuery).noConflict(1), loaded = true); 
       j(script).remove(); 
      } 
     }; 
     document.documentElement.childNodes[0].appendChild(script) 
    } 
})(window, document, "1.3", function($, jquery_loaded) { //my code added below 
    // use $.getScript 
    $.getScript("http://mysite.com/widget/slides.jquery.js", function(data, textStatus, jqxhr) { 
     $('#slides').slides({}); 
    }); 
}); 
+0

Я обновил свой первоначальный вопрос, чтобы показать текущую функцию, которую я использую. он использует предложенный вами подход, но линия в теле все еще бросает ошибку. Я тестировал эту строку, которая выдает ошибку с обычным не-виджетным подходом, и нет проблем. поэтому, кажется, jquery недоступен, когда это необходимо. код, предшествующий блоку $ .getScript, не дает проблемы, которая является синтаксисом, поддерживающим jquery. –

+0

Какая ошибка? Вы уверены, что '$ ('# slides')' существует? Почему '' .getScript() 'внутри' $ .getJSON() ', он должен быть вне этой функции, если только' $ ('# slides') 'находится внутри загруженного HTML-кода. Вы слышали о [yepnope.js] (http://yepnopejs.com/)? – Mottie

+0

Я отредактировал мой вопрос, чтобы показать ошибки. $ .getScript() вложен в getJSON() по той причине, что вы отметили. Я смотрел на yepnope.js, но мне интересно, можно ли исправить мою текущую настройку кода, так как я не видел там пример «make-a-widget»? –

Смежные вопросы