在.js页面中包含Jquery脚本

Question

Sorry if title is not too clear but I think it's about right. NEhow, what I would like to do is a bit like (well is to a certain extent) building a widget with JQuery (pref), PHP & CSS.

What I would really like to happen is for a "member" of my site to simply paste 2 lines of code in their HTML to load the widget. Something like this:

<script type="text/javascript" src="http://www.mydomain.com/script.js"></script>

Then to display the widget something like this <div id="displaywidget"></div>

OK that bit is "easy" and ok. But how do I include JQuery or "something" to generate the widget in script.js

What I mean is "displaywidget" - the ID of the widget div will be the name of a php file on my server so essentially script.js will need to load displaywidget.php into the div displaywidget.

I think I use document.getElementById('displaywidget') to get the div but how do I then "write/insert/load" displaywidget.php inside the div?

Thinking as I write "pure" java can do "most of what I want ie document.getElementById('displaywidget') , BUT I would prefer to also "include" Jquery.js as I would like some aspects of the widget to use JQuery. Example being the JQuery UI date function.

Sorry if I am rambling a bit but trying to think as I go along. My "real" problem is I am not too sure on "pure" javascript ie getting the div to display/load displaywidget.php

Suggestions please. (Oh if I am barking up the wrong tree please feel free to tell me - nicely:) )

Thanks in advance

Answer 1

I think I use document.getElementById('displaywidget') to get the div but how do I then "write/insert/load" displaywidget.php inside the div?

You're looking for the AJAX behaviors inside of jQuery which would make the call to the php page and then push the data into the div.

You should be loading jQuery early on in the process, right up front in your head element. Once its loaded it will be cached so no worries of its on every page. No real overhead incurred.

Once jQuery is installed you can call one of many AJAX functions related to obtaining data and popluation elements. Theres $.load(), $.ajax(), and a few others that escape me unless I go and check out their docs section.

You can do all of this without jQuery, but its more code and you have to control for browser differences.

Answer 2

You can load jquery into script.js, just copy and paste it after or before whatever javascript lives in script.js.

So if script.js is:

//start of file
alert('ex');
//end of file

Make it:

//start of file
alert('ex')
Copy and pasted Jquery source
//end of file

Answer 3

After a bit more "trawling & thought" I found this code:

(function() {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
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.2/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() { 
jQuery(document).ready(function($) { 
******* Load CSS *******/
var css_link = $("<link>", { 
rel: "stylesheet", 
type: "text/css", 
href: "style.css" 
});
css_link.appendTo('head');          

/******* Load HTML *******/
var jsonp_url = "http://al.smeuh.org/cgi-bin/webwidget_tutorial.py?callback=?";
$.getJSON(jsonp_url, function(data) {
$('#example-widget-container').html("This data comes from another server: " + data.html);
});
});
}
})(); // We call our anonymous function immediately

writtend by Alex Marandon and found here http://alexmarandon.com/articles/web_widget_jquery/ - works a treat, exactly what I wanted, including/installing JQuery into a .js file