calling Delphi event handler from JS

Dear Bruno ,


Thanks for your kind assistance and sorry for the so many support requests ,
can u please help me to clarify the following,

1. To pass the web form object is not possible correct ?

procedure myDelphiEvent(fm1 : TfmList_hr );
begin
 if Assigned(fm1) then
    begin
      ShowMessage('fmList_hr detected');
    end;
 showmessage('Got it in module already!');
end;

procedure TfmList_hr.acg_listhr_employeesClick(Sender: TObject);
var fm1 : TfmList_hr ;
begin
   fm1 := fmList_hr ;
   asm
      $impl.myDelphiEvent( fm1 );
   end ;
end ;


2.   add event handler listener in Delphi code not working , can u please advice . what went wrong in my code .

procedure TmyForm.myclick(sender : TObject);
begin
     // in this click event , i need to pickup this form object's component's 
     // properties 
     showmessage( myform.caption );
end ;

procedure TmyForm.webbtnclick(sender : TObject);
begin
   asm
       var el = document.getElementById('btnLink1');
       el.AddEventListener('click' , @myclick );
   end;
end ;

3. possible to get $impl and $mod in ASM block to make call to the TwebForm
    public / private procedure or function ? ( if possible , show sample of code)


Thanks,
kalmen

  1. Adding this code, I could not see any problem here:

    procedure myDelphiEvent(fm1 : TForm1);
    begin
     if Assigned(fm1) then
        begin
          ShowMessage('fmList_hr detected');
        end;
     showmessage('Got it in module already!');
    end;

    procedure TForm1.WebButton1Click(Sender: TObject);
    var
      fm1 : TForm1;
    begin
       fm1 := Self;
       asm
          $impl.myDelphiEvent( fm1 );
       end;
    end;

    2. When adding a HTML button to the HTML template
      <body>
      <input type="button" id="btnid"></input>
      </body>

    binding the event also works without problems here:

      TForm1 = class(TWebForm)
        procedure WebFormShow(Sender: TObject);
      public
        function BtnClick(Event: TJSEvent): boolean;
      end;

    function TForm1.BtnClick(Event: TJSEvent): boolean;
    begin
      ShowMessage('button click');
    end;


    procedure TForm1.WebFormShow(Sender: TObject);
    var
      el: TJSElement;
    begin
      el := document.getElementById('btnid');
      el.addEventListener('click',@BtnClick);
    end;

    3 If you add a class method, Test

      TForm1 = class(TWebForm)
      public
        procedure Test();
      end;

    You can call it with this.Test()

    procedure TForm1.WebButton1Click(Sender: TObject);
    begin
       asm
          this.Test();
       end;
    end;

Hi, let say i wish to assigned the tag of the aElement in my GetItemChildren event of my WebControlList component , into my delphi procedure , 

   procedure Tform1.show_detail_view( item_index : integer ); 

how to i get the Alement.tag and assign into the 
   AElement.addEventListener('click', @show_detail_view(???)  );

so i can make the call differently depending on the index passed , thanks.

The event parameter is defined by the HTML element, you cannot force yourself that it would return the index. 
Declare the form method as

procedure Tform1.show_detail_view(Event: TJSEvent ); 

and add it via:
Element.addEventListener('click', @show_detail_view );

is there any where that  i can get the show_detail_view procedure be able to determine which element has made the call by using Element.addEventListener('click', @show_detail_view ); ?


if i defined it at 
procedure Tform1.mailchannel_listGetItemChildren(Sender: TObject;
  AItem: TListItem; AElement: TJSHTMLElement);

where the AElement , i have assigned the Tag and wish to use it in the Click
event for the AElement , take note that i will have multiple AElement that
point to the same Delphi procedure show_detail_view , so what i wish to achieve is
show_detail_view for tag1 , show_detail_view for tag2 so on and so forth ...

The JavaScript passes the HTML element that triggered the event via Event.target. If you had set an attribute to an element, you could retrieve the attribute from Event.target