AJAX - PHP - jquery -> script läuft nicht

[RobRobson]

Hallo,

ich hab ein Problem mit meinem script. Es tut nicht tun. :)

Es ist ein PHP Script das auf einen click ein weiteres script nachläd und anzeigt (auch php). Und da drin soll der jquery Kalender Datapicker angezeigt werden. Da die Antwort des Ajax-requestes nur plain-text ist welcher nicht interpretiert wird, funktionieren eingefügte JS Funktionen nicht. Darum lade ich zusammen mit dem AJAX-Request auch eine JS Datei die die Funktionalität kapselt.

Die PHP Datei die mitteles AJAX gezogen wird enthält die Zeile:
<div id='datepickerbox'></div>

In der ebenfalls gezogenen JS-Datei werden die benötigten jquery Dateien geladen und das Rahmen-Objekt für den Datepicker erstellt:

  
// scripte laden  
a = document.createElement("link");  
a.setAttribute("href","http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css");  
a.setAttribute("type","text/css");  
a.setAttribute("rel","stylesheet");  
document.getElementsByTagName("head")[0].appendChild(a);  
b = document.createElement("script");  
b.setAttribute("type","text/javascript");  
b.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js");  
b.setAttribute("content-type","text/html; charset=iso-8859-1");  
document.getElementsByTagName("head")[0].appendChild(b);  
// DatepickerElemente initieren  
var datepicker = document.createElement("div");  
datepicker.id = "datepicker";  
datepicker.name = "datepicker";  
datepicker.style.fontSize="62.5%";  
document.getElementById("datepickerbox").appendChild(datepicker);  
// Datepicker starten  
$("#datepicker").datepicker();  

Der brennende Fuchs meint nun aber immer:
$("#datepicker").datepicker is not a function
  $("#datepicker").datepicker();

Wie macht ihr das beim nachträglichen einbinden von JS wenn AJAX im Spiel ist?

Danke un Grüße
Rob

[henman]

hallo RobRobson,

var datepicker = document.createElement("div");

hier schreibst du, dass datepicker eine Variable sein soll, dann kann sie ja keine Funktion sein.

grüße,
henman

[RobRobson]

hallo RobRobson,

var datepicker = document.createElement("div");

hier schreibst du, dass datepicker eine Variable sein soll, dann kann sie ja keine Funktion sein.

grüße,
henman

hi, und Danke für den Hinweis,
heißt das das ein Name nicht für eine Var und eine Funktion verwendet werden kann? bei allen C ähnlichen sprachen ist ja kein Problem, für JS schon?
Habe jetzt grade mal das DIV umbenannt, ber das hat effektiv nichts verändert.
Die Fehlermeldung heißt jetzt halt:

$("#datumskasten").datepicker is not a function

Aber gut, ich hab grade gemerkt diese Fehler kommt wohl nur weil er nicht schnell genug schafft das jquery framework zu laden bevor die datepicker() funktion aufgerufen wird, denn beim 2ten Klick auf den Button der die ganze Seite anzeigen soll kommt der fehler nicht mehr. Aber der Kalender wird trozdem nicht gezeichnet. :-/

Grüße

[henman]

hallo RobRobson,

heißt das das ein Name nicht für eine Var und eine Funktion verwendet werden kann? bei allen C ähnlichen sprachen ist ja kein Problem, für JS schon?

nein, du hast mich falsch verstanden. Ich meinte nicht die Id des HTML-Elementes, sondern

var datepicker = document.createElement("div");

hier ist datepicker eine Variable

$("#datepicker").datepicker()

hier ist datepicker eine Methode

$("#datumskasten").datepicker is not a function

hier auch

benutze einen anderen Namen für eins von beiden

grüße,
henman

[RobRobson]

Hi henman,

benutze einen anderen Namen für eins von beiden

grüße,
henman

Ich hatte mich blöde ausgedrückt, hier noch der code zum Verständniss:

  
var datumskasten = document.createElement("div");  
document.getElementById("userbox").appendChild(datumskasten);  
datumskasten.innerHTML = 'sometext';  
  
// Datepicker starten  
$("#datumskasten").datepicker();  

das sollte doch keine Probleme mehr verursachen.
Faktisch wird aber weiterhin kein datepicker gezeichnet.

viele Grüße,
Rob

[RobRobson]

OK, ich scheine meinem Problem endlich auf die Schliche gekommen zu sein.
Das Probem scheint zu sein, das auszufürender JS-Code bei verwendung der JQuery Funktion $.getScript() innerhalb des Aufruffes mittels einer CallBack funktion ausgeführt werden muss. *Aha!* Das hatte ich nicht beachtet. Dachte aber das nach getScript() einfach die Funktionen die im Script enthalten sind zur Verfügung stehen. Scheinbar ist das nicht so. Sie stehen wohl nur innerhalb der CallBackfunktion zur Verfügung (Glaube ich, hab ich jetzt nicht geprüft).

Aber das kann noch nicht der Weisheit letzter Schluss sein, denn zu Anfangs verwendet ich noch kein $.getScript(). Egal, hier ist jetzt from scratch neu aufgebauter Code der bei mir im FF funktioniert. Nochmal zur Errinnerung: test.php lädt mittels AJAX test2.php -> diese baut ein neues Div. nach dem AJAX wird noch eine externe JS Datei geladen die die Funktion Datepicker() auf das neue Div anwendet.

Sinn der Sache: Beim Start von test.php muss "test2.php, datepicker, jquery.ui, und jquery.css" noch nicht geladen werden, sondern erst wenn es auch wirklich benötigt wird.

----------- Test.php -----------

  
<head>  
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>  
    <script type="text/javascript">  
  
    function kalender() {  
     $.post('test2.php',0,function(content){  
                        document.getElementById('ausgabe').innerHTML = content;  
                        });  
  
     $.getScript("include/event.js", function(){  show_datepicker();  });  
    }  
</script>  
</head>  
<body>  
<a href="javascript:kalender()">Kalender zeigen</a><br>  
<div id=ausgabe style="border:3px solid #0000FF; padding:5px;"></div>  
<div style="border:2px solid #000000; padding:2px;" onclick="call_kalle()"> Kalle aufrufen </div>  
</body></html>  

----------- Test2.php -----------

<?php  
echo "<div id=\"Kalle\" style=\"border:1px solid #001200; padding:3px;\"> Kalle </div>";  
?>

----------- event.js -----------

function show_datepicker()  
{  
  $.getScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js",  
    function(){  
        $("#Kalle").datepicker();  
        });  
}

(Hinweis: im Beispiel wird das CSS noch in der test.php geladen)

viele Grüße,
Rob

[henman]

hallo RobRobson,

OK, ich scheine meinem Problem endlich auf die Schliche gekommen zu sein.

so lob ich mir das. Lösungs-High-Five! ;)

grüße,
henman

[RobRobson]

hallo RobRobson,

so lob ich mir das. Lösungs-High-Five! ;)

grüße,
henman

Moin henman,

jaaa es wäre auch zu schön gewesen. ^^
Leider war es das doch noch nicht ganz. Das Ding ist das der Kalender nur dann geladen wurde wenn zuvor ein alert() abgegeben wurde. o_0
Weil das seh nach einem Zeitproblem klang lass ich ihn jetzt 2sek warten bevor der Datepicker startet.

  
function input_new(flag,win,params)  
         {  
          if(show == win) { $('#userbox').hide('slow'); show=0;}  
          else {  
                $('#userbox').show('slow');  
                show = win;  
                if(flag == 'event')    {var input_url = 'event.php';    var input_data = 'input=new_event'; }  
  
                $.post(input_url, input_data,function(content){  
                        document.getElementById('userbox').innerHTML = content;  
                        });  
  
                if(flag == 'event'){ // Muss unter dem AjAX stehen  
                                    window.setTimeout('$(\'#datepicker\').datepicker()', 2000);  
                                   }  
                }  
         }  

Ist natürlich nicht so schön, gibts da noch eine andere Lösung?

Danke und Viele Grüße,
Rob

[henman]

hallo RobRobson,

Leider war es das doch noch nicht ganz. Das Ding ist das der Kalender nur dann geladen wurde wenn zuvor ein alert() abgegeben wurde. o_0

hm, dein Problem wird sein, dass du die Funktion aufrufst, bevor das Dokument laden konnte. Das HTML-Element, auf das du zugreifen willst

document.getElementById('userbox').innerHTML = content;

existiert zu diesem Zeitpunkt noch nicht. Eigentlich sollte dir die Fehlerkonsole ein "getElementBy[...] is null" o.ä. zuwerfen.

lass die Funktion also erst starten, wenn das Dokument geladen ist. Stichwort onload oder jQuery-spezifisch: ready()

grüße,
henman