Incluir funcionalidad Javascript

Acceder Darse de alta He olvidado la contraseña

Topic Resolution: Resolved

Este debate tiene 13 respuestas, 2 mensajes y ha sido actualizado por última vez el 3 años, 7 meses por Alfredo Sanz. This post has been viewed 614 times

Mostrando 9 respuestas a los debates

Autor

Entradas

16-09-2020 a las 17:14 #701
quim
Participante
Buenas tardes

Vamos avanzando a buen ritmo ... Estoy intentando esta funcionalidad

Los botones + / - me gustaria que incrementaran / decrementaran el campo cantidad. Son del tipo 'readonly' para que en dispositivos móviles no salga el teclado que ocupa media pantalla. Así de forma táctil, aumenta o disminuye la cantidad

El caso es que no sé como hacer que los botones no ejecuten ninguna accion del CGI si no que llamen a alguna funcion Javascript inyectada previamente, alguna idea ?

Por otra parte, indicar que a falta de documentación de wImage, se puede hacer un zoom a una imagen muy facilmente, añadiendo en la definicion :

WITH OBJECT WImage():New(:WO) :aScript := {"$('#image').addClass('materialboxed').materialbox();"}

1
2
3
4

WITH OBJECT WImage():New(:WO)

:aScript := {"$('#image').addClass('materialboxed').materialbox();"}

Nota para @xhermita

En wImage no ha funcionado ni cScript ni cOnChange, estas variables no existen en la clase

Saludos
- Este debate fue modificado 3 años, 7 meses por quim.
16-09-2020 a las 19:25 #703

Alfredo Sanz
Superadministrador

Alucinante!!

El cOnClick, si empieza con el símbolo # te permite ejecutar directamente javascript en lugar de llamar al cgi.

:cOnClick := "#alert('Néfele')"

El materialboxes no lo conocía. lo incorporaré como una opción a WImage. Ya he añadido una opción para que cambie la imagen cuando ponemos el cursor sobre ella.

Tenemos ya nefelizado el facybox ( https://fractality.ddns.net:44444/xacgi?flex ) pero el que indicas es realmente sencillo
- 17-09-2020 a las 09:01 #706
  
  quim
  Participante
  
  Buenos dias
  
  Perfecto poder ejecutar via # javascript, una muy buena idea 😎
  
  Genial también la galería facybox, entiendo que es complementario con el componente materializecss materialbox() ya que el primero nos sirve para una presentación rápida de varias fotos y el segundo, para un zoom en una imagen, fuera de facybox
  
  Saludos y gracias por las respuestas 😉
- 17-09-2020 a las 11:28 #708
  
  quim
  Participante
  
  Buenos dias
  
  Sólo comentar que la llamada a javascript funciona tanto precediendo con @ como con #
  
  Va a seguir así o se suprimirá alguna de sus formas ?
  
  Saludos
17-09-2020 a las 12:14 #711

Alfredo Sanz
Superadministrador

De momento va a seguir así, pero seguramente el @ terminará desapareciendo

18-09-2020 a las 11:21 #718

quim

Participante

Buenos dias

Siguiendo con la funcionalidad anterior, intento dotar de funcionalidad via Nefele los botones.

Dado el siguiente código

static function Js_SwitchBtn()

local cScript

TEXT INTO cScript
function SwitchBtn(n) {

if(n > 0){
alert('incrementar')
} else {
alert('decrementar')
}
return false;
}
ENDTEXT

return { cScript }

//--------------------------------------------------

PROCEDURE CreateTable( oParent )

local cGet := '<input style="border: none; text-align: center;" readonly="readonly" type="text" value="2" />'
local cBtn1 := '<button class="btn-floating btn-small waves-effect waves-light green"><i class="material-icons">add</i></button>'
local cBtn2 := '<button class="btn-floating btn-small waves-effect waves-light red"><i class="material-icons">remove</i></button>'

local aItems:= { ;
{"S",23.85,cGet,cBtn1,cBtn2},;
{"M",23.85,cGet,cBtn1,cBtn2},;
{"L",23.85,cGet,cBtn1,cBtn2},;
{"XL",23.85,cGet,cBtn1,cBtn2},;
{"2XL",25.25,cGet,cBtn1,cBtn2}, ;
{"3XL",25.25,cGet,cBtn1,cBtn2}, ;
{"4XL",26.70,cGet,cBtn1,cBtn2} ;
}

WITH OBJECT WArrayBrowse():New( oParent )
// Cargar el script
:aScript := Js_SwitchBtn()

// definir columnas
...

// Definir columnas con boton
WITH OBJECT :AddCol("") AS WItemColBrowse
:cAlign := xc_Center
:cOnClick := "#SwitchBtn(1)"
END

WITH OBJECT :AddCol("") AS WItemColBrowse
:cAlign := xc_Center
:cOnClick := "#SwitchBtn(0)"
END

static function Js_SwitchBtn()

local cScript

TEXT INTO cScript

function SwitchBtn(n) {

if(n > 0){

alert('incrementar')

} else {

alert('decrementar')

}

return false;

}

ENDTEXT

return { cScript }

//--------------------------------------------------

PROCEDURE CreateTable( oParent )

local cGet := '<input style="border: none; text-align: center;" readonly="readonly" type="text" value="2" />'

local cBtn1 := '<button class="btn-floating btn-small waves-effect waves-light green"><i class="material-icons">add</i></button>'

local cBtn2 := '<button class="btn-floating btn-small waves-effect waves-light red"><i class="material-icons">remove</i></button>'

local aItems:= { ;

{"S",23.85,cGet,cBtn1,cBtn2},;

{"M",23.85,cGet,cBtn1,cBtn2},;

{"L",23.85,cGet,cBtn1,cBtn2},;

{"XL",23.85,cGet,cBtn1,cBtn2},;

{"2XL",25.25,cGet,cBtn1,cBtn2}, ;

{"3XL",25.25,cGet,cBtn1,cBtn2}, ;

{"4XL",26.70,cGet,cBtn1,cBtn2} ;

}

WITH OBJECT WArrayBrowse():New( oParent )

// Cargar el script

:aScript := Js_SwitchBtn()

// definir columnas

...

// Definir columnas con boton

WITH OBJECT :AddCol("") AS WItemColBrowse

:cAlign := xc_Center

:cOnClick := "#SwitchBtn(1)"

END

WITH OBJECT :AddCol("") AS WItemColBrowse

:cAlign := xc_Center

:cOnClick := "#SwitchBtn(0)"

END

Al hacer click en el botón + o en el botón - se lanza correctamente la llamada a SwitchBtn definida en el script, pero no sé cómo detener la propagación del evento, ya que sigue con la llamada al CGI, según muestra la cónsola

pedido

Alguna idea ?

Saludos

18-09-2020 a las 13:26 #719

quim

Participante

Buenos dias

Ya he conseguido la funcionalidad deseada, no sé si seria posible 'nefelizar', de momento funciona y sigo adelante 😉


static function Js_SwitchBtn()

local cScript

TEXT INTO cScript
// Boton +
$('.t-add').click(function(e){
  var item=$('#'+e.target.dataset.talla);
  var num=parseInt(item[0].value);
  num++;
  item.val(num);
  e.preventDefault();
});
// Boton -
$('.t-remove').click(function(e){
  var item=$('#'+e.target.dataset.talla);
  var num=parseInt(item[0].value);
  if (num>0) num--;
  item.val(num);
  e.preventDefault();
});
ENDTEXT

return { cScript }

//------------------------------------------------------------------------------

PROCEDURE CreateTable( oParent )

local n
local cGet, cBtn
local aItems := {}
local aData := { ;
{"S",23.85,2},;
{"M",23.85,3},;
{"L",23.85,1},;
{"XL",23.85,5},;
{"2XL",25.25,3}, ;
{"3XL",25.25,1}, ;
{"4XL",26.70,2} ;
}

for n:=1 to len(aData)
  cGet := '<input type="text" id="T'+LTrim(Str(n))+'" value="'+LTrim(Str(aData[n,3]))+'" readonly style="border: none;text-align: center;">'
  aData[n,3] := cGet
  cBtn := '<a class="t-add btn-floating btn-small waves-effect waves-light green">'
  cBtn += '<i class="material-icons" title="incrementa" data-talla="T'+LTrim(Str(n))+'">add</i></a>' 
  AAdd(aData[n], cBtn )
  cBtn := '<a class="t-remove btn-floating btn-small waves-effect waves-light red">'
  cBtn += '<i class="material-icons" title="decrementa" data-talla="T'+LTrim(Str(n))+'">remove</i></a>'
  AAdd(aData[n], cBtn )
  AAdd(aItems, aData[n] )
next

static function Js_SwitchBtn()

local cScript

TEXT INTO cScript

// Boton +

$('.t-add').click(function(e){

var item=$('#'+e.target.dataset.talla);

var num=parseInt(item[0].value);

num++;

item.val(num);

e.preventDefault();

});

// Boton -

$('.t-remove').click(function(e){

var item=$('#'+e.target.dataset.talla);

var num=parseInt(item[0].value);

if (num>0) num--;

item.val(num);

e.preventDefault();

});

ENDTEXT

return { cScript }

//------------------------------------------------------------------------------

PROCEDURE CreateTable( oParent )

local n

local cGet, cBtn

local aItems := {}

local aData := { ;

{"S",23.85,2},;

{"M",23.85,3},;

{"L",23.85,1},;

{"XL",23.85,5},;

{"2XL",25.25,3}, ;

{"3XL",25.25,1}, ;

{"4XL",26.70,2} ;

}

for n:=1 to len(aData)

cGet := '<input type="text" id="T'+LTrim(Str(n))+'" value="'+LTrim(Str(aData[n,3]))+'" readonly style="border: none;text-align: center;">'

aData[n,3] := cGet

cBtn := '<a class="t-add btn-floating btn-small waves-effect waves-light green">'

cBtn += '<i class="material-icons" title="incrementa" data-talla="T'+LTrim(Str(n))+'">add</i></a>'

AAdd(aData[n], cBtn )

cBtn := '<a class="t-remove btn-floating btn-small waves-effect waves-light red">'

cBtn += '<i class="material-icons" title="decrementa" data-talla="T'+LTrim(Str(n))+'">remove</i></a>'

AAdd(aData[n], cBtn )

AAdd(aItems, aData[n] )

18-09-2020 a las 13:32 #722

Alfredo Sanz
Superadministrador

Vaya,

Enséñame la parte del código html donde hace el onClick a la función

Néfele ya pone el stopPropagation ( o debería)
18-09-2020 a las 13:59 #725

Alfredo Sanz
Superadministrador

Si no te aparece, el onclick como a mí dímelo para revisarlo

Puedes ponerlo tú directamente en el onclick

:cOnClick := "#event.stopPropagation();Sumar(1)"
- 18-09-2020 a las 15:35 #729
  
  quim
  Participante
  
  Sí que sale
18-09-2020 a las 15:36 #730

quim
Participante

Pero el evento sigue hasta la llamada de Ajax

PD. No me deja publicar mensajes con + de 1 imagen 😉
19-09-2020 a las 13:15 #733
Alfredo Sanz
Superadministrador
Uff, lo pillé. Ya sé qué te está pasando!

Vamos a ver, el problema está en que para un control tan básico y sencillo como es un botón, html ha logrado complicarlo hasta límites insospechados.

Cuando ponemos <button>test</button> html lo interpreta como <input type="submit" value="test">, es decir, un button siempre hará el submit, que es lo que nos estaba pasando. Para evitarlo, podemos hacer <button onclick="return false">test</button>

Por otro lado, ten en cuenta que al definer el ::addCol dentro de Browse y ponerle un
:cOnClick := "#alert('hola desde la columna')"

El cOnclick se está asignando realmente a la columna, no al contenido de la columna

Por lo cual el botón "de dentro de la columna" no tiene por qué tener ninguna acción ( ya se encarga la columna de hacerlo) y quedaría así

<input type="button" value="test" >

Si al botón le ponemos una acción en el onClick, hemos de tener en cuenta que se "lanzará" tanto el click del botón como el de la columna. Primero se ejecutará el click correspondiente al botón ( o el elemento que esté en el interior de la columna) y después el click asociado a esa columna,

Si solo queremos ejecutar el primer click (el del botón) tenemos "para la ejecución" dentro del onClick poniendo

'<input type="button" value="test" onclick="alert('hola desde el botón');event.stopPropagation()">'

Espero haberme explicado, si no, decírmelo, que este punto es importante
- Esta respuesta fue modificada 3 años, 7 meses por Alfredo Sanz.
- 19-09-2020 a las 14:07 #736
  
  quim
  Participante
  
  Buenos dias
  
  Dices ...
  
  el botón "de dentro de la columna" no tiene por qué tener ninguna acción ( ya se encarga la columna de hacerlo)
  
  Pero si el WArrayBrowse lo has definido con
  
  :cOnClick := NIL // o " "
  
  No tendría que saltar a ningún evento click de la columna no ?
  
  Saludos
19-09-2020 a las 19:33 #737

Alfredo Sanz
Superadministrador

Tienes dos opciones

Definir el onclick a nivel de todo el arraybrowse, con lo cual se ejecutará al hacer click en cualquier columna

WITH OBJECT WArrayBrowse():New( oParent )
:cOnClick := "VisParam"

O .. definirlo a nivel de columna, con lo cual sólo se ejecutará al hacer click en esa columna en concreto

WITH OBJECT :AddCol("") //damos formato a la columna del icono add_circle_outline
:cOnClick := "#BtnAlert('has pulsado la columna 1')"

Si no defines onClick ni para la fila ni para la columna, entonces tendrías que poner un onclick en el elemento interno si quieres que haga algo.

Autor

Entradas

Mostrando 9 respuestas a los debates

Debes estar registrado para responder a este debate.