Elevate Software

Login Login

ProductsBulletSalesBulletSupportBulletDownloadsBulletAbout



Home » Technical Support » Elevate Web Builder Technical Support » Support Forums » Elevate Web Builder General » View Thread

Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 10 of 15 total
Thread getElementById with HTML string?
Thu, Oct 1 2015 1:04 PMPermanent Link

PA

With this code I get the HTML from a resource IN THE SAME ORIGIN:

procedure TForm1.Button1Click(Sender: TObject);
begin
 ServerRequest1.URL := 'test.html';
 ServerRequest1.Execute;
end;

procedure TForm1.ServerRequest1Complete(Request: TServerRequest);
begin
 MultiLineEdit1.Lines.Assign(Request.ResponseContent);
end;

This inserts this HTML inside the MultiLineEdit1 control:

<!DOCTYPE html>
<html>
<head>
   <title>ExtractDiv test</title>
</head>
<body>
   <div id="main">
       <ul style="list-style-type: upper-roman">
           <li>&#196;pfel</li>
           <li>Birnen</li>
       </ul>
   </div>
</body>
</html>

So is there a EWB function to extract this div with the "main" ID from the HTML string (like getElementById in JavaScript):

<div id="main">
   <ul style="list-style-type: upper-roman">
       <li>&#196;pfel</li>
       <li>Birnen</li>
   </ul>
</div>
Thu, Oct 1 2015 3:59 PMPermanent Link

PA

OK, I've solved this with an external JavaScript:

function ExtractElementByIdFromString(HTMLString, IdString) {
   var doc = new DOMParser().parseFromString(HTMLString, "text/html");
   var R = doc.getElementById(IdString);
   return R.outerHTML;
}
Thu, Oct 1 2015 4:43 PMPermanent Link

PA

Aaaarghhh!!! The above JavaScript function seems to work in all browsers, EXCEPT in Opera 12.17 Build 1863!!

So I wrapped the JavaScript function call inside a try-except structure, but the Opera browser still shows the error message:

procedure TForm1.ServerRequest1Complete(Request: TServerRequest);
var
 ExtrDiv: string;
begin
 try
   ExtrDiv := ExtractElementByIdFromString(Request.ResponseContent.Text, 'main');
 except
   ExtrDiv := 'PAError';
 end;
 MultiLineEdit1.Lines.Text := ExtrDiv;
end;

And here is the error message from Opera:

http://i.imgur.com/YrvQhyp.png

In Delphi, the statement inside the except section suppresses the error and executes the code in the except section. Why this does not work in EWB?
Thu, Oct 1 2015 5:35 PMPermanent Link

Raul

Team Elevate Team Elevate

On 10/1/2015 4:43 PM, PA wrote:
> Aaaarghhh!!! The above JavaScript function seems to work in all browsers, EXCEPT in Opera 12.17 Build 1863!!
> http://i.imgur.com/YrvQhyp.png
> In Delphi, the statement inside the except section suppresses the error and executes the code in the except section. Why this does not work in EWB?

I'm taking a guess here but my guess is that you to handle the exception
in your external function (ExtractElementByIdFromString).

i'd try wrapping your external function in a JS try/except

Raul

Thu, Oct 1 2015 5:43 PMPermanent Link

PA

Thanks Raul, for now I've solved this problem by checking the browser name ("Opera") and using a compatible function with Opera (which has a small drawback) but which gives me the same result in Opera as the above function in the other browsers.

BTW, I've learned a lot about JavaScript by using EWB Wink
Thu, Oct 1 2015 5:58 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

Raul,

<< I'm taking a guess here but my guess is that you to handle the exception in your external function (ExtractElementByIdFromString). >>

That's not going to help.  See my reply to Peter.

Tim Young
Elevate Software
www.elevatesoft.com
Thu, Oct 1 2015 6:36 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

PA,

<< OK, I've solved this with an external JavaScript: >>

Not required.  The following EWB code will do what you want:

uses WebDOM;

function ExtractElementByIdFromString(const HTMLString: String; const IdString: String): String;
var
  TempDocument: TDocument;
  TempElement: TDOMElement;
begin
  TempDocument:=TDOMParser.Create.parseFromString(HTMLString,'text/html');
  TempElement:=TempDocument.getElementById(IdString);
  Result:=THTMLElement(TempElement).outerHTML;
end;

procedure TForm1.Button10Click(Sender: TObject);
begin
  ShowMessage(ExtractElementByIdFromString(MultiLineEdit1.Lines.Text,'main'));
end;

You should really spend some time learning more about EWB.  I see you trying to use JS for a lot of things that can be accomplished directly in EWB, especially manipulations of the DOM.

Tim Young
Elevate Software
www.elevatesoft.com
Thu, Oct 1 2015 6:49 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

Peter,

<< Aaaarghhh!!! The above JavaScript function seems to work in all browsers, EXCEPT in Opera 12.17 Build 1863!! >>

Yes, the DOMParser object is not supported until Opera 17 (based upon the MDN docs).

<< So I wrapped the JavaScript function call inside a try-except structure, but the Opera browser still shows the error message: >>

If you run the EWB code that I posted in a try..except, it works fine in Opera 12.17:

procedure TForm1.Button10Click(Sender: TObject);
begin
  try
     ShowMessage(ExtractElementByIdFromString(MultiLineEdit1.Lines.Text,'main'));
  except
     on E: Exception do
        ShowMessage('Error: '+E.Message);
  end;
end;

I went ahead and tested your external JS version also, and it works fine in 12.17 with the try..except also, so I'm not sure what you're seeing on your end.  Are you sure that you're observing what you think you're observing ?  IOW, did you actually run it though the browser debugger with a breakpoint on the except block code ?

Tim Young
Elevate Software
www.elevatesoft.com
Fri, Oct 2 2015 5:40 AMPermanent Link

PA

To avoid error messages and keep the functionality even when using a browser which does not support DOMParser, in the except section I use this JavaScript:

// for browsers which do not support DOMParser:
function ExtractElementByIdFromString2(HTMLString, IdString) {
   var result,
       temp = document.createElement('div'); // Create a temporary element
   temp.innerHTML = HTMLString; // Set the passed string as HTML to the temporary element
   result = temp.querySelector('#' + IdString).outerHTML; // Find an element with the passed id
   return result;
}

This works well. However, to follow your advice to not unnecessarily using external JavaScript, I tried to implement the functionality of the above Javascript in EWB:

// for Opera etc.:
function ExtractElementByIdFromString2(const HTMLString: String; const IdString: String): String;
var
 TempDocument: TDocument;
 TempElement: TDOMElement;  
begin
 TempDocument := TDocument.Create; // Create a temporary document
 TempElement := TempDocument.createElement('div'); // Create a temporary element
 THTMLElement(TempElement).innerHTML := HTMLString; // Set the passed string as HTML to the temporary element
 Result := TempDocument.querySelector('#' + IdString).outerHTML; // Find an element with the passed id -> ERROR!!
end;

However, this gives me a compiler error in the Result line:

[Error] Unit1.wbs (65,39): There is no function or procedure declaration that matches the querySelector('#' + IdString).outerHTML reference

So is it possible at all to implement this in EWB?
Fri, Oct 2 2015 5:57 AMPermanent Link

PA

So I tried this one:

// for Opera etc.:
function ExtractElementByIdFromString2(const HTMLString: String; const IdString: String): String;
var
 TempDocument: TDocument;
 TempElement, TempElement2: TDOMElement;
begin
 TempDocument := TDocument.Create; // Create a temporary document
 TempElement := TempDocument.createElement('div'); // Create a temporary element
 THTMLElement(TempElement).innerHTML := HTMLString; // Set the passed string as HTML to the temporary element
 TempElement2 := TempDocument.getElementById(IdString); // Find an element with the passed id
 Result := THTMLElement(TempElement2).outerHTML;
end;

Here the compiler did not complain. However, Opere gave me this error message:

http://i.imgur.com/deY6qBA.png
Page 1 of 2Next Page »
Jump to Page:  1 2


This web page was last updated on
Friday, December 6, 2024 at 05:39 PM

Privacy PolicyBulletSite Map

© 2024 Elevate Software, Inc. All Rights Reserved
Questions or comments ? E-mail E-mail us at info@elevatesoft.com

Image