У меня есть простой проект в 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>
@AmigoJack Пробелы не имеют значения в его примере HTML-шаблона. id = "htmlDiv"
все в порядке. В выходном HTML, когда вы «проверяете элемент» в браузере, вы увидите, что он отображается как id = "htmlDiv"
. Компилятор pas2js
удаляет пробелы.
«Элемент проверки» — это DOM, который браузер отображает из источника. Нажмите Ctrl+U, чтобы увидеть фактический источник. Однако я ошибался: HTML5 допускает ноль или несколько пробелов вокруг знака равенства.
В вашем примере, чтобы вызвать процедуру 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;
Как альтернативный метод. Вы также можете назначить click
eventListener
каждой кнопке.
Я изменил <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 красная ошибка на экране.... да благословит тебя бог...
Скорее всего, потому, что тогда он вычисляется как myFunc(1)
вместо myFunc('1')
— ваш метод ожидает строку, а не целое число.
@amigojack: Отлично... все в порядке... верно и то, и другое..... спасибо
@АмигоДжек. в этом нет необходимости.... мой вопрос касается процедуры вызова. вы работаете с TMS WEB CORE?