Include Jquery Skript in .js Seite

Question

Sorry, wenn der Titel nicht zu klar ist, aber ich denke, es ist in etwa richtig. Na, was ich gerne machen würde ist ein bisschen wie (na ja, bis zu einem gewissen Grad) ein Widget mit JQuery (pref), PHP & CSS zu bauen.

Was ich wirklich gerne geschehen würde, ist für ein "Mitglied" meiner Website, einfach 2 Zeilen Code in ihr HTML einzufügen, um das Widget zu laden. Etwas wie folgt aus:

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

Dann wie diese <div id="displaywidget"></div>

das Widget etwas anzuzeigen OK, dass Bit "easy" und ok. Aber wie schließe ich JQuery oder "etwas", um das Widget in script.js

Was ich meine ist "displaywidget" - die ID des Widget div wird der Name einer PHP-Datei auf meinem Server so im Wesentlichen Skript sein .js muss displaywidget.php in das div displaywidget laden.

Ich denke, ich benutze document.getElementById('displaywidget'), um das div zu bekommen, aber wie kann ich dann displaywidget.php innerhalb der Div "schreiben/einfügen/laden"?

Denken, wie ich schreibe "pure" Java kann tun "das meiste von dem, was ich will ie document.getElementById('displaywidget'), aber ich würde auch gerne" Jquery.js "" einschließen ", wie ich einige Aspekte des Widgets JQuery verwenden möchten Die JQuery UI-Datumsfunktion

Entschuldigung, wenn ich ein bisschen herumwedeln bin und versuche zu denken, während ich mitfahre.Mein "echtes" Problem ist ich bin nicht sicher auf "reinem" Javascript dh das div zum anzeigen/laden displaywidget.php

Vorschläge bitte (Oh, wenn ich den falschen Baum bin bellen Sie fühlen sich frei, mir zu sagen - schön :)).

Vielen Dank im Voraus

Answer 1

Nach etwas mehr "Schleppen & dachte" ich diesen Code gefunden:

(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 von Alex Marandon und fand hier http://alexmarandon.com/articles/web_widget_jquery/ - funktioniert ein Leckerbissen, genau das, was ich wollte, einschließlich/Installation von JQuery in eine .js-Datei

Answer 2

Ich denke, ich benutze document.getElementById ('displaywidget'), um das div zu bekommen, aber wie kann ich dann displaywidget.php innerhalb des div schreiben/einfügen/laden?

Sie suchen nach dem AJAX-Verhalten innerhalb von jQuery, das den Aufruf der php-Seite machen würde und dann die Daten in das div schieben würde.

Sie sollten jQuery früh im Prozess laden, direkt in Ihrem Kopfelement. Sobald es geladen ist, wird es im Cache gespeichert, so dass Sie sich nicht um jede Seite kümmern müssen. Kein echter Overhead entstanden.

Sobald jQuery installiert ist, können Sie eine der vielen AJAX-Funktionen aufrufen, die zum Abrufen von Daten und Populationselementen dienen. Theres $ .load(), $ .ajax(), und ein paar andere, die mir entkommen, wenn ich nicht gehe und ihren Docs Abschnitt durchsuche.

Sie können all dies ohne jQuery tun, aber es ist mehr Code und Sie müssen für Browser Unterschiede steuern.

Answer 3

Sie können jquery in script.js laden, einfach kopieren und einfügen nach oder vor dem, was javascript in script.js lebt.

Also, wenn Skript.js ist:

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

es Fabrikat:

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