Foros del Web » Programando para Internet » Jquery »

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

Estas en el tema de jqueryMobile y AJAX recarga la página al añadir elemento a lista en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/02/2013, 13:20
 
Fecha de Ingreso: marzo-2007
Mensajes: 31
Antigüedad: 17 años
Puntos: 0
jqueryMobile y AJAX recarga la página al añadir elemento a lista

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.
__________________
Tatuajes
  #2 (permalink)  
Antiguo 18/02/2013, 07:21
 
Fecha de Ingreso: marzo-2007
Mensajes: 31
Antigüedad: 17 años
Puntos: 0
Respuesta: jqueryMobile y AJAX recarga la página al añadir elemento a lista

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

Salu2.
__________________
Tatuajes

Etiquetas: ajax, dinamicamente, elemento, lista, mobile
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:14.