JavaScript JQuery Mobile Submit Problem

xSeppelx · 23. Februar 2013

Hi,

ich will gerade mit JQuery Mobile ein einfaches Formular abschicken.

Vorgehen:
Startseite-> Klick auf einen Link:

Code:

	<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
		<li data-role="list-divider">Navigation</li>
		<li><a href="nav.php?id=form" data-transition="slide">Formular</a></li>

	</ul>

nav.php:

Code:

<?php

include('header.php');


$effect = htmlentities($_GET['id']);

if($effect == "form"){

    $kcal = "0";
    $kh = "1";


echo "<h1>KH -> KCAL</h1>";
echo '
<form id="food">
<h3 id="notification"></h3>
<label for="number-pattern"><b>Kcal:</b></label><br />
<input type="text" disabled="disabled" name="kcal" id="kcal" value="'.$kcal.'"><br /><br />
<label for="number-pattern">Kohlenhydrate:</label><br />
<input type="number" data-clear-btn="true" name="kh" pattern="[0-9]*" id="kh" value="'.$kh.'"><br />
<input type="submit" name ="submit" id="submit" value="submit">
<input type="reset" value="Reset">
</form>

';


}
...

Noch der Code aus dem header:

Code:

<!DOCTYPE html>
<html>
<head>
	<title>Formular-Test</title>   
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />  
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
     <script>
        function onSuccess(data, status)
        {
            data = $.trim(data);
            $("#notification").text(data);
        }
  
        function onError(data, status)
        {
            // handle an error
        }        
  
        $(document).ready(function() {
            $("#submit").click(function(){
  
                var formData = $("#food").serialize();
  
                $.ajax({
                    type: "POST",
                    url: "food.php",
                    cache: false,
                    data: formData,
                    success: onSuccess,
                    error: onError
                });
  
                return false;
            });
        });
    </script>
  
    
</head>
<body>
<div data-role="page" data-theme="b">
	<div data-role="header" data-theme="b">
		<h1>Test<br /><?php $datum = date("d.m.Y");
$uhrzeit = date("H:i");
echo $datum," - ",$uhrzeit;?></h1>
	</div>
	<div data-role="content">

food.php

Code:

<?php

    $kh = $_POST["kh"];
     echo $kh;
?>

Was passiert nun?
Nichts...
Ich klicke auf den Link gebe das ein und normalerweise sollte jetzt die Eingabe aus dem Formal angezeigt werden...
Das geht auf normalen Weg nicht, außer ich rufe nav.php?id=... manuell auf... dann gehts.
Was läuft da schief? Kann das jemand nachvollziehen?

DHundt · 25. Februar 2013

Mahlzeit,

Ich denke das Problem liegt in deiner "nav.php".
Du musst auch hier richtiges HTML ausgeben (inkl. HTML, HEAD, BODY etc.).
Ich könnte mir vorstellen, dass jQuery den Befehl via Ajax nachlädt und dann die entsprechenden Teile der Seite ersetzt (Head, Body).
Dass das ganze funktioniert, wenn du es "manuell" öffnest, liegt an der "Fehlerkompatibilität" der Browser.
D.h. der Browser versucht den Inhalt so gut wie möglich darzustellen, auch wenn dieser nicht korrekt ist.

Gruß

xSeppelx · 25. Februar 2013

Stimmt...
Ich glaube daran liegt es!
Danke ich probiere das nachher mal aus.

Ergänzung (25. Februar 2013)

Ich hab nav.php jetzt wie folgt geändert... läuft aber immer noch nicht:

PHP:

<!DOCTYPE html>
<html>
<head>
	<title>kcal.sreinig.com</title>   
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />  
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
     <script>
        function onSuccess(data, status)
        {
            data = $.trim(data);
            $("#notification").text("Erfolgreich");
        }
  
        function onError(data, status)
        {
            // handle an error
        }        
  
        $(document).ready(function() {
            $("#submit").click(function(){
  
                var formData = $("#food").serialize();
  
                $.ajax({
                    type: "POST",
                    url: "food.php",
                    cache: false,
                    data: formData,
                    success: onSuccess,
                    error: onError
                });
  
                return false;
            });
        });
    </script>
  
    
</head>
<body>
<div data-role="page" data-theme="b">
	<div data-role="header" data-theme="b">
		<h1>Test<br /><?php $datum = date("d.m.Y");
$uhrzeit = date("H:i");
echo $datum," - ",$uhrzeit;?></h1>
	</div>
	<div data-role="content"> 

<?php

$id= htmlentities($_GET['id']);
if(id=...){

    $kcal = "0";
    $kh = "1";
    $ew = "2";
    $ft = "3";
    $ak = "4";
  

echo "<h1>Test</h1>";
echo '
<form id="food">
<h3 id="notification"></h3>
<label for="number-pattern"><b>Kcal:</b></label><br />
<input type="text" disabled="disabled" name="kcal" id="kcal" value="'.$kcal.'"><br /><br />
<label for="number-pattern">Kohlenhydrate:</label><br />
<input type="number" data-clear-btn="true" name="kh" pattern="[0-9]*" id="kh" value="'.$kh.'"><br />
<input type="submit" name ="submit" id="submit" value="submit">
</form>

';
}
else{

echo"Bla";
}
?>
	</div>

</div>


</body>
</html>

Zur Problembehandlung:
In der Addresleist steht, wenn ich auf die Seite gehe:
/#nav.php?id...
Feuere ich den submit ab, wird die Seite "refresht" und in der Adressleiste stehen die Parameter, wie wenn ich GET mache...

Ergänzung (25. Februar 2013)

edit:
Im Quellcode steht übrigens auch nicht das "aktualisierte", also da ist noch das Menü von der Vorseite.
Kann ich Jquery jetzt irgendwie zwingen, da auch nachzuladen?

xSeppelx · 28. Februar 2013

Ich push das mal... komme leider nicht weiter.

Suche

JavaScript JQuery Mobile Submit Problem

xSeppelx

Lt. Junior Grade

DHundt

Ensign

xSeppelx

Lt. Junior Grade

xSeppelx

Lt. Junior Grade

Ähnliche Themen