en una web móvil he intentado enviar datos por ajax a una página callajax.php pero no funcionaba. El script no lo entendían los navegadores (al menos Android).
Entonces buscando he encontrado esta maravilla que es la librería Jquerymobile pero tengo un problema:
Enviando datos con un formulario funciona perfectamente siempre que sólo haya un botón.
Pongo el código:
callajax.php
Código:
y en la index.php
<?php
$user = $_POST['nombre'];
$apellido = $_POST['apellido'];
echo $user;
echo $apellido;
?>
Código:
Bien esto funciona perfectamente: Introduce en la etiqueta <h3> los valores de los campos hidden:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Submit a form via AJAX</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
</head>
<body>
<div data-role="page" id="callAjaxPage">
<div data-role="header"></div>
<div data-role="content">
<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 = $("#callAjaxForm").serialize();
$.ajax({
type: "post",
url: "callajax.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
return false;
});
});
</script>
<!-- call ajax page -->
<form id="callAjaxForm">
<input type="hidden" name="nombre" id="nombre" value="Luis"/>
<input type="hidden" name="apellido" id="apellido" value="Grciaa" />
<button data-theme="b" id="submit" type="submit">enviar</button>
</form>
<h3 id="notification"></h3>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
Ahora bien, si intento poner otro botón para que arroje otros valores,
el segundo botón me recarga la página, y curiosamente me devuelve una url con variables get. El primero sigue funcionando sin recargar la página pero el segundo me la recarga.
Supongamos esto:
Código:
Bueno, he intentado repetir el script y cambiar el nombre al formulario pero pasa lo mismo.
<!-- call ajax page -->
<form id="callAjaxForm">
<input type="hidden" name="nombre" id="nombre" value="Luis"/>
<input type="hidden" name="apellido" id="apellido" value="Grciaa" />
<button data-theme="b" id="submit" type="submit">enviar</button>
</form>
<!-- call ajax page -->
<form id="callAjaxForm">
<input type="hidden" name="nombre" id="nombre" value="Paco"/>
<input type="hidden" name="apellido" id="apellido" value="Perez" />
<button data-theme="b" id="submit" type="submit">enviar</button>
</form>
Agradecería cualquier ayuda.
Gracias de antemano
