ajax

Responder
Avatar de Usuario
Marcelo Roggeri
Mensajes: 5
Registered for: 3 years 1 month
Argentina

ajax

Mensaje por Marcelo Roggeri »

Hola buenas tardes,
Estoy queriendo traer de una funcion que esta en un prg un dato en particular

Código: Seleccionar todo

<select name="articulo" id="articulo" onchange="val()">

Código: Seleccionar todo

function val() {
	cNombreArticulo = document.getElementById("articulo").value;
	alert(cNombreArticulo);		

	$.ajax({
		async: true,
		data: cNombreArticulo,
		url: "funciones.prg",
		method: "post",
		success: function buscarArticulo(data) {
			alert(data);
		},
		error: alert("problemas")
	});			
}
Tengo el archivo de funciones.prg en donde hay varias function
por ejemplo esta

Código: Seleccionar todo

Function Opendata()
...
Return Nil

Function buscarArticulo()
	local hParam
	// Recuperar los parametros-------------------------------
	hParam := ap_PostPairs()
	? "hParam", hParam

Return {123456,"nombre del articulo"}

Algo estoy haciendo mal, me podrian indicar si alguien ve el error por favor
Muchas Gracias
Marcelo
.::Marcelo Roggeri::.

Avatar de Usuario
Marcelo Roggeri
Mensajes: 5
Registered for: 3 years 1 month
Argentina

Mensaje por Marcelo Roggeri »

Código: Seleccionar todo

	BLOCKS TO cHtml
		<!DOCTYPE html>
		<html>
		<meta name="viewport" content="width=device-width, initial-scale=1">  
		<meta charset="UTF-8">
		<title>Pedidos</title>	
		<body>
			<h1>Pedidos</h1>

			<form action="order.prg" method="POST">
				<label for="articulo">Seleccione un articulo:</label>
				<select name="articulo" id="articulo" onchange="selectArticulo()">
	ENDTEXT
	
	WHILE (cAlias)->(!Eof())
		cHtml += '<option value="'+(cAlias)->nombre+'">'+(cAlias)->nombre+'</option>'
		(cAlias)->(DbSkip())
	END
	
	BLOCKS TO cHtml
				</select>
				<br>
				Cantidad: <input name="cantidad" value="1">
				<br>
	ENDTEXT				

	
	cHtml += 'Precio Unitario: <input name="pu" value="'+str(nPU,12,2)+'">'
	cHtml += '<br>'
	cHtml += 'Importe Item: <input name="importe" value="'+str(nImpIte,12,2)+'">'
	
	BLOCKS TO cHtml
				<br><br>
				<input type="submit" value="Enviar Pedido">
			</form>

		<script src="jquery-3.6.0.min.js"></script>
		<script>
			function selectArticulo() {
				cNombreArticulo = document.getElementById("articulo").value;
				alert(cNombreArticulo);		
				$.ajax({
				   url: 'funciones.prg',
				   type: 'POST',
				   data: {nameProd:cNombreArticulo}
				})
				.done(function (response) {
				   console.log("success");
				   console.log(response);
				})
				.fail(function () {
					console.log("error");
				})
				.always(function () {
					  console.log("complete");
				 });
			}
			
		</script>			
			
		</body>
		</html>	

	ENDTEXT

	?? cHtml
funciones.prg

Código: Seleccionar todo

//--------------------------------------------------------------------------------
//
//--------------------------------------------------------------------------------
Function buscarArticulo()
	local aH := {=>}	
    local hParam

	// Recuperar los parametros-------------------------------
	hParam := ap_PostPairs()

	? "hParam", hParam
	
	// ERROR NO ME TRAE LOS PARAMETROS
	
	aH[ 'id' ] = 152
	aH[ 'nombre' ] = "nombre del producto"  //hParam['nameProd']
	
	AP_SetContentType( "application/json" )
	
	?? hb_jsonEncode( aH )
	
Return nil
.::Marcelo Roggeri::.

Avatar de Usuario
charly
Mensajes: 145
Registered for: 3 years 5 months

Mensaje por charly »

Marcelo,

Este code q has puesto habria de funcionar, al final lo conseguiste ! :-)

De todas maneras esta reflexion, a la que muchos llegamos en su dia, es quizas la que te gustaria resolver
si funciones anonimas pero yo tengo una function en un prg va tengo varias funciones

quiero llamar a una en particular

bueno estoy un poco mareado me voy a preparar el mate
Cuando ejecutas el prg hay un punto de entrada, una funcion que es la primera que se ejecuta. Es alli donde debes obtener un parametro que has enviado tambien junto a los demas, de lo que quieres hacer, porque evidentemente el prg no lo sabe. Sigue el parametro "action"

Código: Seleccionar todo

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Test ajax</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<button onclick="test1()">Test 1</button>
	<button onclick="test2()">Test 2</button>
</body>

<script>

	function test1(){

		var oPar = new Object()
			oPar[ 'action' ] = 'test1'
			oPar[ 'name' ] = 'Marcelo'
			oPar[ 'age' ] = 18
		
		Send( oPar )				
	}
	
	function test2(){

		var oPar = new Object()
			oPar[ 'action' ] = 'test2'
			oPar[ 'city' ] = 'New York'			
		
		Send( oPar )		
	}

	function Send( oParam ) {
	
		$.ajax({
		   url: 'funciones.prg',
		   type: 'POST',
		   data: oParam
		})
		.done(function (response) {
		   console.log("success", respsonse);		   
		})
		.fail(function () {
			console.log("error");
		})
		.always(function () {
			  console.log("complete");
		 });		
	}		

</script>
Y la parte que "escucha":

Código: Seleccionar todo

function main()

	local hParam := ap_PostPairs()
	
	AP_SetContentType( "application/json" )
	
	do case
		case hParam[ 'action' ] == 'test1' ; MyTest1( hParam )
		case hParam[ 'action' ] == 'test2' ; MyTest2( hParam )
		otherwise			
	
			?? hb_jsonEncode( { 'error' => 'Accion no permitida' } )
	endcase
	
retu nil 

function MyTest1( hParam )
	
	?? hb_jsonEncode( hParam )
	
retu nil 

function MyTest2( hParam )	
	
	?? hb_jsonEncode( hParam )
	
retu nil 
Simplemente lo que hace es devolver lo que recibe. Lo importante de entender es que puedes redirijir a la funcion que tu quieras. Eso se lo indicaras con el parametro "action" que habras rellenado antes de hacer la peticion.

A ver si te sirve... ;-)

C.
Salutacions, saludos, regards.
Charly

"...programar es fácil, hacer programas es difícil..."

https://httpd2.blogspot.com/
https://forum.modharbour.app

Avatar de Usuario
Marcelo Roggeri
Mensajes: 5
Registered for: 3 years 1 month
Argentina

Mensaje por Marcelo Roggeri »

Buenas tardes, ya estoy dando los primeros pasos con el mod-harbour-v2
Les comento que la idea es hacer una app de pedidos para una distribuidora de helados, cuyos vendedores van a levantar el pedido de los clientes a través del celular.
En base v2.order "Charly" , me abrió el panorama para empezar, agregando funcionalidades como por ejemplo seleccionar el cliente al levantar la orden.
Voy compartiendo código para quien aun no empezó, se anime
Formulario de ingreso

Código: Seleccionar todo

Function main()
	Local cHtml := ''
	local cUrl := mh_GetUri()
	
	// Autenticar inicio-------------------------------
	if !mh_SessionActive()
		mh_Redirect( cUrl + 'login.prg' )
		return nil
	endif
	mh_SessionInit() // Activamos la sesion
	// Autenticar fin----------------------------------
	
	
	// Abrir tabla de Articulos------------------------
	cAlias := OpenDataArticulo()
	//? cAlias  // Si muestra el alias es xq salio todo bien
	if empty( cAlias )
		? 'Error al abrir la tabla'
		Return nil
	endif	
	
	BLOCKS TO cHtml
		<!DOCTYPE html>
		<html>
		<head>
			<meta name="viewport" content="width=device-width, initial-scale=1">  
			<meta charset="UTF-8">
			<title>Pedidos</title>	
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
			<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
		</head>
		<body>
			<h1>Pedidos</h1>

			<form action="order.prg" method="POST">
				<label for="articulo">Seleccione un articulo:</label>
				<select name="articulo" id="articulo" onchange="selArt()">
	ENDTEXT
	
	WHILE (cAlias)->(!Eof())
		cHtml += '<option value="'+(cAlias)->nombre+'">'+(cAlias)->nombre+'</option>'
		(cAlias)->(DbSkip())
	END
	
	BLOCKS TO cHtml
				</select>
				<br>
				Cantidad: <input name="cantidad" value="1" id="cantidad">
				<br>
	ENDTEXT				

	
	cHtml += 'Precio Unitario: <input name="pu" id="pu" readonly>'
	cHtml += '<br>'
	cHtml += 'Importe Neto: <input name="importeNeto" id="importeNeto" readonly>'
	cHtml += '<br>'
	cHtml += 'Tasa Iva: <input name="tasaIva" id="tasaIva" readonly>'
	cHtml += '<br>'
	cHtml += 'Importe Iva: <input name="importeIva" id="importeIva" readonly>'
	cHtml += '<br>'
	cHtml += 'Importe Final: <input name="importeFinal" id="importeFinal" readonly>'	
	
	BLOCKS TO cHtml
				<br><br>
				<input type="submit" value="Enviar Pedido">
			</form>

			<script>
				function selArt() {
					cNombreArticulo = document.getElementById("articulo").value;
					//alert("Articulo: " + cNombreArticulo);
					var oParam = new Object()
					oParam[ 'action' ] = 'buscarArticulo'
					oParam[ 'nameProd' ] = cNombreArticulo
					$.ajax({
					   url: 'articulos.prg',
					   method: 'POST',
					   data: oParam
					})
					.done(function (response) {
					   console.log("success");
					   console.log(response);
					   $("#pu").val(response['puNeto']);
					   $("#importeNeto").val(response['puNeto']);
					   $("#tasaIva").val(numeral(response['tasaIva']).format('0.00'));
					   calculoPrecioItem();
					})
					.fail(function () {
						console.log("error");
					})
					.always(function () {
						  console.log("complete");
					 });					
				}
				function calculoPrecioItem(){
					var cantidad  = parseFloat($("#cantidad").val());
					var price     = parseFloat($("#pu").val());
					var resultado = cantidad*price;
					var tasaIva   = parseFloat($("#tasaIva").val());
					var impIva    = resultado*tasaIva/100;
					var impFinal  = resultado+impIva;
					
					$("#pu").val(numeral(price).format('0,0.00'));
					$("#importeNeto").val(numeral(resultado).format('0,0.00'));
					$("#importeIva").val(numeral(impIva).format('0,0.00'));
					$("#importeFinal").val(numeral(impFinal).format('0,0.00'));
				}				

				//--------------------------------------------------
				$(document).ready(function() {
					$("#cantidad").change(function(){
						calculoPrecioItem();
					});
				});
				//--------------------------------------------------
				
			</script>			
		</body>
		</html>	

	ENDTEXT

	?? cHtml

Return nil



{% mh_LoadFile('funciones.prg') %}
El siguiente codigo es el articulo.prg que escucha la llamada de axaj
Obs.: Este archivo debe tener la funcion de escucha arriba de todo y luego las otras funciones

Código: Seleccionar todo

//--------------------------------------------------------------------------------
//
//--------------------------------------------------------------------------------
Function mainArticulo()
    local hParam := ap_PostPairs()
	
	AP_SetContentType( "application/json" )	

	do case
		case hParam[ 'action' ] == 'buscarArticulo' ; buscarArticulo( hParam )
		case hParam[ 'action' ] == 'agregarArticulo' ; agregarArticulo( hParam )
		otherwise	
			?? hb_jsonEncode( { 'error' => 'Accion no permitida' } )
	endcase
	
Return nil

//--------------------------------------------------------------------------------
//
//--------------------------------------------------------------------------------
Function buscarArticulo(hParam)
	local cPath := hb_GetEnv('PRGPATH')
	local id, publico
	USE ( cPath + '/Articulo.dbf' ) SHARED NEW
	LOCATE FOR Articulo->nombre==hParam['nameProd']
	IF FOUND()
		     id=Articulo->id
		puNeto=Str(Articulo->neto)
		tasaIva=Str(Articulo->tasa_iva)
	ENDIF

	?? hb_jsonEncode( { 'id' => id,'puNeto' => puNeto, 'tasaIva' => tasaIva } )
	
Return nil

//--------------------------------------------------------------------------------
//
//--------------------------------------------------------------------------------
Function agregarArticulo(hParam)

	?? hb_jsonEncode( hParam )

Return nil
Archivo prg para guardar la entrada de datos

Código: Seleccionar todo

function main()
	local hParam
	local cUrl := mh_GetUri()
	LOCAL cHtml:= ''
	
	// Autenticar inicio--------------------------------------
	if !mh_SessionActive()
		mh_Redirect( cUrl + 'login.prg' )
		return nil
	endif
	mh_SessionInit() // Activamos la sesion
	// Autenticar fin-----------------------------------------
	
	
	
	// Recuperar los parametros-------------------------------
	hParam := ap_PostPairs()
	? hParam
	
	cUser := mh_Session('username')	

	
	// Abrir la base de datos---------------------------------
	cAlias := OpenData()
	if empty( cAlias )
		? 'Error al abrir la tabla'
		Return nil
	endif	

	
	// Grabar los datos---------------------------------------
	if ( cAlias )->( DbAppend())
		( cAlias )->date     := DATE()
		( cAlias )->time     := TIME()
		( cAlias )->user     := cUser
		( cAlias )->ip       := ap_GetEnv('REMOTE_ADDR')
		( cAlias )->articulo := hParam['articulo']
		( cAlias )->cantidad := VAL(hParam['cantidad'])
		( cAlias )->pu       := VAL(hParam['pu'])
		( cAlias )->neto     := VAL(hParam['importeNeto'])
		( cAlias )->tasaiva  := VAL(hParam['tasaIva'])
		( cAlias )->impiva   := VAL(hParam['importeIva'])
		( cAlias )->impfinal := VAL(hParam['importeFinal'])

		( cAlias )->( DbCommit() )
		( cAlias )->( DbUnlock() )
				
	endif	
	
	// Mostrar mensaje
	BLOCKS TO cHtml
		<!DOCTYPE html>
		<html>
		<meta name="viewport" content="width=device-width, initial-scale=1">  
		<meta charset="UTF-8">
		<title>Pedido Realizado</title>	
		<body>
			<h1>Pedido Realizado</h1>
			<table border="1">
				<tr>
					<th>Usuario</th>
					<th>Fecha</th>
					<th>Hora</th>
					<th>IP</th>
					<th>Artículo</th>
					<th>Cantidad</th>
					<th>P.U.</th>
					<th>Neto</th>
					<th>Tasa Iva</th>
					<th>Imp.Iva</th>
					<th>Imp.Final</th>
				</tr>
	ENDTEXT
	
	cHtml += '<tr>'
	cHtml += '<td>' + (cAlias)->user + '</td>'
	cHtml += '<td>' + DTOC( (cAlias)->date) + '</td>'
	cHtml += '<td>' + (cAlias)->time + '</td>'
	cHtml += '<td>' + (cAlias)->ip + '</td>'
	cHtml += '<td>' + (cAlias)->articulo + '</td>'
	cHtml += '<td>' + str((cAlias)->cantidad) + '</td>'
	cHtml += '<td>' + str((cAlias)->pu) + '</td>'
	cHtml += '<td>' + str((cAlias)->neto) + '</td>'
	cHtml += '<td>' + str((cAlias)->tasaIva) + '</td>'
	cHtml += '<td>' + str((cAlias)->impIva) + '</td>'
	cHtml += '<td>' + str((cAlias)->impFinal) + '</td>'
	cHtml += '</tr>'
	

	BLOCKS TO cHtml PARAMS cUrl
			</table>
			<br>
			<a href="{{ cUrl + 'entry.prg' }}"><button>Generar Pedido</button></a>
			<a href="{{ cUrl + 'menu.prg' }}"><button>Menu</button></a>
			<a href="{{ cUrl + 'cerrar.prg' }}"><button>Cerrar Sesión</button></a>
		</body>
		</html>	
	ENDTEXT
	
	// Cerrar la base de datos
	
	
	// Generar la salida
	?? cHtml
	
Return nil

{% mh_LoadFile('funciones.prg') %}
Todo esto es similar casi igual a lo que hizo Chaly en su presentación del viernes pasado.
Puedes probarlo en App Pedidos
Marcelo
.::Marcelo Roggeri::.

Avatar de Usuario
charly
Mensajes: 145
Registered for: 3 years 5 months

Mensaje por charly »

Marcelo,

Muy bien, quien no prueba, no se equivoca :D . Paso a paso sin miedo...

El password es 1234 he visto

C.
Salutacions, saludos, regards.
Charly

"...programar es fácil, hacer programas es difícil..."

https://httpd2.blogspot.com/
https://forum.modharbour.app

Avatar de Usuario
Marcelo Roggeri
Mensajes: 5
Registered for: 3 years 1 month
Argentina

Mensaje por Marcelo Roggeri »

Adjunto el ejemplo de Ajax tan bien explicado por el amigo Charly
index.prg

Código: Seleccionar todo

Function main()
	Local cHtml := ''

	BLOCKS TO cHtml
		<!DOCTYPE html>
		<html lang="en">
		<head>
			<title>Test ajax</title>
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		</head>
		<body>
			<button onclick="test1()">Test 1</button>
			<button onclick="test2()">Test 2</button>
		</body>

		<script>

			function test1(){

				var oPar = new Object()
					oPar[ 'action' ] = 'test1'
					oPar[ 'name' ] = 'Marcelo'
					oPar[ 'age' ] = 18
				
				Send( oPar )				
			}
			
			function test2(){

				var oPar = new Object()
					oPar[ 'action' ] = 'test2'
					oPar[ 'city' ] = 'New York'			
				
				Send( oPar )		
			}

			function Send( oParam ) {
			
				$.ajax({
				   url: 'escucha.prg',
				   type: 'POST',
				   data: oParam
				})
				.done(function (response) {
				   console.log("success", response);		   
				})
				.fail(function () {
					console.log("error");
				})
				.always(function () {
					  console.log("complete");
				 });		
			}		

		</script>

		</html>
	ENDTEXT

	?? cHtml

Return nil
escucha.prg

Código: Seleccionar todo

function main()

	local hParam := ap_PostPairs()
	
	AP_SetContentType( "application/json" )
	
	do case
		case hParam[ 'action' ] == 'test1' ; MyTest1( hParam )
		case hParam[ 'action' ] == 'test2' ; MyTest2( hParam )
		otherwise			
	
			?? hb_jsonEncode( { 'error' => 'Accion no permitida' } )
	endcase
	
retu nil 

function MyTest1( hParam )
	
	?? hb_jsonEncode( hParam )
	
retu nil 

function MyTest2( hParam )	
	
	?? hb_jsonEncode( hParam )
	
retu nil 
Saludos
.::Marcelo Roggeri::.

Responder