Migrar funcion JavaScript a función jQuery

[combuilder]

Hola a todos.

Tengo esta función en JavaScript. Alguien me puede decir cómo quedaria transformada para jQuery?

Código PHP:

  function cargaestados(selectDestino, aspDestino){
        var vv1 = captura_valor2('estado_e');

        var vv2 = captura_valor2('icono_e');
        
var vlink = "../estados/listing.asp";

        if (existeElementById('link')) {
              vlink = captura_valor2('link');
                 if (vlink.lenght == 0 ) {
                  vlink = "../estados/listing.asp";
             } 
        } 
        var queryString = "estado_e="+vv1+"&icono_e="+vv2;
        queryString = queryString + '&link=' + vlink;
        cargaSolapa(selectDestino,aspDestino+queryString); --> Llamada a funcion AJAX
}  
   

Os comento lo que hace:
captura_valor2 es una función que me permite recuperar el contenido de un objeto o un div
vv1 y vv2 son variables que guardan el contenido de 2 objetos que hay en el formulario. Contienen los datos que voy a insertar-actualizar en la base de datos
queryString es la variable que contiene la cadena a enviar al servidor, que trabaja con ASP

cargaSolapa es una función creada muy simple:
selectDestino es el DIV donde se va a actualizar contenido
aspDestino+queryString es el enlace URL que hace el envio al servidor

Muchas gracias de antemano!

[chichote]

Pasate por este manual, si ya tienes conocimiento avanzado de jscript se te hara muy simple

http://www.adictosaltrabajo.com/tuto...a=jQueryPlugin

saludos

[combuilder]

Hola
Agradezco la ayuda pero no quiero crear ningun plugin, o al menos, con mis conocimientos de Jscript creo que no es eso.

El tema es que ... puedo llamar a una funcion de jQuery desde un enlace normal?

[chichote]

Iniciado por combuilder

Hola a todos.

Tengo esta función en JavaScript. Alguien me puede decir cómo quedaria transformada para jQuery?

Para eso debes necesariamente crear uno o mas plugins para que sea mas ordenado.

Deberias explicar mejor que es lo que necesitas puntualmente.

[combuilder]

Supongo que la función migrada, seria algo asi.

Espero que alguien me lo pueda confirmar ....

Código:

$function cargaestados(selectDestino,aspDestino) {

var estado_e== $("input#estado_e=").val();
  		if (estado_e=== "") {
        return false;
      }
  		var icono_e = $("input#icono_e").val();
  		if (icono_e== "") {
        return false;
      }
var dataString = 'estado_e=='+ estado_e=+ '&icono_e=' + icono_e;
  //alert (dataString);return false;
  $.ajax({
    type: "POST",
    url: aspDestino,
    data: dataString,
    success: function(data) {
       $(selectDestino).html(data);
    }
  });
}

Mi proposito es poder trabajar contra bases de datos utilizando jQuery.

Me gustaria saber qué ventajas tengo-tendría si se encapsula todo en un plugin como me dice el forero Cherivera.

[chichote]

combuilder, desconosco tu software, es imposible decir q haya q meter todo en un plugins, lo que te recomiendo es encapsular funcionalidades en plugins, y la principal ventaja es que puedes tomar el plugins en muchas otras aplicaciones sin tocar codigo, otra ventaja es que ordenas el desarrollo, otra ventaja es que otras personas pueden trabajar con el sin necesidad de conocer el 100 de su script, solo basta saber que parametros necesita y que resultado arroja.

La otra ventaja de JQuery es que te permite trabajar con ajax sin tanto codigo, tienes mayor control, es muy versatil y simple de utilizar.

Saludos.

[marlanga]

Código:

function cargaestados(selectDestino, aspDestino){
	var vv1 = $('#estado_e').html(); //$('#estado_e').val() si es un input/select/textarea
	var vv2 = $('#icono_e').html();
	var vlink = "../estados/listing.asp";
	var link=$('#link');
	if (link.length>0 && jQuery.trim(link.html())!="") {
		vlink = link.html();
	} 
	$.ajax(function(){
		url: aspDestino,
		data: 'estado_e='+vv1+'&icono_e='+vv2+'&link='+vlink,
		success: function(respuesta){
			$('#'+selectDestino).html(respuesta);
		}
	});
}

[combuilder]

Iniciado por Cherivera

combuilder, desconosco tu software, es imposible decir q haya q meter todo en un plugins, lo que te recomiendo es encapsular funcionalidades en plugins, y la principal ventaja es que puedes tomar el plugins en muchas otras aplicaciones sin tocar codigo, otra ventaja es que ordenas el desarrollo, otra ventaja es que otras personas pueden trabajar con el sin necesidad de conocer el 100 de su script, solo basta saber que parametros necesita y que resultado arroja.

Conozco las ventajas de jQuery, por eso estoy muy interesado en usarlo en mis proyectos.

Mi software hace lo siguiente:
* Selecciono una base de datos, y dentro de ella, las tablas que me interesan
* Una vez que tengo esto me genera lo siguiente:
* Ficheros ASP para atacar a la base de datos
* Funciones en JavaScript para llamar a los ficheros ASP, todo implementado con AJAX

Iniciado por Cherivera

La otra ventaja de JQuery es que te permite trabajar con ajax sin tanto codigo, tienes mayor control, es muy versatil y simple de utilizar.

Saludos.

Para llegar a comprender qué es mejor, necesitaria comprender un simple ejemplo, y eso precísamente, es lo que me falta: un ejemplo COMPLETO llamando a una base de datos de simplemente 2 tablas ....

La base de datos la tengo, y todo el código escrito tal cual sale de mi programa, también.

¿Alguien se atreve a esa migración de un ejemplo simple como el siguiente?

Objetivos:
* Acceder a la aplicación EXCLUSIVAMENTE cuando se introduce un usuario y passw
* Ver el menu
* Cargar un listado de datos en una tabla
* Editar un dato
* Borrar un dato
* Añadir un nuevo dato

¿No es simple? Pues con AJAX y ASP lo hago casi instantáneamente, .... funcionando todo perfecto. Mi meta: conseguir lo mismo pero bajo jQuery.

[Dany_s]

y no leiste nada de la doc?
la doc tiene ejemplos bastantes simples muy intuitivos y útiles

seleccionar elementos
http://api.jquery.com/category/selectors/
si te fijás al costado derecho tiene links a subcategorías como:
para seleccion de elementos de formularios, por atributos, contenido, visibilidad, etc

manipulacion del dom
http://api.jquery.com/category/manipulation/
al costado derecho tiene subcategorias para ver métodos de inserción, remover, atributos, dimesióm, etc

entonces si con javascript seleccionas los divs que tienen clase "x" te vas a ver las formas para seleccionar elementos que tiene jquery y lo reemplazas, si con esos elementos seleccionados queres cambiarle el fondo buscás en los métodos de manipulación que hay para css, o si querés borrarlos buscas que métodos hay para borrar

si querés pasar tus llamadas ajax te vas a la categoría ajax, mirás los métodos que tiene jquery y te fijas los parámetros

[combuilder]

Si, si me he leido documentación.

He visto completo el curso de videotutoriales.com, pero cuando me adentro en los temas de eventos .... menudo follón.

Los ejemplos sencillos son muy intuitivos y prácticos (tb he leido varios capitulos de "jQuery Recipes", un libro con muchos ejemplos simples de jQuery), pero cuando intento "juntar varios .... empiezan a fallarme las cosas y me agobio mogollón ....

Por eso, pido ayuda. Además, casi todo lo que encuentro es de ASP.Net o PHP, cuando yo programo en ASP.

Un saludo.

[Dany_s]

no tiene nada que ver programar en php, jsp, o asp

publicá un pequeño código html y explicá lo que querés lograr

[combuilder]

Empiezo con el código HTML de la entrada.

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>
	<script src="inc/jquery.js" type="text/javascript"></script>
	<script src="inc/jqueryaction.js" type="text/javascript"></script>

    <link href="inc/styles.css" type="text/css" rel="stylesheet">
    <link href="inc/menu.css" type="text/css" rel="stylesheet">
    <link href="inc/tablamaestra.css" type="text/css" rel="stylesheet">
    <link href="inc/login.css" type="text/css" rel="stylesheet">
    
	<title>Acuarelas 2011</title>
	<meta http-equiv="pragma" content="no-cache"><!-- No guarda en cache -->
	<meta http-equiv="expires" content="0">
</head>

<BODY>
<div id="cabecera"></div>

<div id="menuuser"><a href="#" id="askuser">Entrar</a>  <a href="#" id="hideuser">Ocultar</a></div>
<hr>
<div id="menu">

</div>
<hr>

<a name="main"></a>
<div id="main">

</div>

<a name="third"></a>
<div id="third">

</div>

<p><a href="../">Volver a inicio</a></p>
<% if bMySQL then response.write("MySQL") else response.write("Access") %>
<br>


</BODY>
</html>

Voy a ahorrarme exponer los códigos CSS, salvo que alguien me los solicite expresamente.

La función jQuery que me interesa está en el archivo jqueryaction.js, que acontinuación pongo:

Código HTML:

$(document).ready(function() {

  $('a').addClass('boton');
  $('hr').addClass('lineaverde');
  $('.cabecera').addClass('dBack');
  $('.menu').addClass('tablatitulo');
  $('.tablatitulo').addClass('tablatitulo');

  // Cabecera
  $('#cabecera').load('inc/cabecera.asp');
  
  // Cargo el Menu  
  $('#menu').load('inc/menu.asp');



// Tratamiento del menu  
$("#menu").delegate("td", "click", function(){
        var miurl = this.id;
        // Recorto prefijo "menu" para seleccionar Entidad a mostrar
        miurl = miurl.substring(4);
        toMain(miurl);
    });  

// Muestra Entidad en #main    
function toMain(entidad) {     
    var miurl = entidad + '/listing.asp';
    $.ajax({
    url: miurl ,
    success: function(data) {
    $('#main').html(data);   }
        });
     } ;
    
    }

});

Básicamente, se trat de cargar un fichero que contiene menu.asp, con la siguiente forma:

Código:

<table>
<tr>
	<td id="menuusuarios">Usuarios</td>
	<td id="menuestados">Estados</td>
</tr>
</table>

Todo esto funciona bien, pero ... esto es lo más sencilo: tengo un menú, y según lo que pinche, me carga los datos en una tabla.

NECESITO aprender cuando debo poner el código, y es que tampoco sé como manejarme con todos los objetos, bla bla bla ... de ahí la importacia de un ejemplo completo para facilitar su comprensión.

Si necesitas más ... me lo dices y lo voy colgando ....

[combuilder]

Voy a poner listing.asp.

Para usuarios:

Código:

	<!-- #include file="../inc/vbfunctions.asp" -->

<% On Error Resume Next
Response.Buffer = False
bBotonesDePagina = True <!-- Cuadro de Botones para PAGINAS -->
bWithRefresh = True <!-- Botón de Refrescar ON-OFF -->
varColSpan = 6
iRecPerPage = 10

wAnc = 80

sTabla = "Usuarios"
sCampoID = "idUsuario"
sCampoDesc = "Usuario"
CampoBusqueda2 = ""
totFieldCount = 0
sIdShow = Request(sCampoID)

sSQLOrden = " ORDER BY Usuario ASC"

' SEARCH '
			sWHERE = Request.QueryString("sssUsuario")
			sWHERE5 = sWHERE

			sWHERE2  = Request.QueryString
			if len(sWHERE) > 0 then
				sWHERE2 = "&sssUsuario=" & sWHERE
				sWHERE = " WHERE Usuario LIKE '" & sWHERE & "%'"
			else
				sWHERE2 = ""
			End if

If Request.QueryString("NAV") = "" Then
	intPage = 1
Else
	intPage = Request.QueryString("NAV")
End If

	SqlSelect = "SELECT * from " & sTabla & " " & sWHERE & sSQLOrden

	Set adoConnection = server.CreateObject("ADODB.Connection")
	Set AdoRS = server.CreateObject("ADODB.Recordset")

	adoConnection.Open sCadenaConexion
		if bMySQL then adoConnection.Execute UseDatabase

bAddNewDefault = True
bViewDefault = True
bEditDefault = True
bDeleteDefault = True
%>
<!-- #include file="../inc/permisos.asp" -->
<%

		AdoRS.ActiveConnection = AdoConnection
		AdoRS.CursorLocation = 3
		AdoRS.CursorType = 3
		AdoRS.Open SqlSelect
		AdoRS.PageSize = iRecPerPage
		AdoRS.CacheSize = AdoRS.PageSize
		intPageCount = AdoRS.PageCount
		intRecordCount = AdoRS.RecordCount

If intRecordCount = 0 Then
	sNo = "Sin datos que mostrar!"
else

		If CInt(intPage) > CInt(intPageCount) Then intPage = intPageCount
		If CInt(intPage) <= 0 Then intPage = 1
		AdoRS.AbsolutePage = intPage
		intStart = AdoRS.AbsolutePosition
			If CInt(intPage) = CInt(intPageCount) Then
				intFinish = intRecordCount
				Else
				intFinish = intStart + (AdoRS.PageSize - 1)
			End If
End If %>



		<br>
	   	<table id="tablatitulo">
				<tr>
					<td class="titulo">Los Usuarios</td>
				    <% if bAddNew then %>
					    <td id="addnew">
                        <!-- a href="#second" OnClick="JavaScript:cargaSolapa('second','<%=sTabla%>/add.asp?<%=sVED%>')">Nuevo Usuario</a -->Nuevo User</td>
				    <% End if %>
				    <%if bWithRefresh Then %>
					    <td id="refrescar"><center><a href="#main" OnClick="JavaScript:cargaSolapa('main','<%=sTabla%>/listing.asp?<%=sVED%>')">Refrescar</a></center></td>
				    <% End if %>
			  	</tr>
	    </table>
<br>

<hr>

<table id="tablamaestra">
<thead>
	      <tr>

			  <td>Admin</td>

			  <td>Escritura</td>

			  <td>Usuario</td>


	        <% If bView then %>
            <td width="<%=wAnc%>">Ver</td>
	        <% End if
	        If bEdit then %>
	        <td width="<%=wAnc%>"><div align="center">Editar</div></td>
	        <% End if
	        If bDelete then %>
	        <td width="<%=wAnc%>">Eliminar</td>
	        <% End if %>
          </tr>
</thead>
<tbody>
          <% if len(sNo) > 0 then %>
          <tr>
            <td colspan="<%=varColSpan%>"><i>
              <% response.write sNo %>
            </i></td>
          </tr>
          <%else %>
          <%bColor = sColor1
			  For intRecord = 1 To AdoRS.PageSize%>
          <%
    sidUsuario = kEB
    If AdoRS("idUsuario") <> "" Then sidUsuario = RemoveAcute(AdoRS("idUsuario"))


         if AdoRS.Fields("esadmin") = -1 then
               sesadmin = "Si"
               else
               sesadmin = "No"
         end if
      
         if AdoRS.Fields("escritura") = -1 then
               sescritura = "Si"
               else
               sescritura = "No"
         end if
      
    susuario = kEB
    If AdoRS("usuario") <> "" Then susuario = RemoveAcute(AdoRS("usuario"))

%>

          <tr>
            <% vidUsuario = AdoRS("idUsuario").Value %>
			            <!-- Texto para campos Boleanos -->
		            <!-- %If AdoRS("camposino") then %>
							SI - <img src="../res/si.gif">
							< else >
							NO - <img src="../res/no.gif">
					< End if % -->


			    <td><%=sEsAdmin%></td>

			    <td><%=sEscritura%></td>

			    <td><%=sUsuario%></td>


            <% If bView then %>
            <td>
            <a href="#second" OnClick="JavaScript:cargaSolapa('second','<%=sTabla%>/view.asp?<%=sCampoID%>=<%=sidUsuario%>&<%=sVED%>')">
            	<img src="inc/view.gif" alt="Ver" width="17"></a></td>
            <% End if
	        If bEdit then %>
            <td>
            <a href="#second" OnClick="JavaScript:cargaSolapa('second','<%=sTabla%>/update.asp?<%=sCampoID%>=<%=sidUsuario%>&<%=sVED%>')">
            	<img src="inc/update.gif" alt="Actualizar"></a></td>
			<% End if
	        If bDelete then %>
            <td>
            	<a href="#second" OnClick="JavaScript:cargaSolapa('second','<%=sTabla%>/delete.asp?<%=sCampoID%>=<%=sidUsuario%>&<%=sVED%>')">
            		<img src="inc/delete.gif" alt="Borrar"></a></td>
            <% End if
             AdoRS.MoveNext

				If AdoRS.EOF Then Exit For
			Next%>
          </tr>
          <% end if %>
</tbody>


<tfoot>
	<!-- Parte final de la TablaMaestra -->
</tfoot>
        </table>

	    <% AdoRS.Close
				Set AdoRS = Nothing
				adoConnection.Close
				Set adoConnection = Nothing %>
      <br></td>
</tr>

<tr>
	  <td>
<% If bBotonesDePagina Then %>
<form method="GET" action="JavaScript:cargaSolapaPag('main','<%=sTabla%>/listing.asp?<%=TempString%><%=sWHERE2%>&<%=sVED%>')">
		<center>
				<%if intRecordCount > 0 then
					TempString = "b1=Submit"
					If CInt(intPage) = 1 Then 	%>
							<img src="inc/prev_off.gif" width="25">
					<%else %>
							<a href="#main" OnClick="JavaScript:cargaSolapa('main','<%=sTabla%>/listing.asp?<%=TempString%>&NAV=1<%=sWHERE2%>&<%=sVED%>')">
							<img src="inc/prev_on.gif" width="25"></a>
					<% End if

					If CInt(intPage) > 1 Then%>

						<a href="#main" OnClick="JavaScript:cargaSolapa('main','<%=sTabla%>/listing.asp?<%=TempString%>&NAV=<%=intPage - 1%><%=sWHERE2%>&<%=sVED%>')">
							<img src="inc/prev_on.gif" width="25"></a>
						<%else %>
						<img src="inc/prev_off.gif" width="25">
					<%End If

		Response.Write "Registros " & intStart & " a " & intFinish & " de " & intRecordCount %>

		- Ir a P&aacute;gina <input type="text" id="spage" name="spage" size="3" value="<%=intPage%>">

		<%If CInt(intPage) < CInt(intPageCount) Then%>
								<a href="#main" OnClick="JavaScript:cargaSolapa('main','<%=sTabla%>/listing.asp?<%=TempString%>&NAV=<%=intPage + 1%><%=sWHERE2%>&<%=sVED%>')">
									<img src="inc/post_on.gif" width="25"></a>
							<%else %>
								<img src="inc/post_off.gif" width="25">
							<% End If
							If CInt(intPage) = intPageCount Then %>
								<img src="inc/post_off.gif" width="25">
							<%else %>
							<a href="#main" OnClick="JavaScript:cargaSolapa('main','<%=sTabla%>/listing.asp?<%=TempString%>&NAV=<%=intPageCount%><%=sWHERE2%>&<%=sVED%>')">
									<img src="inc/post_on.gif" width="25"></a>
					<% End if

				End if%>
</center>
</form>

<% End if %>
	  </td>

	</tr>


<div id="second">
	<!-- #include file="../inc/listingerror.asp" -->

<%	if sIdShow > 0 then %>
	<!-- #include file="../Usuarios/view.asp" -->
<% End if %>

</div>

[Dany_s]

todo esto no es necesario que lo manejes con jquery

Código Javascript:

$('a').addClass('boton');
  $('hr').addClass('lineaverde');
  $('.cabecera').addClass('dBack');
  $('.menu').addClass('tablatitulo');
  $('.tablatitulo').addClass('tablatitulo');
 

ponelo en las etiquetas y listo

estas llamas no lo veo necesario

Código Javascript:

// Cabecera
  $('#cabecera').load('inc/cabecera.asp');
  
  // Cargo el Menu  
  $('#menu').load('inc/menu.asp');
 

agrega los contenidos en el html y listo, no veo ventajas de cargar con ajax

y en cuanto a lo otro no entendi lo de "aprender cuando debo poner el código"

[combuilder]

Iniciado por Dany_s

estas llamas no lo veo necesario

Código Javascript:

// Cabecera
  $('#cabecera').load('inc/cabecera.asp');
  
  // Cargo el Menu  
  $('#menu').load('inc/menu.asp');
 

agrega los contenidos en el html y listo, no veo ventajas de cargar con ajax

Se trata de poder "variar" el menu, en función del tipo de usuario que accede a la aplicación. De ahí que cargue el contenido con AJAX.

Quizás no sea necesaria algunas cosas de jQuery tal y como las hago, pero a largo plazo me facilitan las cosas.

[combuilder]

Iniciado por marlanga

Código:

function cargaestados(selectDestino, aspDestino){
	var vv1 = $('#estado_e').html(); //$('#estado_e').val() si es un input/select/textarea
	var vv2 = $('#icono_e').html();
	var vlink = "../estados/listing.asp";
	var link=$('#link');
	if (link.length>0 && jQuery.trim(link.html())!="") {
		vlink = link.html();
	} 
	$.ajax(function(){
		url: aspDestino,
		data: 'estado_e='+vv1+'&icono_e='+vv2+'&link='+vlink,
		success: function(respuesta){
			$('#'+selectDestino).html(respuesta);
		}
	});
}

Vuelvo a subir el tema.

Estoy probando esta función, y me da error en data

Código:

        	$.ajax(function(){
		url: aspDestino,
		data: 'serie='+vv1+'&link='+vlink,
		success: function(respuesta){
			$('#'+selectDestino).html(respuesta);
		}

Me dice que falta ";"

¿no lo entiendo el porque falla!????