[FRAGE] nach Javascript SQL "GET" funktioniert Field Calenderpicker nicht mehr

[AXt]

Hallo zusammen,

ich habe Problem, welches ich aktuell nicht lösen kann.

Ich habe eines php / HTML (Joomla Modul) indem sich ein funktionsfähiger Js Calenderpicker befindet.

...
<script src="../Pickup/jquery-1.6.2.min.js"></script>
<script src="../Pickup/jquery-ui-1.8.15.custom.min.js"></script>
<link rel="stylesheet" href="../Pickup/jqueryCalendar.css">
<script>
jQuery(function() {
	vjQuery( "#plandate" ).datepicker({ dateFormat: 'yy-mm-dd' }).val();
                                });
</script>
...

Beim ändern des Datums erfolgt eine JS SQL Abfrage mit GET Methode

...
function showQueryresult(str) {
	var art = 1 // test value
	if (str == "") {
        document.getElementById("hidetest").innerHTML = "";
        return;
    } else {
        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","/index.php/aufwand-erfassen-ressourcenplanung?q="+str+"&art="+art,true);
        xmlhttp.send();

auf der gleichen Seite befndet sich die PHP Server Datei welche ein entsprechendes Ergenis anzeigen soll.
Dieses funktioniert ebenfals bestens.

Zum Problem: Sobald das Ergebins der JS Query angezeigt wird, verschwindet das selektierte / definierte Datum, was durchaus logisch ist, da eine vermeindliche neue seite aufgerufen wird.
Dieses könnte ich Bspw.: mit einem intval($_GET['q']); und einem entsprechenden

echo $q ;

wieder korrigieren - JEDOCH funktioniert der Calenderpicker nicht mehr...

Warum ?
Lösungsmöglichkeiten?

Danke für kreatives Feedback.

Gruss

 

[kkapsner]

da eine vermeindliche neue seite aufgerufen wird

Bei AJAX ist das nicht der Fall. Dein Problem muss irgendwo anders liegen. Wo und wie wird denn die Funktion showQueryresult() genau aufgerufen?

 

[AXt]

Hallo,

danke für dein schnelles Feedback.

die function showQueryresult() habe ich in 2 Varianten ausgeführt / getestet


a)

<input type="text" onblur="showQueryresult()" ...

als Texteingabe mit dem Calenderpicker

b)

<input type="button" onclick="showQueryresult()" ...

als Button

Nach dem ausführen verschindet der eingegebene "value" aus dem <input> Field und der Calenderpicker ist "out of order"

 

[kkapsner]

Und was ist das Element mit der ID "hidetest"?

Kannst du nicht ein funktionierendes Minimalbeispiel machen? Oder einen Livelink?

 

[AXt]

Hi

ok im folgenden link kommst du auf das Beispiel, welches ich eben eingerichtet habe.

TEST_MENU

Folgendes Szenario!

Im Plandatum bitte 24.10.2015 auswählen -> tab Taste
Im rechten bereich erscheinen 2 Ergebniswerte 99999 und 1

Soweit so gut.

Das Eingabefeld Plandatum scheint leer zu sein ...

Klickt man in das Inputfeld erscheint kein Wert und kein Calenderpicker.

Nun ist mir aber aufgefallen :
Klickt man hingehen in einen beliebigen Bereich der Site und anschließend wieder in das Plandatumfeld und klickt in einen beliegigen Bereich der Site erschein 2015-10-24 im Inputfeld UND der "Picker" ist ebenfalls wieder aktiv äääh

@hidetest das war ein <p> tag der eine Notiz bringen sollte sobald die variable str == "" sein sollte, um den Anwender zu steuern.
ISt ber nicht mehr wirklich relavant aktuell.

Help me ;D

 

[kkapsner]

Du hast doch schon jQuery am Start... warum verwendest du dann nicht die AJAX-Methode davon (https://api.jquery.com/jQuery.get/ )? Dein Problem könnte theoretisch durch das globale xmlhttp-Objekt entstehen.
Außerdem ist es wahrscheinlich besser, wenn du nicht über das onblur-Event des <input> gehst, sondern über das Event vom Datepicker (Datepicker Widget | jQuery UI API Documentation ).

 

[AXt]

Ok, deinen Ansatz verstehe ich.
Die Eventsteuerung über

jQuery(function() {
	jQuery( "#plandate" ).datepicker({ dateFormat: 'yy-mm-dd',
		onSelect: function (dateText, inst) {
			alert(dateText);

habe ich umgesetzt.

In dem Thema Ajax / jquery & Co stecke ich noch nicht so tief drinnen, damit ich flexible meine Codes zusammen setzen kann.

Syntax für die Methoden $_GET / $_POST im PHP und Js habe ich verstanden. Jedoch mit der API JQuery get() stelle ich mich ein bisschen "blöd" an.

Könntest du hier mir ein funktionierenden Snippsel für den send Code und einen snippsel für die Server Datei beifügen?
Ich habe viel probiert jedoch habe ich noch nicht das gewünschte resultat.


Sollte das nicht möglich ein, ist eine Überlegung von mir die, ob ich die URL + Variablen mit einer

var art = document.getElementById("artid").value;
			var str = document.getElementById("plandate").value;
			window.location = "/index.php/test-menu?q="+str+"&art="+art

verarbeitete und mit entsprechender Server php Datei ausgebe.

Sollte dieses Vorgehen jedoch widerum Nachteile bringen, wäre ier ein Hinweis super.

Danke & Gruss

 

[kkapsner]

für die Server Datei

And der Datei auf dem Server musst du dafür gar nichts ändern. Es ist ja immer noch ganz normales AJAX, nur dass jQuery dafür einen Wrapper bereitstellt, der die Funktionalität etwas vereinfacht und erweitert.

Das könnte z.B. so aussehen:

function showQueryresult(str){
	var art = 1 // test value
	if (!str){
		document.getElementById("hidetest").innerHTML = "";
	}
	else {
		jQuery.get({
			url: "/index.php/aufwand-erfassen-ressourcenplanung",
			data: {q: str, art: art},
			success: function(data){
				document.getElementById("txtHint").innerHTML = data;
			}
		);
	}
}

- ungetestet (arbeite selber fast nie mit jQuery).

 

[AXt]

Rückmeldung:

Besten Dank, dein Denkanstoß hat geholfen. Client und Serverdatei nochmals gerpüft - es läuft und funktioniert.

Danke schön.

 

[kkapsner]

Besten Dank

Bitte - gern geschehen.

 

[mikdoe]

ist das gelöst?