Formulario en Jquery_Mobile+PHP+AJAX

Sirrohan · #1 (**permalink**) 03/11/2011, 08:51

Tengo un pequeño detalle al enviar un formulario, desde ayer estoy aprendiendo a realizar aplicaciones para teléfonos móviles y, debido a incompatibilidades con el navegador del Blackberry con el jCalendar, estoy aprendiendo a utilizar la librería jQuery_Mobile, y me ha gustado muchísimo la forma de trabajarla...

El problema:

Tengo este formulario

Código HTML:

Ver original<div data-role="content">
            <form method="post" action="analizar.php" name="form1" id="form1">
                <div id="login" data-role="fieldcontain">  
                
                    <label id="usuario1" for="usuario">usuario</label>  
                    <select name="usuario" id="usuario" tabindex="1">
                    <?
                     include('conexion.php');
                     conectar();
                     $sql="select usuario from usuarios where TRUE";
                     $conex= pg_query($sql);
                     while($reg=pg_fetch_object($conex)){
                     ?>
                     <option value="<?= $reg->usuario ?>"><? echo $reg->usuario; ?></option>
                     <? } 
                     desconectar();?>
                    </select>
                </div>  
                <div id="login" data-role="fieldcontain">  
                    <label for="password">password</label>  
                    <input id="password" name="password" type="password" />  
                </div>  
                <div id="login" data-role="fieldcontain">  
                    <label for="Enviar"></label>  
                    <input id="enviar" name="enviar" type="submit" value="enviar" onSubmit="javascript:enviar();"/>  
                </div>  
            </form>
 
        </div>

Intenté utilizar ajax

Código Javascript:

Ver original<script>
            function enviar()
            {
                var ajax= nuevoajax();
                var user=document.getElementById('usuario').value;
                var pass=document.getElementById('password').value;
                            ajax.open("POST","analizar.php",true);
                ajax.send("usuario="+user+"&password"+pass);
            }
            </script>

Y este es el código de analizar.php

Código PHP:

Ver original<?
 
$user=$_POST['name'];
$pass=$_POST['password'];
 
echo $user." ".$pass." ";
?>

Y obtengo este mensaje en el navegador:
undefined

Por lo tanto, ¿Qué estoy haciendo mal?

Sirrohan · #2 (**permalink**) 03/11/2011, 09:28

He probado con este método de jQueryMobile

Código Javascript:

Ver original+
$.mobile.changePage( "analizar.php", {
    type: "post", 
    data: $("form1").serialize()
});

Y me sigue apareciendo el mismo mensaje

Sirrohan · #3 (**permalink**) 03/11/2011, 12:47

Bueno, me auto-respondo ^^

Después de revisar y tratar de traducir el inglés encontré esto en la documentación

Cita:

Note: Calling jqmData() with no argument will return undefined. This behavior is subject to change in future versions.

Así quedó la página index.php

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
    <title>JQuery Mobile</title>
    <!-- Librerías necesarias para JQM-->
    <link href="jquery.mobile-1.0rc2.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.6.4.min.js"></script>
    <script src="jquery.mobile-1.0rc2.min.js"></script>
   
   <script type="text/javascript" language="javascript">
        function nuevoAjax()
        { 
        /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
        lo que se puede copiar tal como esta aqui */
        var xmlhttp=false;
        try
        {
            // Creacion del objeto AJAX para navegadores no IE
            xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                // Creacion del objet AJAX para IE
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(E)
            {
                if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
            }
        }
        return xmlhttp; 
    }
    </script>    
    <!-- Fin librerías necesarias -->
</head>
<body> 
    <div data-role="page" id="principal" data-theme="c" data-content-theme="e">
 
        <div data-role="header">
            <h1>JQuery Mobile</h1>
        </div>
 
        <div data-role="content">
            <p>Contenido</p>
            <p>Ir a la <a href="#seccion2">segunda página</a></p>
            <p>Ir a la <a href="#seccion3">tercer página</a></p>
        </div>
 
        <div data-role="footer">
            <h4>El pié</h4>
        </div>
        
    </div>
    
    <div data-role="page" id="seccion2" data-theme="b" data-content-theme="b" >
        <div data-role="header">
            <h1>Segunda Página</h1>
        </div>
        <a href="index.php" data-role="button" data-theme="b" data-icon="home" data-inline="true">Inicio</a>            
 
        <div data-role="content">
            <form action="analizar.php" name="form1" id="form1" target="_new">
                <div id="login" data-role="fieldcontain">  
                
                    <label id="usuario1" for="usuario">usuario</label>  
                    <select name="usuario" id="usuario" tabindex="1">
                    <?
                     include('conexion.php');
                     conectar();
                     $sql="select usuario from usuarios where TRUE";
                     $conex= pg_query($sql);
                     while($reg=pg_fetch_object($conex)){
                     ?>
                     <option value="<?= $reg->usuario ?>"><? echo $reg->usuario; ?></option>
                     <? } 
                     desconectar();?>
                    </select>
                </div>  
                <div id="login" data-role="fieldcontain">  
                    <label for="password">password</label>  
                    <input id="password" name="password" type="password" />  
                </div>  
                <div id="login" data-role="fieldcontain">  
                    <label for="Enviar"></label>  
                    <input id="enviar" name="enviar" type="submit" value="enviar" onSubmit="javascript:enviar();"/>  
                </div>  
            </form>
            <script>
            function enviar()
            {
                $.ajax({
                type: "GET",
                 url: "index.php#seccion2",
                data: ("#form1").serialize()    
                });         
            }
            </script>
        </div>
 
        <div data-role="footer">
            <h4>Control de Calidad</h4>
        </div>
        <div data-role="collapsible" data-theme="a" data-content-theme="a">
        <h3>Datos</h3>
        <p>
            <?
            if ((!empty($_GET['usuario'])) &&(!empty($_GET['password'])))
            {
                echo "<div data-role='fieldcontain'>";
                echo "<div id='pass' data-role='fieldcontain'>  
                    <label for='password'>$password</label>  
                    <input id='password' name='password' type='password' />  
                </div>  
";
                echo "</div>";
            }
            ?>
        </p>
        </div>
    </div>  
 
    <div data-role="page" id="seccion3">
 
        <div data-role="header">
            <h1>Tutorial JQuery Mobile: Tercera Página</h1>
        </div>
 
        <div data-role="content">
 
 
            <div class="demo">
 
                <p>
                    <label for="fecha">Fecha: </label>
                    <input type="text" name="fecha" class="campofecha" size="12">
                </p>
 
            </div><!-- Fin demo -->
            <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Fecha</legend>
                <label for="select-choice-month" class="select">Mes</label>
                    <select name="select-choice-month" id="select-choice-month">
                        <option>Mes</option>
                      <option value="1">Enero</option>
                      <option value="2">Febrero</option>
                      <option value="3">Marzo</option>
                      <option value="4">Abril</option>
                      <option value="5">Mayo</option>
                      <option value="6">Junio</option>
                      <option value="7">Julio</option>
                      <option value="8">Agosto</option>
                      <option value="9">Septiembre</option>
                      <option value="10">Octubre</option>
                      <option value="11">Noviembre</option>
                      <option value="12">Diciembre</option>
                        <!-- etc. -->
                    </select>
                    <label for="select-choice-day">Dia</label>
                    <select name="select-choice-day" id="select-choice-day">
                          <option>Day</option>
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                          <option value="4">4</option>
                          <option value="5">5</option>
                          <option value="6">6</option>
                          <option value="7">7</option>
                          <option value="8">8</option>
                          <option value="9">9</option>
                          <option value="10">10</option>
                          <option value="11">11</option>
                          <option value="12">12</option>
                          <option value="13">13</option>
                          <option value="14">14</option>
                          <option value="15">15</option>
                          <option value="16">16</option>
                          <option value="17">17</option>
                          <option value="18">18</option>
                          <option value="19">19</option>
                          <option value="20">20</option>
                          <option value="21">21</option>
                          <option value="22">22</option>
                          <option value="23">23</option>
                          <option value="24">24</option>
                          <option value="25">25</option>
                          <option value="26">26</option>
                          <option value="27">27</option>
                          <option value="28">28</option>
                          <option value="29">29</option>
                          <option value="30">30</option>
                          <option value="31">31</option>          
                    </select>
                <label for="select-choice-year">Año</label>
                    <select name="select-choice-year" id="select-choice-year">
                        <option>Year</option>
                        <option value="2011">2011</option>
                    </select>
            </fieldset>
            </div>
        </div><!--- End Content --->
        <div data-role="footer">
            <h4>El pie</h4>
        </div>
        
    </div>  
 
</body>
</html>

Y así quedó la página analizar.php

Código HTML:

Ver original<?
//session_start();
$user2=$_GET['usuario'];
$pass2=$_GET['password'];
 
echo $user2."2 ".$pass2."2 ";
include('conexion.php');
conectar();
 
$sql="select * from usuarios where usuario = '$user2' and password = '$pass2'";
$conex=pg_query($sql);
desconectar();
 
?>
<!DOCTYPE html>
<html>
    <head>
    <title>JQuery Mobile</title>
    <!-- Librerías necesarias para JQM-->
    <link href="jquery.mobile-1.0rc2.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.6.4.min.js"></script>
    <script src="jquery.mobile-1.0rc2.min.js"></script>
   <link href="calendario_dw-estilos.css" type="text/css" rel="STYLESHEET">
   <script type="text/javascript" src="calendario.js"></script>
   
<body> 
    <div data-role="page" id="principal">
 
        <div data-role="header">
            <h1>JQuery Mobile</h1>
        </div>
 
        <div data-role="content">
        <a href="index.php" data-role="button" data-theme="a" data-icon="home" data-inline="true">Inicio</a>            
        <a href="index.php#seccion2" data-role="button" data-theme="b" data-icon="home" data-inline="true" onClick="$.jqmRemovedata;">P&aacute;gina 2</a>           
        <a href="index.php#seccion3" data-role="button" data-theme="c" data-icon="home" data-inline="true" onClick="$.jqmRemovedata;">P&aacute;gina 3</a>           
            
            <p>Datos</p>
            <table>
                <tr>
                    <td><p>Nombre</p></td>
                    <td><p>Usuario</p></td>
                </tr>
                <div class="ui-grid-b">
          <tr><?
                if(pg_num_rows($conex))
                {
                    while($registro=pg_fetch_object($conex))
                    {
                        ?>
                        <div class="ui-block-a"><td><? echo $registro->usuario;?></td></div>
                        <div class="ui-block-a"><td><? echo $registro->password; ?> </td></div>
                        <?
                    }
                }
                ?>
                </tr>
                </div>
            </table>
            <p>Ir a la <a href="index.php">indice</a></p>
        </div>
 
        <div data-role="footer">
            <h4>Pi&eacute; de P&aacute;gina</h4>
        </div>
        
    </div>
</body>

gasofa21 · #4 (**permalink**) 08/05/2012, 02:49

Hola, que tal, viendo tu post algunas de las dudas que tenia se resolvieron pero no todas xD. Mira tengo el siguiente codigo:

<!DOCTYPE html>

<html>
<head>

<title>CCMI. Jesús Usón</title>

<meta http-equiv="Content-Language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" src="jfeed/build/dist/jquery.jfeed.pack.js"></script>

</head>
<body onload="init()">
<section id="page1" data-role="page" data-theme="b">
<header data-role="header" data-theme="b">
<h1>CCMI. JESÚS USÓN</h1>
</header>
</br></br>
<a href="http://www.ccmijesususon.com">
<div align="center"><img src="ccmi.gif"></a></div>
<br/><br/>
<div align="center"/><a href="page2" data-icon="star" data-role="button" data-inline="true" data-transition="pop" >News</a>
<div align="center"/><a href="page3" data-icon="star" data-role="button" data-inline="true" data-transition="flip" >News</a>
<div align="center"/><a href="page2" data-icon="star" data-role="button" data-inline="true" >News</a>
<div align="center"/><a href="page2" data-icon="star" data-role="button" data-inline="true" >News</a>
</br></br></br></br></br></br></br>
<footer data-role="footer" data-theme="b">
<h2>CCMI</h2>
</footer>
</section>
<section id="page2" data-role="page" data-theme="b">
<header data-role="header">
<h1>CCMI. JESÚS USÓN</h1>
</header>

<div data-role="content" class="content">
<ul data-role="listview" data-inset="true" data-theme="a">
<li data-role="divider" data-theme="b">Noticias</li>
<li onclick="url='http://feeds.feedburner.com/rssccmiju'"><a href="#page2-1">RSS CCMIJU</a><img src="assets/icons/rss.png" class="ui-li-icon"></li>
<li onclick="url='http://feeds.feedburner.com/ccmijupublicaciones'"><a href="#page2-1">Publicaciones</a><img src="assets/icons/rss.png" class="ui-li-icon"></li>
<li onclick="url='http://feeds.feedburner.com/ccmijucursos'"><a href="#page2-1">Cursos</a><img src="assets/icons/rss.png" class="ui-li-icon"></li>
<li onclick="url='http://feeds.feedburner.com/ccmijunoticias'"><a href="#page2-1">Noticias</a><img src="assets/icons/rss.png" class="ui-li-icon"></li>
</ul>
</div>
<footer data-role="footer" data-theme="b">
<h2>CCMI</h2>
</footer>
</section>
<section id="page2-1" data-role="page" data-theme="b">
<header data-role="header">
<h1>CCMI. JESÚS USÓN</h1>
</header>
<div data-role="content" class="content"/>
<ul data-role="listview" data-inset="true" data-theme="a">
</ul>
</div>
</section>
<section id="page3" data-role="page" data-theme="b">
<header data-role="header">
<h1>Formulario</h1>
</header>
<div data-role="fieldcontain">
<label for="name"><b>Nombre:</b></label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="textarea"><b>Localidad:</b></label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<div data-role="fieldcontain">
<label for="search"><b>Busqueda de entrada:</b></label>
<input type="search" name="password" id="search" value="" />
</div>
<div class="containing-element">
<label for="flip-min">Cambiar:</label>
<select name="slider" id="flip-min" data-role="slider" data-theme="c">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider"><b>Slider:</b></label>
<input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true" data-theme="c" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend><b>Elige aperitivo:</b></legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" data-theme="c" />
<label for="checkbox-1a">Cheetos</label>

<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" data-theme="c" />
<label for="checkbox-2a">Doritos</label>

<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" data-theme="c" />
<label for="checkbox-3a">Fritos</label>

<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" data-theme="c" />
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend><b>Estilo de la fuente:</b></legend>
<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" data-theme="c" />
<label for="checkbox-6">b</label>

<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" data-theme="c" />
<label for="checkbox-7"><em>i</em></label>

<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" data-theme="c" />
<label for="checkbox-8">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend><b>Elige una mascota:</b></legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" data-theme="c" />
<label for="radio-choice-1">Gato</label>

<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" data-theme="c" />
<label for="radio-choice-2">Perro</label>

<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" data-theme="c" />
<label for="radio-choice-3">Hamster</label>

<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" data-theme="c" />
<label for="radio-choice-4">Lagarto</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select-choice-1" class="select"><b>Elige el metodo de envio:</b></label>
<select name="select-choice-1" id="select-choice-1" data-theme="c" >
<option value="standard">Standard: 7 días</option>
<option value="rush">Rush: 3 días</option>
<option value="express">Express: al siguiente día</option>
<option value="overnight">Durante la noche</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="select-choice-a" class="select"><b>Elige el metodo de envio:</b></label>
<select name="select-choice-a" id="select-choice-a" data-native-menu="false" data-theme="c">
<option>Ejemplo de menú personalizado</option>
<option value="standard">Standard: 7 días</option>
<option value="rush">Rush: 3 días</option>
<option value="express">Express: al siguiente día</option>
<option value="overnight">Durante la noche</option>
</select>
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="d">Cancelar</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a">Presentar</button></div>
</fieldset>
</div>
</section>
</div>
</body>
</html>

Mi pregunta es la siguiente, como valido ese formulario en JQuery mobile, porque creo que ya me estoy volviendo loco y necesito ayuda xD
Muchas gracias