Foros del Web » Programando para Internet » Javascript » Frameworks JS »

problema con jqgrid y ajax

Estas en el tema de problema con jqgrid y ajax en el foro de Frameworks JS en Foros del Web. tengo una pagina que funciona al perfeccion mostrando un grid con jqgrid y quiero llamarlo por medio de ajax a un div de una pagina ...
  #1 (permalink)  
Antiguo 10/05/2010, 03:30
Avatar de Fabu_dina  
Fecha de Ingreso: enero-2004
Mensajes: 425
Antigüedad: 20 años, 10 meses
Puntos: 1
problema con jqgrid y ajax

tengo una pagina que funciona al perfeccion mostrando un grid con jqgrid y quiero llamarlo por medio de ajax a un div de una pagina existen y no me lo muestr alguien me puede ayudar con eso

les pongo los codigo
Pagina Principal
Código:
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="../includes/css/principal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../includes/loader/loader.js"></script>
<script type="text/javascript" src="../includes/menu/stlib.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../includes/themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../includes/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../includes/themes/ui.multiselect.css" />
<script src="../includes/js/jquery.js" type="text/javascript"></script>
<script src="../includes/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="../includes/js/jquery.layout.js" type="text/javascript"></script>
<script src="../includes/js/i18n/grid.locale-sp.js" type="text/javascript"></script>
<script type="text/javascript">
	$.jgrid.no_legacy_api = true;
	$.jgrid.useJSON = true;
</script>
<script src="../includes/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../includes/js/jquery.tablednd.js" type="text/javascript"></script>
<script src="../includes/js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="../includes/js/ui.multiselect.js" type="text/javascript"></script>
<script src="../includes/js/src/grid.postext.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<body id="type-b">
<div id="wrap">

	<div id="header">
		<div id="site-name">titulo</div>
	</div>
	
	<div id="content-wrap">
	
		<div id="utility">
		  <script type="text/javascript" src="../includes/menu/menu2.js"></script>
		</div>
		
		<div id="content">
		
			<div id="breadcrumb">
		  <a href="default_2010.asp.cfm">Inicio</a></div>
            
            <div id="resultado_principal">
                <h6>Bienvenido(a), <em class="texto" id="nombre"></em>. </h6>
            </div>
			<div id="datos">
            </div>
			<div id="footer">
			<p>Notas al pie de p&aacute;gina <a href="#">Contactar</a> | <a href="#">Privacy</a> | <a href="#">Links</a></p>
</div>
			
		</div>
		
		<div id="poweredby"><img src="http://www.forosdelweb.com/f13/images/logo.png" alt="Logotipo" width="150" height="50" /></div>
		
	</div>
	
</div>

</body>
</html>
funcion loader.js

Código:
function nuevoAjax()
{ 
	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 muestra_clientes()
{
//	document.getElementById("breadcrumb").innerHTML='<a href="default_2010.asp">Inicio</a> / Call Center / <a href="#"><strong>Busqueda de Clientes</strong></a>';
	document.getElementById("datos").innerHTML='<img src="http://www.forosdelweb.com/f13/images/loadingAnimation.gif"> Cargando, por favor espere...';
	ajax=nuevoAjax();
		ajax.open("GET", "../admin_tlmkt/intra_nominales_1.asp", true);
		ajax.onreadystatechange=function() 
		{ 
			if (ajax.readyState==4)
			{ 
			alert(ajax.responseText);
				document.getElementById("datos").innerHTML=ajax.responseText;
			} 
		}
		ajax.send(null);
}
Codigo de intra_nominales_1.asp

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" media="screen" href="../includes/themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../includes/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../includes/themes/ui.multiselect.css" />
<script src="../includes/js/jquery.js" type="text/javascript"></script>
<script src="../includes/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="../includes/js/jquery.layout.js" type="text/javascript"></script>
<script src="../includes/js/i18n/grid.locale-sp.js" type="text/javascript"></script>

<script type="text/javascript">
	$.jgrid.no_legacy_api = true;
	$.jgrid.useJSON = true;
</script>
<script src="../includes/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../includes/js/jquery.tablednd.js" type="text/javascript"></script>
<script src="../includes/js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="../includes/js/ui.multiselect.js" type="text/javascript"></script>
<script src="../includes/js/src/grid.postext.js" type="text/javascript"></script>

</head>
<body>
<table id="navgrid3"></table>
<div id="pagernav3"></div>
<script src="intra_nominales.js" type="text/javascript"> </script>
</body>
</html>

el archivo de intra_nominales_1.asp funciona perfectamente si lo accesa de forma directa pero al usar el ajax no lo muestra alguien podria decirme porque, ya probe quitando del intra_nominales_1.asp todo solo dejando los siguiente


Código:
<table id="navgrid3"></table>
<div id="pagernav3"></div>
<script src="intra_nominales.js" type="text/javascript"> </script>
pero no escribe el jqgrid si aumento al codigo hola despues de </script> si muestra el hola no muestra ningun error asi que no hay manera de saber porque me esta sucediendo esto si alguien me puede ayudar lo agradeceria demasiado

los que deberia de mostrar seria



Saludos y muchas gracias

Última edición por Fabu_dina; 10/05/2010 a las 03:51
  #2 (permalink)  
Antiguo 08/07/2010, 07:47
 
Fecha de Ingreso: julio-2010
Mensajes: 1
Antigüedad: 14 años, 4 meses
Puntos: 0
Respuesta: problema con jqgrid y ajax

Cita:
Iniciado por Fabu_dina Ver Mensaje
tengo una pagina que funciona al perfeccion mostrando un grid con jqgrid y quiero llamarlo por medio de ajax a un div de una pagina existen y no me lo muestr alguien me puede ayudar con eso

les pongo los codigo
Pagina Principal
Código:
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="../includes/css/principal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../includes/loader/loader.js"></script>
<script type="text/javascript" src="../includes/menu/stlib.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../includes/themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../includes/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../includes/themes/ui.multiselect.css" />
<script src="../includes/js/jquery.js" type="text/javascript"></script>
<script src="../includes/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="../includes/js/jquery.layout.js" type="text/javascript"></script>
<script src="../includes/js/i18n/grid.locale-sp.js" type="text/javascript"></script>
<script type="text/javascript">
	$.jgrid.no_legacy_api = true;
	$.jgrid.useJSON = true;
</script>
<script src="../includes/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../includes/js/jquery.tablednd.js" type="text/javascript"></script>
<script src="../includes/js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="../includes/js/ui.multiselect.js" type="text/javascript"></script>
<script src="../includes/js/src/grid.postext.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<body id="type-b">
<div id="wrap">

	<div id="header">
		<div id="site-name">titulo</div>
	</div>
	
	<div id="content-wrap">
	
		<div id="utility">
		  <script type="text/javascript" src="../includes/menu/menu2.js"></script>
		</div>
		
		<div id="content">
		
			<div id="breadcrumb">
		  <a href="default_2010.asp.cfm">Inicio</a></div>
            
            <div id="resultado_principal">
                <h6>Bienvenido(a), <em class="texto" id="nombre"></em>. </h6>
            </div>
			<div id="datos">
            </div>
			<div id="footer">
			<p>Notas al pie de p&aacute;gina <a href="#">Contactar</a> | <a href="#">Privacy</a> | <a href="#">Links</a></p>
</div>
			
		</div>
		
		<div id="poweredby"><img src="http://www.forosdelweb.com/f13/images/logo.png" alt="Logotipo" width="150" height="50" /></div>
		
	</div>
	
</div>

</body>
</html>
funcion loader.js

Código:
function nuevoAjax()
{ 
	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 muestra_clientes()
{
//	document.getElementById("breadcrumb").innerHTML='<a href="default_2010.asp">Inicio</a> / Call Center / <a href="#"><strong>Busqueda de Clientes</strong></a>';
	document.getElementById("datos").innerHTML='<img src="http://www.forosdelweb.com/f13/images/loadingAnimation.gif"> Cargando, por favor espere...';
	ajax=nuevoAjax();
		ajax.open("GET", "../admin_tlmkt/intra_nominales_1.asp", true);
		ajax.onreadystatechange=function() 
		{ 
			if (ajax.readyState==4)
			{ 
			alert(ajax.responseText);
				document.getElementById("datos").innerHTML=ajax.responseText;
			} 
		}
		ajax.send(null);
}
Codigo de intra_nominales_1.asp

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" media="screen" href="../includes/themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../includes/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../includes/themes/ui.multiselect.css" />
<script src="../includes/js/jquery.js" type="text/javascript"></script>
<script src="../includes/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="../includes/js/jquery.layout.js" type="text/javascript"></script>
<script src="../includes/js/i18n/grid.locale-sp.js" type="text/javascript"></script>

<script type="text/javascript">
	$.jgrid.no_legacy_api = true;
	$.jgrid.useJSON = true;
</script>
<script src="../includes/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../includes/js/jquery.tablednd.js" type="text/javascript"></script>
<script src="../includes/js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="../includes/js/ui.multiselect.js" type="text/javascript"></script>
<script src="../includes/js/src/grid.postext.js" type="text/javascript"></script>

</head>
<body>
<table id="navgrid3"></table>
<div id="pagernav3"></div>
<script src="intra_nominales.js" type="text/javascript"> </script>
</body>
</html>

el archivo de intra_nominales_1.asp funciona perfectamente si lo accesa de forma directa pero al usar el ajax no lo muestra alguien podria decirme porque, ya probe quitando del intra_nominales_1.asp todo solo dejando los siguiente


Código:
<table id="navgrid3"></table>
<div id="pagernav3"></div>
<script src="intra_nominales.js" type="text/javascript"> </script>
pero no escribe el jqgrid si aumento al codigo hola despues de </script> si muestra el hola no muestra ningun error asi que no hay manera de saber porque me esta sucediendo esto si alguien me puede ayudar lo agradeceria demasiado

los que deberia de mostrar seria



Saludos y muchas gracias


Buenos Dias!!

Yo estoy haciendo una aplicacion en java MVC y estoy intentando incorporar el jqgrid para paginar los resultados de una consulta que estoy haciendo pero la verdad no he conseguido mucha documentacion al respecto, yo estoy trabajando basicamente con un JSP que me muestra los filtros de consulta en esta parte coloque el codigo inicial del jqgrid es decir el ombre del grid, el url, los nombres de las columnas, el paginador etc y al presionar buscar se redirecciona a un JS que lo que hace es enviar a un servlet la data con JSON para poder realizar la busqueda, lo que no entiendo mucho es como realizar esa interaccion entre el JSP, EL JS Y EL SERVLET. Por favor si me pudieran enviar un ejemplo de como hacerlo, se los agradeceria.
  #3 (permalink)  
Antiguo 08/07/2010, 10:09
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Tema movido desde javascript
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Etiquetas: ajax, jqgrid
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 07:06.