timepicker aufruf in temp-seite mit ajax ?

[javascriptnewbie]

Hallo,

sorry erstmal wusste nicht wie ich den Betreff hätte besser beschreiben sollen.

Ich möchte den timepicker von Protoplasm verwenden.
Auf der Hauptseite in der ich diesen getestet habe funktioniert es einwandfrei

Ich benutze jedoch auf der Hauptseite eine javascript-funktion mit deren Hilfe von Ajax einen weitere PHP-Seite eingebunden wird in der temporär ein formular erzeugt wird ( ich musste das so machen da ich auf eine mysqldb zugreifen muss ohne dabei die seite neu lade zu wollen, klappt auch super)

ich probierte dabei den gleichen code
wie in der Hauptseite.php

?>  
<script type="text/javascript" language="javascript" src="../javascript/protoplasm.js"></script>  
        <script language="javascript">  
            Protoplasm.use('timepicker').transform('input.timepicker');  
        </script>  
  
<script>  
function gethardwaresettings(Hardware_Info_Id, Room_Id, Hardware_Group, Hardware_Type_Id) {  
  if (Room_Id=="") {  
    document.getElementById("txtHint").innerHTML="";  
    return;  
  }  
  if (window.XMLHttpRequest) {  
    // code for IE7+, Firefox, Chrome, Opera, Safari  
    xmlhttp=new XMLHttpRequest();  
  } else { // code for IE6, IE5  
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
  }  
  xmlhttp.onreadystatechange=function() {  
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {  
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;  
    }  
  }  
  xmlhttp.open("GET","hardware_settings.php?rid="+Room_Id+"&hiid="+Hardware_Info_Id+"&hgrp="+Hardware_Group+"&htid="+Hardware_Type_Id,true);  
  xmlhttp.send();  
}  
</script>  
  
<?php  

in der Unterseite hardware_settings.php die durch ajax initialisiert wird
wird eine Tabelle generiert
dort
habe ich den gleichen code stehen wie ich zuvor auf der hauptseite.php schon probiert hatte wobei es dort funktionierte

<tr><td>&nbsp;'._('End hour').'</td><td>  
			<input type="text" class="timepicker" name="End_Hour"></input>

Da die Seite hardware_settings.php im gleichen Verzeichnis liegt wie die Hauptseite.php dachte ich sollte es gehen

aber irgendwas funktioniert nicht
nur was?
es erscheint zumindest nicht die Möglichkeit die Ihrzeit auszuwählen

Grüße Jürgen

[molily]

Hallo!

<script type="text/javascript" language="javascript" src="../javascript/protoplasm.js"></script>
        <script language="javascript">
            Protoplasm.use('timepicker').transform('input.timepicker');
        </script>

Die meisten JavaScripte arbeiten nach dem Prinzip des »Unobtrusive JavaScript«:

1. Sie werden einmalig nach dem erfolgreichen Laden des Dokuments aktiviert, z.B. durch einen Funktionsaufruf. Hier: Protoplasm.use('timepicker').transform()

2. Sie suchen gewisse Elemente im Dokument heraus, oftmals anhand eines CSS-Selektors, anhand einer Klasse oder ähnlich. Hier: input.timepicker.

3. Sie fügen den Elementen ein gewisses Verhalten hinzu, indem sie Event-Handler registrieren. Hier: Die Date-Picker-Funktionalität.

4.  Sie fügen gegebenenfalls weitere Elemente ins Dokument ein. Hier: Der Date-Picker-Dialog mit einem interaktiven Kalender.

Wenn du jetzt später, nach dieser Initialisierung, per Ajax HTML-Code nachlädst, und neue Elemente dem Dokument hinzufügst, dann werden diese nicht automatisch derselben Prozedur unterzogen. Sie erhalten also nicht automatisch das gewünschte JavaScript-Verhalten.

Für jedes nachträglich einfügte input.timepicker-Element müsstest du die Prozedur manuell wiederholen. Es kann sein, dass das mit einem weiteren Aufruf von Protoplasm.use('timepicker').transform('input.timepicker') möglich ist. Denn das sucht wahrscheinlich alle entsprechenden Eingabefelder heraus und verpasst ihnen das Datepicker-Verhalten. Es kann aber auch sein, dass dies Fehlverhalten produziert, wenn bei bereits initialisierten Felder noch einmal Event-Handler registriert werden.

Den Selektor könntest du natürlich eingrenzen, um nur Felder in einem bestimmten Element umzuwandeln.

Protoplasm.use('timepicker').transform('#dasGeänderteElement input.timepicker')

In deinem Fall anscheinend:

Protoplasm.use('timepicker').transform('#txtHint input.timepicker')

Wie du einzeln Datepicker erzeugen kannst, steht in der Doku:
http://jongsma.org/software/protoplasm/control/datepicker

Siehe auch die Klassenreferenz:
http://jongsma.org/software/protoplasm/api/controls/Control/DatePicker/

Mathias

[javascriptnewbie]

Wenn du jetzt später, nach dieser Initialisierung, per Ajax HTML-Code nachlädst, und neue Elemente dem Dokument hinzufügst, dann werden diese nicht automatisch derselben Prozedur unterzogen. Sie erhalten also nicht automatisch das gewünschte JavaScript-Verhalten.

Für jedes nachträglich einfügte input.timepicker-Element müsstest du die Prozedur manuell wiederholen. Es kann sein, dass das mit einem weiteren Aufruf von Protoplasm.use('timepicker').transform('input.timepicker') möglich ist. Denn das sucht wahrscheinlich alle entsprechenden Eingabefelder heraus und verpasst ihnen das Datepicker-Verhalten. Es kann aber auch sein, dass dies Fehlverhalten produziert, wenn bei bereits initialisierten Felder noch einmal Event-Handler registriert werden.

vielen Dank mal wieder für diese sehr ausführliche Erklärung

ich dachte mir schon das es mit dem Nachladen durch Ajax deswegen die Probleme auftreten

ich werde dann gleich mal den Lösungsvorschlag probieren.

Ich dachte zuerst das wenn ich es in die von ajax aufgerufene Seite hardware_settings.php einfüge (also die scrpt-anweisungen das er dann diese auch finden müsste , aber im Ausgabe-code der Seite sehe ich das er die Anweisungen nicht im Ansatz umsetzen kann

Ich probiers mal

Gruß Jürgen

[molily]

Ich dachte zuerst das wenn ich es in die von ajax aufgerufene Seite hardware_settings.php einfüge (also die scrpt-anweisungen das er dann diese auch finden müsste , aber im Ausgabe-code der Seite sehe ich das er die Anweisungen nicht im Ansatz umsetzen kann

Keine schlechte Idee, aber funktioniert leider nicht. Du fügst den Code ja mit innerHTML ins Dokument ein. Bei dieser Zuweisung werden im Code enthaltene JavaScripte (script-Elemente) *nicht* automatisch ausgeführt.

Bibliotheken wie jQuery machen das, wenn entsprechende Funktionen genutzt werden, aber das Setzen der innerHTML-Eigenschaft alleine tut es nicht.

Mathias

[javascriptnewbie]

Keine schlechte Idee, aber funktioniert leider nicht. Du fügst den Code ja mit innerHTML ins Dokument ein. Bei dieser Zuweisung werden im Code enthaltene JavaScripte (script-Elemente) *nicht* automatisch ausgeführt.

Bibliotheken wie jQuery machen das, wenn entsprechende Funktionen genutzt werden, aber das Setzen der innerHTML-Eigenschaft alleine tut es nicht.

Mathias

Hallo,

also er bringt mir zwar den datepicker, aber nicht richtig sauber.

weiter bringt er auch den javascript-fehler
Uncaught TypeError: Cannot read property 'split' of undefined
http://192.168.2.102/javascript/timepicker/timepicker.js

wenn ich am timepicker eine uhrzeit wähle schreibt er sie nicht ins textfeld
weiter kommt der timepicker in jedem textfeld... also wenn ich in ein textfeld klicke popt er immer auf

irgendwie scheint ihm die Anweisung
in der hardware_settings.php (also in der Seite die durch ajax aufgerufen wird
nicht zu interessieren

echo '<tr><td>&nbsp;'._('Start hour').'</td><td>  
			<input type="text" class="timepicker" name="Start_Hour"></input></td></tr>';

diese hardware_settings.php
wird ja in das div feld ausgegeben
was in der hauptseite.php steht
echo '<div id="txtHint"><b>available Container.</b></div>';

egal wo ich in diesem Bereich der zwischen einer <td>... hier steht der div </td> klicke popt der timepicker auf

er reagriert also gar nicht auf das textfeld in dem er eigentlich definiert wurde

komisch oder?

Gruß Jürgen

[javascriptnewbie]

Hallo,

also mit dem von Dir etwas abgeänderten Code geht es

Protoplasm.use('timepicker').transform('#txtHint',' input.timepicker')

zumindest zeigt er die Eingabemöglichkeit der Uhrzeit an... muss es wohl nur noch etwas anpassen damit er die Uhrzeit dann ins Textfeld schreibt

aber ich bin jetzt schon einen großen Schritt weiter

Danke!
Gruß Jürgen

[molily]

Hallo,

Protoplasm.use('timepicker').transform('#txtHint',' input.timepicker')

Wie kommst du zu dieser Variante?

Siehe http://jongsma.org/software/protoplasm/control/datepicker: Die transform-Funktion nimmt zwei Parameter entgegen, aber nur der erste ist der Selektor für die Eingabefelder.

Der Selektor #txtHint verweist nicht auf das Eingabefeld.

zumindest zeigt er die Eingabemöglichkeit der Uhrzeit an... muss es wohl nur noch etwas anpassen damit er die Uhrzeit dann ins Textfeld schreibt

Es erscheint mir logisch, dass das nicht funktioniert. txtHint ist ein div-Element, kein input. Wie sollte das Script die Verbindung herstellen?

Mathias