Hola,
Tengo un código que añade elementos a una lista.
Funciona en jquery pero no en jqueryMobile. En este último añade el elemento pero inmediatamente recarga la página, por lo que se pierde.
Os pongo el código:
lista.php
Código HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--
Si utilizo estas librerías de jquery, sí que funciona
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
-->
<!--
Cuando utilizo jqueryMobile, NO FUNCIONA
-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="tareas">
<div data-role="content">
<div id="wrapper">
<h1>Lista de tareas</h1>
<ul id="lista" data-role="listview">
<li id="Línea 1">Línea 1</li>
</ul>
<BR><BR>
<form id="formulario" method="post">
<input type="text" id="campo-nombre" name="nombre" placeholder="Nuevo elemento">
</form>
</div>
</div>
</div>
<script>
$(function(){
var formulario = $('#formulario'), lista = $('#lista');
formulario.on('submit',function(evento){
evento.preventDefault();
var nombre = $('#campo-nombre').val();
$('#campo-nombre').val('');
$.ajax({
type: 'POST',
url: 'insertar.php',
dataType: 'json',
data: {
nombre: nombre,
},
success: function (devolver){
if (devolver.valor){
$('<li>',{
id : devolver.valor,
text: nombre,
}).hide().appendTo($('#lista')).fadeIn(2000);
}
}
});
});
});
</script>
</body>
</html> insertar.php
Código PHP:
<?php
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')){
$devolver = null;
$nombre = $_POST['nombre'];
$devolver = array ('valor' => $nombre);
if ($devolver)
echo json_encode($devolver);
}
?>
¿Alguna idea de por qué hace esto?
Gracias!
Javi.