JavaScript JQuery Mobile Submit Problem

xSeppelx

Lt. Junior Grade
Dabei seit
Sep. 2009
Beiträge
383
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

Cadet 4th Year
Dabei seit
Jan. 2013
Beiträge
106
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

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Sep. 2009
Beiträge
383
Stimmt...
Ich glaube daran liegt es!
Danke ich probiere das nachher mal aus.
Ergänzung ()

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 ()

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?
 
Top