Ejemplo, lo más simple, para entender abrir un Modal

Acceder Darse de alta He olvidado la contraseña

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

Mostrando 3 respuestas a los debates

Autor

Entradas

05-12-2020 a las 23:40 #1634

Participante

En el proceso de aprendizaje, estoy intentando poder disponer de ejemplos lo más sencillos y con menos código posible, para poder ir entendiendo y tomar como base para poder ir ampliando e incorporando funcionalidades, pero siempre, partiendo de una base sencilla, clara y que pueda llegar a comprender.

En este caso, para poder saber el proceso de una llamada Modal desde una ventana...

PROCEDURE ProvaModal()

   // Comenzamos instanciando la Página Web que queremos crear
   WITH OBJECT TWebPage():New()
      :lAlerts := .T.      // Como vamos a usar alerts desde ajax, tenemos que indicarlo a webpage

      vCrearModal( :WO )  // Creamos la ventana modal

      WITH OBJECT WBevel():New( :WO )
         :cId := "mibevel"

         WITH object WEdit():New( :WO )
            :cId                := "miedit"
            :cTitle             := "Mi Edit"
            :Create()
         END WITH

         WITH object WButton():New(:WO)
            :cText       := "Prueba abrir ventana Modal"
            :cOnClick    := "AbrirModal"
            :cAjaxBevel   := "nflcargo"
            :Create()
         END

         :Create()
      END

      oCgi:SendPage(:Create())
   END WITH

RETURN

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

// creamos la ventana modal
FUNCTION vCrearModal ( o )
   LOCAL oBevel, oForm

   WITH OBJECT oBevel := WBevel():New( o )
      :cId             := "modal1"
      :nStyle          := xc_Modal
      :lTrueModal      := .f.
      :aWidth[ xc_S ]  := 10
      :aWidth[ xc_M ]  := 8

      WITH OBJECT WPanel():New( :WO )
         :cTitle        := "Edición de datos"
         :aWidth[ xc_S ] := 12

         WITH OBJECT oForm := WForm():New( :WO )
            :cId       := "frmModal1"
            :cFunction := "mUpdateModal"

            WITH OBJECT WEdit():New( :WO )
               :cId        := "MiEditModal1"
               :cTitle     := "MiEditModal1"
               :Create()
            END WITH

            WITH OBJECT WButton():New( :WO )
               :cId         := "submit"
               :cText       := "Aceptar"
               :cOnClick    := oBevel:Submit( oForm )
               :Create()
            END WITH

            :Create()
         END WITH //form

         :Create()
      END WITH //Panel

      :Create()
   END WITH //Bevel

RETURN NIL

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

FUNCTION AbrirModal()

*oCGI:SendScript( nfl_OpenModal("modal1",.t.) )
   SendAjaxScript( "", "modal1", "control1" )  //Texto, id de la ventana modal a abrir, id del control que tomarᡥl foco )

RETURN NIL

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

PROCEDURE mUpdateModal
   LOCAL oMsgAlert

   WITH OBJECT oMsgAlert := WMsgAlert():New()
      :cTitle     := "Proceso finalizado"
      :cType      := "info"
      :Create()
   END
   SendAjaxScript( oMsgAlert:FullHtml() )

RETURN

PROCEDURE ProvaModal()

// Comenzamos instanciando la Página Web que queremos crear

WITH OBJECT TWebPage():New()

:lAlerts := .T. // Como vamos a usar alerts desde ajax, tenemos que indicarlo a webpage

vCrearModal( :WO ) // Creamos la ventana modal

WITH OBJECT WBevel():New( :WO )

:cId := "mibevel"

WITH object WEdit():New( :WO )

:cId := "miedit"

:cTitle := "Mi Edit"

:Create()

END WITH

WITH object WButton():New(:WO)

:cText := "Prueba abrir ventana Modal"

:cOnClick := "AbrirModal"

:cAjaxBevel := "nflcargo"

:Create()

END

:Create()

END

oCgi:SendPage(:Create())

END WITH

RETURN

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

// creamos la ventana modal

FUNCTION vCrearModal ( o )

LOCAL oBevel, oForm

WITH OBJECT oBevel := WBevel():New( o )

:cId := "modal1"

:nStyle := xc_Modal

:lTrueModal := .f.

:aWidth[ xc_S ] := 10

:aWidth[ xc_M ] := 8

WITH OBJECT WPanel():New( :WO )

:cTitle := "Edición de datos"

:aWidth[ xc_S ] := 12

WITH OBJECT oForm := WForm():New( :WO )

:cId := "frmModal1"

:cFunction := "mUpdateModal"

WITH OBJECT WEdit():New( :WO )

:cId := "MiEditModal1"

:cTitle := "MiEditModal1"

:Create()

END WITH

WITH OBJECT WButton():New( :WO )

:cId := "submit"

:cText := "Aceptar"

:cOnClick := oBevel:Submit( oForm )

:Create()

END WITH

:Create()

END WITH //form

:Create()

END WITH //Panel

:Create()

END WITH //Bevel

RETURN NIL

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

FUNCTION AbrirModal()

*oCGI:SendScript( nfl_OpenModal("modal1",.t.) )

SendAjaxScript( "", "modal1", "control1" ) //Texto, id de la ventana modal a abrir, id del control que tomarᡥl foco )

RETURN NIL

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

PROCEDURE mUpdateModal

LOCAL oMsgAlert

WITH OBJECT oMsgAlert := WMsgAlert():New()

:cTitle := "Proceso finalizado"

:cType := "info"

:Create()

END

SendAjaxScript( oMsgAlert:FullHtml() )

RETURN

A partir de ahí, voy a intentar, siempre con el mínimo código posible y lo más sencillo que se pueda, incorporar mas funcionalidades, como por ejemplo envio/recepcion de datos... (recibir en el Modal el contenido del Edit, modificarlo y devolverlo a la ventana principal, actualizando el valor.

Si alguien se anima, o quiere ayudar a incorporar más código "facilón" y entendible por todos...

Un saludo,

Xevi.

06-12-2020 a las 21:48 #1636

Xevi

Participante

La ventana Modal, recibe el parámetro de la ventana Inicial, y la ventana Modal retorna el valor a la ventana Inicial

PROCEDURE ProvaModal()

   // Comenzamos instanciando la Página Web que queremos crear
   WITH OBJECT TWebPage():New()
      :lAlerts := .T.      // Como vamos a usar alerts desde ajax, tenemos que indicarlo a webpage

      CrearModal( :WO )  // Creamos la ventana modal

      WITH OBJECT WBevel():New( :WO )
         :cId := "myBevel"

         WITH object WEdit():New( :WO )
            :cId                := "myEdit1"
            :cTitle             := "Mi Edit1"
            :Create()
         END WITH

         WITH object WButton():New(:WO)
            :cText       := "Prueba abrir ventana Modal"
            :aParams := { { "myEdit1", "#myEdit1"} }
            :cOnClick    := "AbrirModal"
            :cAjaxBevel   := "nflcargo"
            :Create()
         END

         :Create()
      END

      oCgi:SendPage(:Create())
   END WITH

RETURN

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

// creamos la ventana modal
FUNCTION CrearModal ( o )
   LOCAL oBevel, oForm

   WITH OBJECT oBevel := WBevel():New( o )
      :cId             := "modal1"
      :nStyle          := xc_Modal
      :lTrueModal      := .f.
      :aWidth[ xc_S ]  := 10
      :aWidth[ xc_M ]  := 8

      WITH OBJECT WPanel():New( :WO )
         :cTitle        := "Edición de datos"
         :aWidth[ xc_S ] := 12

         WITH OBJECT oForm := WForm():New( :WO )
            :cId       := "frmModal1"
            :cFunction := "UpdateModal"

            WITH OBJECT WEdit():New( :WO )
               :cId        := "MyEditModal1"
               :cTitle     := "MyEditModal1"
               :Create()
            END WITH

            WITH OBJECT WButton():New( :WO )
               :cId         := "submit"
               :cText       := "Aceptar"
               :cOnClick    := oBevel:Submit( oForm )
               :Create()
            END WITH

            :Create()
         END WITH //form

         :Create()
      END WITH //Panel

      :Create()
   END WITH //Bevel

RETURN NIL

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

FUNCTION AbrirModal()
   Local cHtml := ""
   Local cTextEdit1 := oCGI:GetCGIValue( "myEdit1" )  //Capturamos els valor introducido en el Edit1 de la ventana Inicial

   //En Ajax, los nombres de los Id/Controles, en minúsculas
   cHtml  := SetValueById( "myeditmodal1", cTextEdit1 )
   SendAjaxScript( cHtml, "modal1", "myeditmodal1" )  //Texto, id de la ventana modal a abrir, id del control que tomarᡥl foco )

RETURN NIL

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

PROCEDURE UpdateModal
   Local cHtml := ""
   Local cTextEdit1 := oCGI:GetCgiValue( "myEditModal1", "" ) //Capturamos els valor introducido en el Edit1 de la ventana Modal

   //En Ajax, los nombres de los Id/Controles, en minúsculas
   cHtml  := SetValueById( "myedit1", cTextEdit1 )
   SendAjaxScript( cHtml, "mybevel", .F. )  //Texto, id de la ventana modal a abrir, id del control que tomarᡥl foco )

RETURN

100

101

PROCEDURE ProvaModal()

// Comenzamos instanciando la Página Web que queremos crear

WITH OBJECT TWebPage():New()

:lAlerts := .T. // Como vamos a usar alerts desde ajax, tenemos que indicarlo a webpage

CrearModal( :WO ) // Creamos la ventana modal

WITH OBJECT WBevel():New( :WO )

:cId := "myBevel"

WITH object WEdit():New( :WO )

:cId := "myEdit1"

:cTitle := "Mi Edit1"

:Create()

END WITH

WITH object WButton():New(:WO)

:cText := "Prueba abrir ventana Modal"

:aParams := { { "myEdit1", "#myEdit1"} }

:cOnClick := "AbrirModal"

:cAjaxBevel := "nflcargo"

:Create()

END

:Create()

END

oCgi:SendPage(:Create())

END WITH

RETURN

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

// creamos la ventana modal

FUNCTION CrearModal ( o )

LOCAL oBevel, oForm

WITH OBJECT oBevel := WBevel():New( o )

:cId := "modal1"

:nStyle := xc_Modal

:lTrueModal := .f.

:aWidth[ xc_S ] := 10

:aWidth[ xc_M ] := 8

WITH OBJECT WPanel():New( :WO )

:cTitle := "Edición de datos"

:aWidth[ xc_S ] := 12

WITH OBJECT oForm := WForm():New( :WO )

:cId := "frmModal1"

:cFunction := "UpdateModal"

WITH OBJECT WEdit():New( :WO )

:cId := "MyEditModal1"

:cTitle := "MyEditModal1"

:Create()

END WITH

WITH OBJECT WButton():New( :WO )

:cId := "submit"

:cText := "Aceptar"

:cOnClick := oBevel:Submit( oForm )

:Create()

END WITH

:Create()

END WITH //form

:Create()

END WITH //Panel

:Create()

END WITH //Bevel

RETURN NIL

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

FUNCTION AbrirModal()

Local cHtml := ""

Local cTextEdit1 := oCGI:GetCGIValue( "myEdit1" ) //Capturamos els valor introducido en el Edit1 de la ventana Inicial

//En Ajax, los nombres de los Id/Controles, en minúsculas

cHtml := SetValueById( "myeditmodal1", cTextEdit1 )

SendAjaxScript( cHtml, "modal1", "myeditmodal1" ) //Texto, id de la ventana modal a abrir, id del control que tomarᡥl foco )

RETURN NIL

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

PROCEDURE UpdateModal

Local cHtml := ""

Local cTextEdit1 := oCGI:GetCgiValue( "myEditModal1", "" ) //Capturamos els valor introducido en el Edit1 de la ventana Modal

//En Ajax, los nombres de los Id/Controles, en minúsculas

cHtml := SetValueById( "myedit1", cTextEdit1 )

SendAjaxScript( cHtml, "mybevel", .F. ) //Texto, id de la ventana modal a abrir, id del control que tomarᡥl foco )

RETURN

Simple y con poco código... para poder empezar a manipular datos.

Un Saludo,

Xevi.

Esta respuesta fue modificada 4 años por Xevi.

14-03-2021 a las 10:10 #1748

Gabriel Gonzalez Angeles
Participante

Hola buen dia.

Tengo un pequeño problema.

Me coloca un error que dice,..
undefined reference to 'HB_FUN_SENDAJAXSCRIPT'

Me podrían decir como lo soluciono ?

Gracias por sus conocimientos y tiempo.

14-03-2021 a las 19:59 #1752

Alfredo Sanz

Superadministrador

Hola!

SendAjaxScript es una función de los ejemplos nefele y que no forma parte del núcledo nefele

La encontrarás en el prg eFuncionesGenericas.prg en los ejemplos

Te la adjunto por si no la encuentras

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

FUNCTION SendAjaxScript( cText, cModal, cFocus )

   IF !Empty( cModal )
      cText += cOpenModal( cModal )
   ENDIF

   IF !Empty( cFocus )
      cText +=  SetFocus( cFocus )
   ENDIF

   oCGI:Send( "" )
   oCGI:send( IF(At("<SCRIPT>",Upper(cText))=0,"<script>","") + crlf + cText + crlf + "</script>" )

RETURN NIL


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

FUNCTION cOpenModal( cName )
RETURN '$("#' + cName + '").modal("open");' + crlf

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

FUNCTION SetFocus( cName )
RETURN 'document.querySelector("#' + cName + '").focus();' + crlf

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

FUNCTION SendAjaxScript( cText, cModal, cFocus )

IF !Empty( cModal )

cText += cOpenModal( cModal )

ENDIF

IF !Empty( cFocus )

cText += SetFocus( cFocus )

ENDIF

oCGI:Send( "" )

oCGI:send( IF(At("<SCRIPT>",Upper(cText))=0,"<script>","") + crlf + cText + crlf + "</script>" )

RETURN NIL

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

FUNCTION cOpenModal( cName )

RETURN '$("#' + cName + '").modal("open");' + crlf

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

FUNCTION SetFocus( cName )

RETURN 'document.querySelector("#' + cName + '").focus();' + crlf

Esta respuesta fue modificada 3 años, 9 meses por Alfredo Sanz.

Autor

Entradas

Mostrando 3 respuestas a los debates

Debes estar registrado para responder a este debate.