Foros del Web » Programando para Internet » Javascript »

pasar una variable a otro div y actualizarlo

Estas en el tema de pasar una variable a otro div y actualizarlo en el foro de Javascript en Foros del Web. Hola gente, acudo a ustedes porque no tengo mucha idea de javascript y creo que es ideal para lo que quiero hacer. Vamos al grano, ...
  #1 (permalink)  
Antiguo 20/03/2012, 15:38
 
Fecha de Ingreso: septiembre-2010
Mensajes: 74
Antigüedad: 13 años, 8 meses
Puntos: 1
pasar una variable a otro div y actualizarlo

Hola gente,
acudo a ustedes porque no tengo mucha idea de javascript y creo que es ideal para lo que quiero hacer.
Vamos al grano, Tengo una pagina con dos divs, el div superior tengo una caja de texto y un boton Que luego de llenar el textbox con el codigo de un producto y darle click actualize el div de abajo con los productos que tengan ese codigo, para lo que tendre que hacer una consulta a la base de datos lo cual no es problema. Mi problema es como hago para pasarle la variable de la caja de texto al otro div para poder hacer la consulta a la base de datos.
  #2 (permalink)  
Antiguo 20/03/2012, 16:41
Avatar de mko
mko
 
Fecha de Ingreso: agosto-2010
Ubicación: la vida es un riesgo
Mensajes: 101
Antigüedad: 13 años, 9 meses
Puntos: 14
Respuesta: pasar una variable a otro div y actualizarlo

eso lo puedes hacer con ajax atravez del evento onclik te pongo un ejemplo: sencillo
Código:
<form action="" name="formulario" >
<input type="text" id="clave"  > <button type="button" onClick="buscar()">buscar</button>
    </form>

<div id="resultado">
  </div>
tu archivo ajax seria asi:
----ajax.js---
Código:
function objetoAjax(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
  		}
	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}




//_________________________________________________________________________
function buscar(){ //esta es la funcion que envia los datos de manea asincrona
	//div donde  mostrararemos  los datos de la consulta 
	divResultado = document.getElementById('resultado');

	//tomamos el valor enviado del formulario de envio
	clave=document.formulario.clave.value;

	//instanciamos el objetoAjax
	ajax=objetoAjax();
	//usamos el medoto POST
	//archivo que realizará la operacion
	ajax.open("POST", "buscar.php",true);
	//mostramos una imagen mientras cargamos el resultado de la consulta
	divResultado.innerHTML= '<img src="images/ajax.gif">';
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			//visualizamos el resultado correscpondiente
			divResultado.innerHTML = ajax.responseText
		}
	}
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//enviando los valoress
	ajax.send("clave="+clave)
}
tu archivo buscar.php encardo de ralizar la consulta cuadno reciba la clave

Código PHP:

<?php

include "conexion.php"//tu archivo de conexion
$clave=utf8_decode($_POST['clave']);


echo
" $clave";
//aqui tu consulta
 //y todo lo que imprimas aqui se mostra en el div resultado,, vez que no es muy complicacado

?>
__________________
cuando no esperas nada y obtienes todo eso es destino
  #3 (permalink)  
Antiguo 20/03/2012, 16:57
 
Fecha de Ingreso: septiembre-2010
Mensajes: 74
Antigüedad: 13 años, 8 meses
Puntos: 1
Respuesta: pasar una variable a otro div y actualizarlo

Cita:
Iniciado por mko Ver Mensaje
eso lo puedes hacer con ajax atravez del evento onclik te pongo un ejemplo: sencillo
Código:
<form action="" name="formulario" >
<input type="text" id="clave"  > <button type="button" onClick="buscar()">buscar</button>
    </form>

<div id="resultado">
  </div>
tu archivo ajax seria asi:
----ajax.js---
Código:
function objetoAjax(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
  		}
	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}




//_________________________________________________________________________
function buscar(){ //esta es la funcion que envia los datos de manea asincrona
	//div donde  mostrararemos  los datos de la consulta 
	divResultado = document.getElementById('resultado');

	//tomamos el valor enviado del formulario de envio
	clave=document.formulario.clave.value;

	//instanciamos el objetoAjax
	ajax=objetoAjax();
	//usamos el medoto POST
	//archivo que realizará la operacion
	ajax.open("POST", "buscar.php",true);
	//mostramos una imagen mientras cargamos el resultado de la consulta
	divResultado.innerHTML= '<img src="images/ajax.gif">';
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			//visualizamos el resultado correscpondiente
			divResultado.innerHTML = ajax.responseText
		}
	}
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//enviando los valoress
	ajax.send("clave="+clave)
}
tu archivo buscar.php encardo de ralizar la consulta cuadno reciba la clave

Código PHP:

<?php

include "conexion.php"//tu archivo de conexion
$clave=utf8_decode($_POST['clave']);


echo
" $clave";
//aqui tu consulta
 //y todo lo que imprimas aqui se mostra en el div resultado,, vez que no es muy complicacado

?>
Anduvo extraordinariamente bien, muchas gracias!!!!
  #4 (permalink)  
Antiguo 21/03/2012, 15:49
 
Fecha de Ingreso: septiembre-2010
Mensajes: 74
Antigüedad: 13 años, 8 meses
Puntos: 1
Respuesta: pasar una variable a otro div y actualizarlo

Cita:
Iniciado por mko Ver Mensaje
eso lo puedes hacer con ajax atravez del evento onclik te pongo un ejemplo: sencillo
Código:
<form action="" name="formulario" >
<input type="text" id="clave"  > <button type="button" onClick="buscar()">buscar</button>
    </form>

<div id="resultado">
  </div>
tu archivo ajax seria asi:
----ajax.js---
Código:
function objetoAjax(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
  		}
	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}




//_________________________________________________________________________
function buscar(){ //esta es la funcion que envia los datos de manea asincrona
	//div donde  mostrararemos  los datos de la consulta 
	divResultado = document.getElementById('resultado');

	//tomamos el valor enviado del formulario de envio
	clave=document.formulario.clave.value;

	//instanciamos el objetoAjax
	ajax=objetoAjax();
	//usamos el medoto POST
	//archivo que realizará la operacion
	ajax.open("POST", "buscar.php",true);
	//mostramos una imagen mientras cargamos el resultado de la consulta
	divResultado.innerHTML= '<img src="images/ajax.gif">';
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			//visualizamos el resultado correscpondiente
			divResultado.innerHTML = ajax.responseText
		}
	}
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//enviando los valoress
	ajax.send("clave="+clave)
}
tu archivo buscar.php encardo de ralizar la consulta cuadno reciba la clave

Código PHP:

<?php

include "conexion.php"//tu archivo de conexion
$clave=utf8_decode($_POST['clave']);


echo
" $clave";
//aqui tu consulta
 //y todo lo que imprimas aqui se mostra en el div resultado,, vez que no es muy complicacado

?>
MKO, acudo a ti para ver si me puedes dar una mano.
el codigo con tu ayuda quedo asi.

Esta es la primera pagina donde esta el el div que luego relleno con la segunda pagina:

Código HTML:
<script lang="javascript">
function objetoAjax(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
  		}
	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}




//_________________________________________________________________________
function buscar(){ //esta es la funcion que envia los datos de manea asincrona
	//div donde  mostrararemos  los datos de la consulta 
	divResultado = document.getElementById('resultado');

	//tomamos el valor enviado del formulario de envio
	clave=document.formulario.clave.value;

	//instanciamos el objetoAjax
	ajax=objetoAjax();
	//usamos el medoto POST
	//archivo que realizará la operacion
	ajax.open("POST", "buscar_cod_vender.php",true);
	//mostramos una imagen mientras cargamos el resultado de la consulta
	//divResultado.innerHTML= '<img src="images/ajax.gif">';
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			//visualizamos el resultado correscpondiente
			divResultado.innerHTML = ajax.responseText
		}
	}
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//enviando los valoress
	ajax.send("clave="+clave)
}
</script>
<html>
    
    <form action="" name="formulario" >
<input type="text" id="clave"  > <button type="button" onClick="buscar()">buscar</button>
    </form>

<div id="resultado">

  </div>
</html> 
y esta es la segunda pagina

Código HTML:
<?php
include_once 'lib.php';
$cod =$_POST['clave'];


$conexion= mysql_connect($dbhost, $dbuser, $dbpassword);
mysql_select_db($database, $conexion);
$result = mysql_query("SELECT id_stock, codigo, descrip, pre_min, pre_may, disponibles  FROM stock where activo = '1'and codigo = $cod", $conexion);
?>
<form name="vender" method="post" action="vender_prod.php">
    <table border="2">
        <tr>
            <th>ID</th>
            <th>Codigo</th>
            <th>Descrip</th>
            <th>Prec.Min</th>
            <th>Prec.May</th>
            <th>Disponibles</th>
            <th></th>
<!--            <th style='border: none'></th>-->
            <th>Cantidad</th>
 
        </tr>
        <?php
        $i = 0;
        while ($row = mysql_fetch_array($result)) {
            ?>
            <tr>
                <td><?php echo $row['id_stock'] ?></td>
                <td><?php echo $row['codigo'] ?></td>
                <td style="width: 500px"><?php echo $row['descrip'] ?></td>
                <td align="right"><?php echo "$"; echo $row['pre_min'] ?></td>
                <td align="right"><?php echo "$"; echo $row['pre_may'] ?></td>
                <td align="center"><?php echo $row['disponibles'] ?></td>
                <td><input id="chk_<?php echo $i ?>" name="seleccion[]" type="checkbox" value="<?php echo$row['id_stock'] ?>" class="chk"/></td>
<!--                <td style="border: none"></td>-->
                <td><input id=txt_<?php echo $i ?>" name="cantidad[]" disabled="disabled" type="text" style="width: 60" class="txt"/></td>  
            </tr>
 
            <?php
            $i++;
        }
        ?>
    </table>
    <br />
    <input type="submit" name="submit" value="Enviar">
</form>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
    
    $(document).ready(function(){ 
       
        $(".chk").change(function(){
            var comentario = $( '.txt', $( this ).parents ( 'tr' ) );
            if( $(this).is(':checked')){            
                comentario.removeAttr('disabled');
            } else {
                comentario.attr('disabled', true);
            }
        });
    });
    
</script> 
Como vez en la segunda pagina tengo una funcion al final que sirve la habilitar o desabilitar unos textbox de una tabla dependiendo si el checkbox respectivo esta tildado o no. La fincion anda perfecto si ejecuto la pagina de forma independiente, pero cuando la ejecutas dentro del div, la funcion no funciona.
Alguna idea????
  #5 (permalink)  
Antiguo 21/03/2012, 18:55
Avatar de mko
mko
 
Fecha de Ingreso: agosto-2010
Ubicación: la vida es un riesgo
Mensajes: 101
Antigüedad: 13 años, 9 meses
Puntos: 14
Respuesta: pasar una variable a otro div y actualizarlo

DE ANTEMANO ACLARO: tiene muy poco que empze en jquery asi aqui si cometo errores corrijamen porfavor a si aprendemos todos vale.

si mira yo mismo estoy con ese problema, con el contenido dinamico las funciones de jquery solo funcionan una vez cuando se carga el contenido la primera ves investigando un poco en contre esta funcion

live()
El método live() funciona de manera similar al método bind() de jQuery, con la particularidad que la asignación del evento es "dinámica" y afecta no sólo a los elementos que casen con el selector en el momento de la invocación, sino también todos los elementos que se puedan definir en un futuro y que casen con ese selector. ..(http://www.desarrolloweb.com/articul...ve-jquery.html)
-----------------------------------------------------------------------------------------
Por desgracia, tenemos una limitación y es que no todos los eventos están soportados por la función y tendremos que conocer los que no son posible extender.
Soportados

click
dblclick
mousedown
mouseup
mousemove
mouseover
mouseout
keydown
keypress
keyup

No soportados

blur
focus
mouseenter
mouseleave
change
submit
(http://www.anieto2k.com/2009/02/18/live-en-jquery-13/)


.::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::..

bueno moodificando tu funcion quedari asi si me equivo corrijanme porfavor
crear un js y luego lo adjuntas:
Código:
<script type="text/javascript">
    
    $(document).ready(function(){ 
       
           $(".chk").live("click", function(e){ 
                    var comentario = $( '.txt', $( this ).parents ( 'tr' ) );
                    if( $(this).is(':checked')){            
                      comentario.removeAttr('disabled');
                      } else {
                         comentario.attr('disabled', true);
                                 }
             });
    });
    
</script>
pruebalo si te funciona felicidades
__________________
cuando no esperas nada y obtienes todo eso es destino

Última edición por mko; 21/03/2012 a las 19:08
  #6 (permalink)  
Antiguo 21/03/2012, 19:31
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 12 años, 3 meses
Puntos: 57
Respuesta: pasar una variable a otro div y actualizarlo

Hola mko, que tal.

La solución para cargar el script en la segunda pagina que se invoca por ajax, la dieron en este tema:

problema-jquery-load-no-carga-script-segunda-pagina

y en cuanto al metodo live(); hay un articulo referente a ese método, el mismo que no recomienda su uso y esta muy bien fundamentado.

Porqué no debemos usar nunca jQuery Live

Saludos
  #7 (permalink)  
Antiguo 21/03/2012, 23:59
Avatar de mko
mko
 
Fecha de Ingreso: agosto-2010
Ubicación: la vida es un riesgo
Mensajes: 101
Antigüedad: 13 años, 9 meses
Puntos: 14
Respuesta: pasar una variable a otro div y actualizarlo

gracias gebremswar como dije estoy dandole apena a jquery gracia por la informacion ya empesaba anotar la lentitud de mis scrip ahora entiendo el x que muchas gracias
__________________
cuando no esperas nada y obtienes todo eso es destino
  #8 (permalink)  
Antiguo 22/03/2012, 07:46
 
Fecha de Ingreso: septiembre-2010
Mensajes: 74
Antigüedad: 13 años, 8 meses
Puntos: 1
Respuesta: pasar una variable a otro div y actualizarlo

Gracias MKO y gebremswar por la ayuda, al final pude lograrlo simplemente agregandole
Código HTML:
$.getScript('habilitar.js');
despues de llamar la pagina en la funcion ajax. Pego el codigo por si ayuda a alguien

Pagina "1" donde se cargara la pagina "2"

Código HTML:
<script type="text/javascript" src="habilitar.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script lang="javascript">
    
function objetoAjax(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
  		}
	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}




//_________________________________________________________________________
function buscar(){ //esta es la funcion que envia los datos de manea asincrona
	//div donde  mostrararemos  los datos de la consulta 
	divResultado = document.getElementById('resultado');

	//tomamos el valor enviado del formulario de envio
	clave=document.formulario.clave.value;

	//instanciamos el objetoAjax
	ajax=objetoAjax();
	//usamos el medoto POST
	//archivo que realizará la operacion
	ajax.open("POST", "buscar_cod_vender.php",true);
        $.getScript('habilitar.js');
        
	//mostramos una imagen mientras cargamos el resultado de la consulta
	//divResultado.innerHTML= '<img src="images/ajax.gif">';
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			//visualizamos el resultado correscpondiente
			divResultado.innerHTML = ajax.responseText
		}
	}
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//enviando los valoress
	ajax.send("clave="+clave)
}
</script>
<html>
    
    <form action="" name="formulario" >
<input type="text" id="clave"  > <button type="button" onClick="buscar()">buscar</button>
    </form>

<div id="resultado">

  </div>
</html> 
Pagina "2"
Código HTML:
<?php
include_once 'lib.php';
$cod =$_POST['clave'];


$conexion= mysql_connect($dbhost, $dbuser, $dbpassword);
mysql_select_db($database, $conexion);
$result = mysql_query("SELECT id_stock, codigo, descrip, pre_min, pre_may, disponibles  FROM stock where activo = '1'and codigo = $cod", $conexion);
?>
<form name="vender" method="post" action="vender_prod.php">
    <table border="2">
        <tr>
            <th>ID</th>
            <th>Codigo</th>
            <th>Descrip</th>
            <th>Prec.Min</th>
            <th>Prec.May</th>
            <th>Disponibles</th>
            <th></th>
<!--            <th style='border: none'></th>-->
            <th>Cantidad</th>
 
        </tr>
        <?php
        $i = 0;
        while ($row = mysql_fetch_array($result)) {
            ?>
            <tr>
                <td><?php echo $row['id_stock'] ?></td>
                <td><?php echo $row['codigo'] ?></td>
                <td style="width: 500px"><?php echo $row['descrip'] ?></td>
                <td align="right"><?php echo "$"; echo $row['pre_min'] ?></td>
                <td align="right"><?php echo "$"; echo $row['pre_may'] ?></td>
                <td align="center"><?php echo $row['disponibles'] ?></td>
                <td><input id="chk_<?php echo $i ?>" name="seleccion[]" type="checkbox" value="<?php echo$row['id_stock'] ?>" class="chk"/></td>
<!--                <td style="border: none"></td>-->
                <td><input id=txt_<?php echo $i ?>" name="cantidad[]" disabled="disabled" type="text" style="width: 60" class="txt"/></td>  
            </tr>
 
            <?php
            $i++;
        }
        ?>
    </table>
    <br />
    <input type="submit" name="submit" value="Enviar">
</form> 
Pagina JS

Código HTML:
  
  $(document).ready(function(){ 
       
        $(".chk").change(function(){
            var comentario = $( '.txt', $( this ).parents ( 'tr' ) );
            if( $(this).is(':checked')){            
                comentario.removeAttr('disabled');
            } else {
                comentario.attr('disabled', true);
            }
        });
    });
Gracias a todos

Etiquetas: botones, variables
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 05:57.