nicht angemeldet
jQuery zu kompliziert...
.. oder raff ich es einfach nicht?
Hallo in die Runde,
bisher habe ich mein weniges benötigtes AJAX mit prototype realisiert.
Prototype einbinden, kurzes Script im <head>
<script type="text/javascript">
function change(script,element)
{
new Ajax.Updater(element,script, {
method: 'get'
});
}
</script>
und einem Link mit welchem ich zBsp. "change('ajax.php?mod=1&a='11','AjaxContent');" übergebe konnte ich in <div id="AjaxContent"></div> meine Ausgaben, welche ich im aufgerufenen PHP mittels der übergeben GET aus einer DB (MySQL) generiert habe ausgeben.
Nun wollte ich das ganze mal mit jQuery realisieren. Denkste! Habe mich durch verschiedene Tutorials gewühlt, Google strapaziert und sogar ein
Buch (mitp, jQuery Paxiseinstieg) gekauft. Immer noch "Denkste".
Geht das mit jQuery nicht so unkompliziert? Kann man prototype und jQuery gleichzeitig in einer Seite verwenden? Kann mir jemand einen Link posten zu einer Seite auf welcher ein Beispiel steht zu <a href> mit GETParamatern zu jQuery + Datenbank und Ausgabe in einen mit dem Link mitgesendeten Zielcontainer? Ich habe bisher nirgendwo ein entsprechendes Tutotial gefunden.
Gruß Rainer
-
Nun wollte ich das ganze mal mit jQuery realisieren. Denkste! Habe mich durch verschiedene Tutorials gewühlt, Google strapaziert und sogar ein
Buch (mitp, jQuery Paxiseinstieg) gekauft. Immer noch "Denkste".Geht das mit jQuery nicht so unkompliziert?
Doch, sogar noch einfacher als mit Prototype.
Kann man prototype und jQuery gleichzeitig in einer Seite verwenden?
Ja.
Kann mir jemand einen Link posten zu einer Seite auf welcher ein Beispiel steht zu <a href> mit GETParamatern zu jQuery + Datenbank und Ausgabe in einen mit dem Link mitgesendeten Zielcontainer?
über load() oder ajax() bist du in der jQuery-Doku nicht gestolpert?
-
über load() oder ajax() bist du in der jQuery-Doku nicht gestolpert?
Doch, aber 1. bin ich in einem Alter wo man, zumindest hier, in der Schule eher Russisch gelernt hat und 2. habe ich dort nichts gefunden was meinen (Verständnis)Problem irgendwie nahe kam.
Ich habe halt auf einer Seite mehrere Container welche ich per AJAX aktualisieren möchte und will dazu nur _EIN_ JS einbinden und nicht für jeden Container ein extra Script schreiben. Bisher habe ich es allerdings nicht mal fertiggebracht die ?par1=x&par2=y mit print_r($_GET) in einem Conatiner auszugeben.-
Doch, aber 1. bin ich in einem Alter wo man, zumindest hier, in der Schule eher Russisch gelernt hat
Das wäre heutzutage aber eher ein Qualifikationsmerkmal (nicht russisch, sondern das Alter - also "nicht zur dummen Jugend gehören")
Ich habe halt auf einer Seite mehrere Container welche ich per AJAX aktualisieren möchte und will dazu nur _EIN_ JS einbinden und nicht für jeden Container ein extra Script schreiben. Bisher habe ich es allerdings nicht mal fertiggebracht die ?par1=x&par2=y mit print_r($_GET) in einem Conatiner auszugeben.
Du kannst alles in einem JavaScript schreiben - ich vermute aber eher du meinst, du willst alles in einem HTTP-Request abhandeln.
Das ist im Prinzip ganz einfach, nur load() ist dafür nicht mehr geeignet, weil es eben die Holzhammermethode ist um "einfach mal schnell zu machen".
in deinem Fall ist .ajax() schlauer.
In erster Linie holst du dir per .ajax() ein XML wo die neuen Teile für deine Container drin sind.
Das XML zerlegst du dann und baust die Schnipsel an entsprechenden Stellen ein.
Etwa so (nicht getestet):
$.ajax({ url: '/foo.xml' dataType: 'xml', success: function(xml) { $('title, #spalte1, #spalte2').empty(); $('root>title', xml).appendTo('title'); $('root>spalte1', xml).appendTo('#spalte1'); $('root>spalte2', xml).appendTo('#spalte2'); } });<root> <title><![CDATA[neuer Titel]]></title> <spalte1><![CDATA[<p>lorem ipsum</p>]]></spalte1> <spalte2><![CDATA[<p>dolor sit amet</p>]]></spalte2> </root>-
$.ajax({
url: '/foo.xml'
dataType: 'xml',
success: function(xml) {
$('title, #spalte1, #spalte2').empty();
$('root>title', xml).appendTo('title');
$('root>spalte1', xml).appendTo('#spalte1');
$('root>spalte2', xml).appendTo('#spalte2');
}
});Nachtrag: das ist natürlich umständlicher. Anstatt erst emtpy() und dann appendTo() zu notieren, sollte auch [replaceWith()](http://api.jquery.com/replaceWith/) funktionieren: `$('#spalte1').replaceWith($('root>spalte1', xml));`{:.language-javascript} -
Knapp daneben, glaub ich... ;-)
Also, mit XML hab ich nichts vor. Mein Aufn´bau mit prototype (gekürzt) ist so:
<html> <head> <script type="text/javascript" src="ajax/prototype.js"></script> <script type="text/javascript"> function change(script,element) { new Ajax.Updater(element,script, { method: 'get' }); } </script> </head> <body> <a href="#" onclick="change('ajax.php?mod=1&a='11','AjaxContent')">Container 1 füllen</a> <a href="#" onclick="'ajax.php? mod=2&a='33','AjaxContent2'">Container 2 füllen</a> <div id="Ajaxcontent"></div> <div id="Ajaxcontent2"></div> </body></html>und die ajax.php dazu:
<?php //DBConnect if($_GET["mod"] == 1){ //Hole Daten aus DB entsprechend $_GET["a"] } if($_GET["mod"] == 2){ //Andere Ausgabe entsprechend $_GET["mod"] und $_GET["a"] } ?>Das bedeutet: ich möchte im Link mitgeben welche Daten vom PHPScript gelesen werden sollen und jQuery über einen JSParameter mitteilen in welchem der Container die Ausgabe angezeigt werden soll. Mit prototype nun wirklich ganz einfach. Aber wie nun mit jQuery?
-
Das bedeutet: ich möchte im Link mitgeben welche Daten vom PHPScript gelesen werden sollen und jQuery über einen JSParameter mitteilen in welchem der Container die Ausgabe angezeigt werden soll. Mit prototype nun wirklich ganz einfach. Aber wie nun mit jQuery?
Exakt so wie ich gesagt habe - ob du dir da ein XML zurückgibst, welches du ordentlich parsen kannst oder Klartext ist völlig egal.
Wie schon gesagt: Holzhammermethode
$('#zielcontainer').load('ajax.php?mod=1&a=11');
Mit Ajax hat das allerdings nicht mehr viel zu tun.
-
Von mir aus auch der Holzhammer, wenn es sein muss.
Das $('#zielcontainer').load('ajax.php?mod=1&a=11'); kommt ja in einen Scriptbereich im <head>.
Damit kann ich aber nur das DIV mit der id "zielcontainer" ansprechen. Und genau diesen Parameter (in welchem Container es angezeigt werden soll) möchte ich jQuery eben auch "dynamisch" über den Link mitteilen um mit einer Zeile JS auszukommen.-
Hi,
<a href="/foo" data-target="#zielcontainer">Foo</a>$('[data-target]').click(function(){ var that = $(this); $(that.attr('data-target')).load(that.attr('href')); });Event-handler im Markup sind hässlich.
~dave
-
Von mir aus auch der Holzhammer, wenn es sein muss.
Das $('#zielcontainer').load('ajax.php?mod=1&a=11'); kommt ja in einen Scriptbereich im <head>.
Damit kann ich aber nur das DIV mit der id "zielcontainer" ansprechen. Und genau diesen Parameter (in welchem Container es angezeigt werden soll) möchte ich jQuery eben auch "dynamisch" über den Link mitteilen um mit einer Zeile JS auszukommen.Dass du im Stande bist eine Funktion zu schreiben, hätte ich schon erwartet - das hast du bei der Prototype-Variante ja auch geschafft.
function hau_weg_den_dreck(url, selector) { $(selector).load(url); }<a onclick="hau_weg_den_dreck('ajax.php?mod=1&a=11', '#zielcontainer');" />und ja: das ist noch schlimmer, weil nicht unobtrusiv.
Aber du willst ja den Holzhammer.
-
-
-
-
-
-
-
Dank erst mal an suit und dave.
Werde es mrgen Früh mal ausprobieren.
Gruß Rainer