Inclure le script Jquery dans la page .js

Question

Désolé si le titre n'est pas trop clair mais je pense que c'est à peu près juste. NEhow, ce que je voudrais faire est un peu comme (bien dans une certaine mesure) la construction d'un widget avec JQuery (pref), PHP & CSS. Ce que je voudrais vraiment arriver, c'est pour un "membre" de mon site de simplement coller 2 lignes de code dans leur HTML pour charger le widget. Quelque chose comme ceci:

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

ensuite pour afficher quelque chose comme ce widget <div id="displaywidget"></div>

OK ce bit est "facile" et ok. Mais comment puis-je inclure JQuery ou "quelque chose" pour générer le widget dans le script.js

Ce que je veux dire est "displaywidget" - l'ID du widget div sera le nom d'un fichier php sur mon serveur donc essentiellement script .js devra charger displaywidget.php dans le div displaywidget.

Je pense que j'utilise document.getElementById('displaywidget') pour obtenir la div mais comment puis-je "écrire/insérer/charger" displaywidget.php à l'intérieur de la div? En pensant que j'écris java "pure" peut faire "la plupart de ce que je veux ie document.getElementById('displaywidget'), MAIS je préférerais aussi" inclure "Jquery.js comme je voudrais que certains aspects du widget utilisent JQuery. La fonction de date de l'interface JQuery

Désolé si je suis un peu décousu mais j'essaie de penser au fur et à mesure de mon problème Mon «vrai» problème est que je ne suis pas trop sûr de javascript «pur» c'est-à-dire d'afficher/charger displaywidget.php

Suggestions s'il vous plaît (Oh si je suis aboiements du mauvais arbre s'il vous plaît ne hésitez pas à me dire - bien :)).

Merci à l'avance

Answer 1

Après un peu plus "la pêche au chalut & pensé" J'ai trouvé ce 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 par Alex Marandon et trouvé ici http://alexmarandon.com/articles/web_widget_jquery/ - fonctionne un régal, exactement ce que je voulais, y compris/installation JQuery dans un fichier .js

Answer 2

Je pense que je l'utilise document.getElementById (« displaywidget ») pour obtenir la div, mais comment puis-je alors « écrire/insert/charge » displaywidget.php à l'intérieur du div?

Vous recherchez les comportements AJAX à l'intérieur de jQuery, ce qui rendrait l'appel à la page php et ensuite pousser les données dans la div.

Vous devriez charger jQuery tôt dans le processus, directement à l'avant dans votre élément de tête. Une fois qu'il est chargé, il sera mis en cache donc pas de soucis de son sur chaque page. Pas de frais généraux réels. Une fois jQuery installé, vous pouvez appeler l'une des nombreuses fonctions AJAX liées à l'obtention de données et d'éléments de remplissage. Theres $ .load(), $ .ajax(), et quelques autres qui m'échappent à moins que je vais vérifier leur section de docs.

Vous pouvez faire tout cela sans jQuery, mais c'est plus de code et vous devez contrôler les différences de navigateur.

Answer 3

Vous pouvez charger jquery dans script.js, il suffit de le copier et de le coller après ou avant que le javascript ne se trouve dans script.js.

Donc, si le script.js est:

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

Make it:

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