getScript

Question

के साथ jQuery UI लोड हो रहा है मैं एक विजेट बनाने की कोशिश कर रहा हूं जिसके लिए व्यक्ति को jQuery और jQuery.UI लोड करने की आवश्यकता है।

लोड करने के लिए jQuery प्राप्त करना कोई समस्या नहीं है, लेकिन हेई जोड़ना हेडर बस काम नहीं कर रहा है और मुझे यह त्रुटि मिल रही है।

b is undefined 
[Break on this error] (function(b,c){function f(g){return!b(...NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106, 

यहां लिपि अपने सरल रूप में है।

(function() { 

// Localize jQuery variable 
var jQuery; 

/******** Load jQuery if not present *********/ 
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.4') { 
    var script_tag = document.createElement('script'); 
    script_tag.setAttribute("type", "text/javascript"); 
    script_tag.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"); 
    script_tag.onload = scriptLoadHandler; 
    script_tag.onreadystatechange = function() { // Same thing but for IE 
     if (this.readyState == 'complete' || this.readyState == 'loaded') { 
      scriptLoadHandler(); 
     } 
    }; 
    // Try to find the head, otherwise default to the documentElement 
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 

} else { 
    // The jQuery version on the window is the one we want to use 
    jQuery = window.jQuery; 
    main(); 
} 



/******** Called once jQuery has loaded ******/ 
function scriptLoadHandler() { 
    // Restore $ and window.jQuery to their previous values and store the 
    // new jQuery in our local jQuery variable 
    jQuery = window.jQuery.noConflict(true); 
    // Call our main function 
    main(); 
} 

/******** Our main function ********/ 

function main() { 

// Add some validation here to make sure UI is not loaded etc... 
jQuery.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js'); 

jQuery(document).ready(function($) 
{  
    var date = new Date(); 
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); 
    $('.datepicker').datepicker({minDate: new Date(y, m, d)}); 

    /******* Load HTML *******/ 
    var jsonp_url = "/search/form/%AFFILIATE_ID%/%FORM_TYPE%/"; 
    $.getJSON(jsonp_url, function(data) 
    { 
     $('#my-widget').html(data); 
    }); 

}); 
} 

})(); // We call our anonymous function immediately 

कोई विचार मैं इसे कैसे हल कर सकता हूं?

Answer 1

मैंने पहले इस में भाग लिया है - jQuery यूआई लोड होने पर jQuery को "परिभाषित" नहीं किया जाता है। हां, यह सच भी हो सकता है भले ही jQuery इसे लोड कर रहा हो! ;-)

jQuery UI स्क्रिप्ट वैश्विक नामjQuery अपने पहले तर्क के रूप में लेता है। जब तक आप jQuery.noConflict(true) कहलाते हैं, तब तक आप jQuery UI को लोड नहीं कर रहे हैं, जो वैश्विक ऑब्जेक्ट से jQuery को हटा देता है (window)।

इसे हल करने के दो तरीके हैं।यदि आप ठीक हैं window.jQuery बरकरार रखते हैं, तो बस true को अपने noConflict कॉल से हटा दें; इस $ पर नियंत्रण त्याग देता है, लेकिन के लिए jQuery UI का उपयोग करने के लिए चारों ओर jQuery छोड़ देता है:

/******** Called once jQuery has loaded ******/ 
function scriptLoadHandler() { 
    // Restore $ to its previous values and store the 
    // new jQuery in our local jQuery variable 
    jQuery = window.jQuery.noConflict(); // no argument! 
    // Call our main function 
    main(); 
} 

वैकल्पिक रूप से, एक कॉलबैक में अपने noConflict कॉल के लिए कदम getScript पर:

/******** Called once jQuery has loaded ******/ 
function scriptLoadHandler() { 
    // Store jQuery in a local variable so it can be removed later 
    jQuery = window.jQuery; 
    // Call our main function 
    main(); 
} 

/******** Our main function ********/ 

function main() { 

// Add some validation here to make sure UI is not loaded etc... 
jQuery.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', function() { 
    jQuery.noConflict(true); 
}); 

// ... 

Answer 2

मेरा फ़ंक्शन कच्ची स्क्रिप्ट टेक्स्ट और यह काम जोड़ता है। लेकिन .src

function addScript(content) { 
    var script = document.createElement("SCRIPT"); 

    script.type = "text/jscript"; 
    script.text = content; 

    self.document.getElementsByTagName('head')[0].appendChild(script); 

    if(navigator.userAgent.toLowerCase().indexOf('msie') < 0)// it's not IE 
     eval(content); 
} 

मेरी बुराई पर प्रयास न करें।

/* लोड एचटीएमएल */

var jsonp_url = "/search/form/%AFFILIATE_ID%/%FORM_TYPE%/"; 
$.getJSON(jsonp_url, function(data) 
{ 
    $('#my-widget').html(data); 
}); 

/******* Load HTML *******/ 
var jsonp_url = "/search/form/%AFFILIATE_ID%/%FORM_TYPE%/"; 
$('#my-widget').load(jsonp_url, function(response, status, xhr) 
{ 
    $(this).html(response); 
}); 

करने के लिए परिवर्तन; D

Answer 3

समस्या अपने मुख्य कार्य प्रतीत होता है। आप jQuery UI लोड कर रहे हैं और फिर jQuery (दस्तावेज़) .ready() को कॉल कर रहे हैं। तैयार() तुरंत आग लग जाएगा क्योंकि डीओएम पहले ही लोड हो चुका है। तो आप jQuery UI को लोड करना शुरू करते हैं और फिर jQuery UI लोड होने से पहले तुरंत jQuery UI कोड निष्पादित करते हैं। GetScript() के लिए आपको सफलता हैंडलर में jQuery UI UI कोड के साथ अपना फ़ंक्शन पास करना चाहिए।

jQuery.getScript(url, [ success(data, textStatus) ]) 
    url - A string containing the URL to which the request is sent. 
    success(data, textStatus) - A callback function that is executed if the request succeeds. 

http://api.jquery.com/jQuery.getScript/

अद्यतन: के बाद jQueryUI पूरी तरह से लोड है आप अपने jQueryUI कोड निष्पादित करने के लिए की जरूरत है। अभी आप jQueryUI कोड को निष्पादित करने का प्रयास कर रहे हैं जैसे jQueryUI लोड हो रहा है। इसके बजाए इसे आजमाएं। ध्यान दें कि मैं $ (दस्तावेज़) .ready() का उपयोग नहीं कर रहा हूं, लेकिन jQuery.getScript() के सफल समापन के बाद चलाने के लिए एक अज्ञात फ़ंक्शन को पंजीकृत करने के बजाय।

function main() { 
    // Add some validation here to make sure UI is not loaded etc... 
    jQuery.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', 
     function() { 
      var $ = jQuery; // Since we don't get this as an event parameter and we're using jQuery.noConflict() 
      var date = new Date(); 
      var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); 
      $('.datepicker').datepicker({minDate: new Date(y, m, d)}); 

      /******* Load HTML *******/ 
      var jsonp_url = "/search/form/%AFFILIATE_ID%/%FORM_TYPE%/"; 
      $.getJSON(jsonp_url, function(data) { 
       $('#my-widget').html(data); 
      }); 
     }); 
} 

Answer 4

यह अपनी स्थिति के लिए overkill हो सकता है, लेकिन LAB.js छोटा है, एमआईटी-लाइसेंस प्राप्त है, और स्क्रिप्ट लोडिंग पर जुर्माना नियंत्रण के लिए एक बहुत ही मजबूत ढांचा प्रदान करता है। उदाहरण के लिए:

$LAB 
    .script("must_be_first.js").wait() 
    .script("jquery.js")      // wait for must_be_first.js 
    .script("romulus.js,remus.js").wait()  // any order  
    .script("jquery-ui.js").wait(function(){ // not until all above executed 
    do_stuff();       
    do_other_stuff(); 
    }).wait() 
    .script("must_come_last.js");