Success Callback um Namen Abzufragen und dann mit Daten speichern

j-l-n · 04. Jan. 2015

jQuery("#Editbox2").val(jQuery("#Ergebnis").text());
- wenn du schon jQuery nutzt

Blubbfisch · 04. Jan. 2015

j-l-n schrieb:
jQuery("#Editbox2").val(jQuery("#Ergebnis").text());
- wenn du schon jQuery nutzt

Danke!

Irgendwie funzt das nicht. Ich denke mal, ich setze es falsch ein.

das ist die Testseite: Raetsel

und das der seitenquelltext (sorry, dass der so chaotisch ist):

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Raetsel</title>
<meta name="generator" content="WYSIWYG Web Builder 10 - http://www.wysiwygwebbuilder.com">
<link href="favicon.ico" rel="shortcut icon">
<link href="GadivRaetselSeite.css" rel="stylesheet" type="text/css">
<link href="Raetsel.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="jquery-1.11.2.js"></script> 
<script type="text/javascript" src="jquery.jqpuzzle.js"></script> 
<link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" />
<script type="text/javascript">
		    $(document).ready(function() {
		        // define your own settings
		        var mySettings = {
		            rows: 2,
		            cols: 2,
		            language: 'de',
					success: {
		                callback: function(results) { 
                                        document.getElementById('Ergebnis').innerHTML =( results.moves + ' Zügen und ' +
		                        results.seconds + ' Sekunden.');
//                                        document.getElementById('Ergebnis').innerHTML =('Gelöst in' + results.moves + 'Zügen und' +
//		                        results.seconds + ' Sekunden.');                              
//		                    window.open ("https://www.noobinator.de/Gadiv-Raetsel-WYSIWYG/Spieler.php")
//		                    document.write('Gelöst in ' + results.moves + ' Zügen und ' +
//		                        + results.seconds + ' Sekunden.');
		                }
		            }
		        };
		        // define your own texts
				var myTexts = {
		            secondsLabel: 'Sek.'
		        };
		        // call jqPuzzle with mySettings and myTexts on images with class 'myPics'
		        $('.myPics').jqPuzzle(mySettings, myTexts);
		    });
		</script>
</head>
<body 
<script type="text/javascript">
$(document).ready(function(){
    jQuery("#Editbox2").val(jQuery("#Ergebnis").text());
});
</script>>
<div id="container">
<div id="wb_Image2" style="position:absolute;left:85px;top:0px;width:800px;height:1058px;z-index:5;">
<img src="images/e7ct-9.jpg" id="Image2" alt=""></div>
<div id="wb_Image1" style="position:absolute;left:85px;top:0px;width:800px;height:248px;z-index:6;">
<img src="images/img0001.png" id="Image1" alt=""></div>
<div id="wb_Image3" style="position:absolute;left:336px;top:307px;width:300px;height:299px;z-index:7;">
<img src="images/KV2_Schiebebild300.jpg" id="Image3" alt="Panzer" class="myPics"></div>
<div id="wb_Form2" style="position:absolute;left:270px;top:710px;width:401px;height:145px;z-index:8;">
<form name="Spielerdaten" method="post" action="Raetsel.php" enctype="multipart/form-data" id="Form2">
<input type="hidden" name="formid" value="form2">
<div id="wb_Text2" style="position:absolute;left:10px;top:15px;width:157px;height:32px;z-index:0;text-align:left;">
<span style="color:#C9BE84;font-family:Stencil;font-size:13px;">Du hast es geschaft in:</span></div>


<input type="text" id="Editbox2" style="position:absolute;left:177px;top:15px;width:198px;height:23px;line-height:23px;z-index:1;" name="Ergebnis" value="" autocomplete="off">



<div id="wb_Text3" style="position:absolute;left:10px;top:45px;width:157px;height:16px;z-index:2;text-align:left;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Dein Ingame-Spielername:</span></div>
<input type="text" id="Editbox3" style="position:absolute;left:177px;top:45px;width:198px;height:23px;line-height:23px;z-index:3;" name="Name" value="">
<input type="submit" id="Button2" name="" value="Submit" style="position:absolute;left:177px;top:75px;width:96px;height:25px;z-index:4;">
</form>
</div>
</div>
</body>
</html>

Kannst Du mir sagen, wo das jQuery hin muss?

rico2009 · 04. Jan. 2015

Den Codeblock kannst du praktisch überall einbinden und die Stelle die du gewählt hast, ist in Sachen Funktionalität erstmal ok. In Sachen Seitenoptimierung (Geschwingkeit etc.) bisschen fehl platziert, dass ist aber hier egal. Du hast aber noch einen anderen Fehler, du bindest zweimal die JQuery-Lib ein. Einmal von code.jquery.com und einmal von Lokal. Die von Lokal wird nicht gefunden... Dann sehe ich in deinen Code nirgens ein Element mit der ID "Ergebnis". Bin ich blind oder gibt es das Element nicht?

P.S.: Die jquery-migrate-1.2.1 brauchst du vermutlich nicht, seidenn du hattest schon mal eine ältere JQuery Version und möchtest du auf eine neuere migrieren.

Sempervivum · 04. Jan. 2015

Weil das Feld Ergebnis (was zzt. nicht existiert, Rico hat dich darauf hingewiesen) erst beim Ende des Puzzles in der callback-Funktion gefüllt wird:

Code:

					success: {
		                callback: function(results) { 
                                        document.getElementById('Ergebnis').innerHTML =( results.moves + ' Zügen und ' +
		                        results.seconds + ' Sekunden.');

bin ich der Meinung, dass Du den jQuery-Code auch dort einfügen musst:

Code:

					success: {
		                callback: function(results) { 
                                        document.getElementById('Ergebnis').innerHTML =( results.moves + ' Zügen und ' +
		                        results.seconds + ' Sekunden.');
                                        jQuery("#Editbox2").val(jQuery("#Ergebnis").text());

- - - Aktualisiert - - -

BTW: Wenn Du ein neues Fenster mit window.open öffnest, hast Du Zugriff auf das DOM dort, brauchst keine Werteübergabe und kannst das Ergebnis direkt eintragen, wie Du es ursprünglich vorhattest:

Code:

					success: {
		                callback: function(results) { 
                                        erg = results.moves + ' Zügen und ' + results.seconds + ' Sekunden.');
                                        jQuery("#Editbox2").val(erg);
                                        pop = window.open ("https://www.noobinator.de/Gadiv-Raetsel-WYSIWYG/Spieler.php");
                                        pop.document.getElementById("Ergebnis").innerHTML = erg;

wobei das Element mit der ID "Ergebnis" in der geöffneten Seite definiert sein muss.

Blubbfisch · 04. Jan. 2015

Ich dachte document.getElementById('Ergebnis').innerHTML =( results.moves + ' Zügen und ' + results.seconds + ' Sekunden.'); würde die elementID definieren

Zumindes bekomme ich damit eine Ausgabe, wenn ich dann noch <div id='Ergebnis'</div> in den Code einfüge.
Das habe ich hier gemacht (fast ganz unten im code

<td style="text-align:center;vertical-align:middle;"><div><span style="color:#000000;font-family:Arial;font-size:13px;"> </span><span style="background-color:#C9BE84;color:#587C56;font-family:Stencil;font-size:19px;"><div id='Ergebnis'</div></span></div>

:

Unbenannte Seite

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Unbenannte Seite</title>
<meta name="generator" content="WYSIWYG Web Builder 10 - http://www.wysiwygwebbuilder.com">
<link href="GadivRaetselSeite.css" rel="stylesheet" type="text/css">
<link href="Raetsel.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="jquery-1.11.2.js"></script> 
<script type="text/javascript" src="jquery.jqpuzzle.js"></script> 
<link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" />
<script type="text/javascript">
		    $(document).ready(function() {
		        // define your own settings
		        var mySettings = {
		            rows: 2,
		            cols: 2,
		            language: 'de',
					success: {
		                callback: function(results) { 
                                        document.getElementById('Ergebnis').innerHTML =('Gelöst in' + results.moves + 'Zügen und' +
		                        results.seconds + ' Sekunden.');                              
//		                    window.open ("https://www.noobinator.de/Gadiv-Raetsel-WYSIWYG/Spieler.php")
//		                    document.write('Gelöst in ' + results.moves + ' Zügen und ' +
//		                        + results.seconds + ' Sekunden.');
		                }
		            }
		        };
		        // define your own texts
				var myTexts = {
		            secondsLabel: 'Sek.'
		        };
		        // call jqPuzzle with mySettings and myTexts on images with class 'myPics'
		        $('.myPics').jqPuzzle(mySettings, myTexts);
		    });
		</script>
</head>
<body>
<div id="container">
<div id="wb_Image2" style="position:absolute;left:85px;top:0px;width:800px;height:1058px;z-index:4;">
<img src="http://forum.jswelt.de/images/e7ct-9.jpg" id="Image2" alt=""></div>
<div id="wb_Image1" style="position:absolute;left:85px;top:0px;width:800px;height:248px;z-index:5;">
<img src="http://forum.jswelt.de/images/img0001.png" id="Image1" alt=""></div>
<div id="wb_Image3" style="position:absolute;left:335px;top:282px;width:300px;height:299px;z-index:6;">
<img src="http://forum.jswelt.de/images/KV2_Schiebebild300.jpg" id="Image3" alt="Panzer" class="myPics"></div>
<div id="wb_Form1" style="position:absolute;left:302px;top:650px;width:362px;height:319px;z-index:7;">
<form name="SpielerNameErfassen" method="post" action="Raetsel.php" enctype="multipart/form-data" id="Form1">
<input type="hidden" name="formid" value="form1">
<input type="submit" id="Button1" name="Senden" value="Speichern" style="position:absolute;left:121px;top:243px;width:121px;height:38px;z-index:0;" tabindex="2">
<img src="http://forum.jswelt.de/images/img0006.png" id="Text1" alt=""  style="position:absolute;left:29px;top:115px;width:303px;height:44px;z-index:1;">

<input type="text" id="Editbox1" style="position:absolute;left:29px;top:181px;width:303px;height:50px;line-height:50px;z-index:2;" name="Name" value="" tabindex="1" title="Name">
<table style="position:absolute;left:29px;top:15px;width:300px;height:83px;z-index:3;" cellpadding="0" cellspacing="1" id="Table1">
<tr>
<td style="background-color:#C9BE84;text-align:center;vertical-align:middle;height:46px;"><div><span style="color:#000000;font-family:Arial;font-size:13px;"> </span><span style="background-color:#C9BE84;color:#587C56;font-family:Stencil;font-size:19px;">Du hast es geschafft in:</span></div>
</td>
</tr>
<tr>
<td style="text-align:center;vertical-align:middle;"><div><span style="color:#000000;font-family:Arial;font-size:13px;"> </span><span style="background-color:#C9BE84;color:#587C56;font-family:Stencil;font-size:19px;"><div id='Ergebnis'</div></span></div>
</td>
<td style="background-color:transparent;text-align:left;vertical-align:top;height:34px;">
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>

Sempervivum · 05. Jan. 2015

Ich dachte document.getElementById('Ergebnis').innerHTML =( results.moves + ' Zügen und ' + results.seconds + ' Sekunden.'); würde die elementID definieren

Nein, tut es nicht, damit greifst Du nur auf ein Element mit dieser ID zu, das anderswo im HTML-Text definiert sein muss.

wenn ich dann noch <div id='Ergebnis'</div> in den Code einfüge.

Genau damit definierst Du das Element mit dieser ID.

Blubbfisch · 05. Jan. 2015

Sempervivum schrieb:
Nein, tut es nicht, damit greifst Du nur auf ein Element mit dieser ID zu, das anderswo im HTML-Text definiert sein muss.
Genau damit definierst Du das Element mit dieser ID.

Jetzt bin ich verwirrt

Also habe ich das Element nun definiert oder muss ich <div id='Ergebnis'</div> noch woanders einfügen?

- - - Aktualisiert - - -

Hab jetzt mal <div id='Ergebnis'</div> eingefügt, habs an diversen Stellen versucht und das Ergebnis ist immer:

- - - Aktualisiert - - -

Also wenn ich es vor die Editbox2 einfüge

<div id='Ergebnis'</div>

<input type="text" id="Editbox2" style="position:absolute;left:177px;top:15px;width:198px;height:23px;line-height:23px;z-index:1;" name="Ergebnis" value="" autocomplete="of

dann sieht es so aus:

Sempervivum · 05. Jan. 2015

Jetzt bin ich verwirrt Also habe ich das Element nun definiert oder muss ich <div id='Ergebnis'</div> noch woanders einfügen?

Wenn Du <div id='Ergebnis'</div> in deinem HTML-Text stehen hast, hast Du das Element und die ID damit definiert. In dem Code, den Du zuletzt gepostet hast, ist das der Fall. Du darfst es außerdem nur einmal einfügen, weil IDs dokumentweit eindeutig sein müssen.

Blubbfisch · 05. Jan. 2015

Sempervivum schrieb:
Wenn Du <div id='Ergebnis'</div> in deinem HTML-Text stehen hast, hast Du das Element und die ID damit definiert. In dem Code, den Du zuletzt gepostet hast, ist das der Fall. Du darfst es außerdem nur einmal einfügen, weil IDs dokumentweit eindeutig sein müssen.

Aber trotzdem wird es ja nicht in die Editbox2 eingefügt.
Im Grunde steht das Ergebnis immer dort wo <div id='Ergebnis'</div> steht. jQuery("#Editbox2").val(jQuery("#Ergebnis").text()); wird dabei ignoriert. Ich dachte der Fehler wäre vielleicht, dass der Name der Editbox auch Ergebnis war und hab das geändert, aber das macht es auch nicht besser.

Sempervivum · 05. Jan. 2015

Die Editbox2 ist ja auch ganz etwas anderes. Dafür brauchst Du dieses:

Code:

	                callback: function(results) { 
                                        erg = results.moves + ' Zügen und ' + results.seconds + ' Sekunden.');
                                        jQuery("#Editbox2").val(erg);

Blubbfisch · 05. Jan. 2015

Sempervivum schrieb:
Die Editbox2 ist ja auch ganz etwas anderes. Dafür brauchst Du dieses:

Code:

callback: function(results) { erg = results.moves + ' Zügen und ' + results.seconds + ' Sekunden.'); jQuery("#Editbox2").val(erg);

Jetzt bin ich langsam völlig verwirrt. Ich hab vor results.moves noch eine "(" eingefügt, weil sonst gar nichts mehr ging, aber dann klappt es trotzdem nicht.

Sempervivum · 05. Jan. 2015

Stimmt, da hatte ich noch einen Fehler gemacht.
Was funktioniert denn nicht?

Blubbfisch · 05. Jan. 2015

Sempervivum schrieb:
Was funktioniert denn nicht?

Es wird kein Ergebnis eingetragen. Man kann Spielen und dann passiert nichts weiter.

Sempervivum · 05. Jan. 2015

Lade es doch mal hoch, unter dem Link, den Du früher gepostet hast.

Blubbfisch · 05. Jan. 2015

Sempervivum schrieb:
Lade es doch mal hoch, unter dem Link, den Du früher gepostet hast.

Es ist hier: Raetsel

Ich hab auch mal ein var vor erg = ... eingefügt, aber das hats auch nicht gebracht.

- - - Aktualisiert - - -

Es geht

War mein Fehler, sorry. Ich hatte alten code nicht mit // versehen. Cool danke. Jetzt mach ich das erstmal so fertig und dann begebe ich mich daran es auf die Spieler.php zu übertragen.

Vielen Dank!!!!

Success Callback um Namen Abzufragen und dann mit Daten speichern

j-l-n

Guest

Blubbfisch

New member

rico2009

Guest

Sempervivum

Banned

Blubbfisch

New member

Sempervivum

Banned

Blubbfisch

New member

Sempervivum

Banned

Blubbfisch

New member

Sempervivum

Banned

Blubbfisch

New member

Sempervivum

Banned

Blubbfisch

New member

Sempervivum

Banned

Blubbfisch

New member