[SOLUCIONADO] jqueryMobile y AJAX recarga la página al añadir elemento a lista

jakama · #1 (**permalink**) 17/02/2013, 13:20

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.

jakama · #2 (**permalink**) 18/02/2013, 07:21

Resuelto! Basta añadir al formulario: data-ajax="false"

Salu2.