Процедура вызова с параметром из HTML-шаблона в TMS WEB Core

У меня есть простой проект в TMS WEB Core.

Я хочу создать серию кнопок во время выполнения в цикле внутри моего компонента TWebHTMLDiv и вызвать функцию Delphi myFunc на основе индекса цикла каждой кнопки.

Функция myFunc на стороне Delphi принимает входные данные и отправляет ShowMessage с индексом кнопки.

Моя проблема в том, что я не знаю, как вызвать функцию с параметром со стороны шаблона.

Мой код устройства:

unit Unit1;

interface

uses
  System.SysUtils, System.Classes, JS, Web, WEBLib.Graphics, WEBLib.Controls,
  WEBLib.Forms, WEBLib.Dialogs, Vcl.Controls, WEBLib.WebCtrls;

type
  TForm1 = class(TWebForm)
    WebHTMLDiv1: TWebHTMLDiv;
    procedure WebFormShow(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
    procedure myFunc(ACode: string);
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}
{ TForm1 }

procedure TForm1.myFunc(ACode: string);
begin
  ShowMessage(ACode);
end;

procedure TForm1.WebFormShow(Sender: TObject);
var
  i: integer;
begin
  WebHTMLDiv1.HTML.Text := '';
  for i := 1 to 5 do
    WebHTMLDiv1.HTML.Text := WebHTMLDiv1.HTML.Text +
      '<button type = "button" onclick = "myFunc(' + i.ToString +
      ')" class = "btn btn-primary btn-sm">BtnNum' + i.ToString + '</button>';
end;

end.

Код моего HTML-шаблона:

<html>
  <head>
    <meta http-equiv = "Content-type" content = "text/html; charset=utf-8" />
    <title>TMS Web Project</title>
    <style>
    </style>
  </head>
  <body>
  <div id = "htmlDiv">
  </div>
  </body>
</html>

@АмигоДжек. в этом нет необходимости.... мой вопрос касается процедуры вызова. вы работаете с TMS WEB CORE?

omid sistani 20.04.2024 19:19

@AmigoJack Пробелы не имеют значения в его примере HTML-шаблона. id = "htmlDiv" все в порядке. В выходном HTML, когда вы «проверяете элемент» в браузере, вы увидите, что он отображается как id = "htmlDiv". Компилятор pas2js удаляет пробелы.

Shaun Roselt 20.04.2024 19:58

«Элемент проверки» — это DOM, который браузер отображает из источника. Нажмите Ctrl+U, чтобы увидеть фактический источник. Однако я ошибался: HTML5 допускает ноль или несколько пробелов вокруг знака равенства.

AmigoJack 20.04.2024 20:04
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
3
104
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Способ 1

В вашем примере, чтобы вызвать процедуру Delphi myFunc из кода JavaScript, вы можете просто вызвать такую ​​процедуру в JavaScript:

pas.Unit1.TForm1.myFunc('1998');

И это сработает. Итак, ваш полный код WebFormShow будет выглядеть так:

procedure TForm1.WebFormShow(Sender: TObject);
var
  i: integer;
begin
  WebHTMLDiv1.HTML.Text := '';
  for i := 1 to 5 do
    WebHTMLDiv1.HTML.Text := WebHTMLDiv1.HTML.Text +
      '<button type = "button" onclick = "pas.Unit1.TForm1.myFunc(' + i.ToString +
      ')" class = "btn btn-primary btn-sm">BtnNum' + i.ToString + '</button>';
end;

Способ 2

Как альтернативный метод. Вы также можете назначить clickeventListener каждой кнопке.

Я изменил <button>, включив в него атрибут data_code, и добавил к нему класс MyBtnClick. Затем я также изменил вашу функцию myFunc, чтобы она имела параметр Sender: TJSEvent.

Вот полный код:

unit Unit1;

interface

uses
  System.SysUtils, System.Classes, JS, Web, WEBLib.Graphics, WEBLib.Controls,
  WEBLib.Forms, WEBLib.Dialogs, Vcl.Controls, WEBLib.WebCtrls, Vcl.StdCtrls,
  WEBLib.StdCtrls;

type
  TForm1 = class(TWebForm)
    WebHTMLDiv1: TWebHTMLDiv;
    procedure WebFormShow(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
    procedure myFunc(Sender: TJSEvent);
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.myFunc(Sender: TJSEvent);
var
  ACode: String;
begin
  ACode := Sender.targetElement.getAttribute('data_code');
  ShowMessage(ACode);
end;

procedure TForm1.WebFormShow(Sender: TObject);
var
  i: integer;
  MyBtnClick: TJSHTMLCollection;
begin
  WebHTMLDiv1.HTML.Text := '';
  for i := 1 to 5 do
    WebHTMLDiv1.HTML.Text := WebHTMLDiv1.HTML.Text +
      '<button type = "button" data_code = "' + i.ToString +
      '" class = "btn btn-primary btn-sm MyBtnClick"' +
      '>BtnNum' + i.ToString + '</button>';


  MyBtnClick := document.getElementsByClassName('MyBtnClick');
  for I := 0 to MyBtnClick.length-1 do
  begin
    MyBtnClick.Items[I].addEventListener('click', @myFunc);
  end;
end;

end.

Отлично... очень спасибо, братан... Способ 2 работает нормально... очень хорошо.... у метода 1 красная ошибка на экране.... да благословит тебя бог...

omid sistani 20.04.2024 20:14

Скорее всего, потому, что тогда он вычисляется как myFunc(1) вместо myFunc('1') — ваш метод ожидает строку, а не целое число.

AmigoJack 20.04.2024 23:19

@amigojack: Отлично... все в порядке... верно и то, и другое..... спасибо

omid sistani 21.04.2024 03:41

Другие вопросы по теме