uniHTMLFrame: open a second uniHTMLFrame with same HTML

[cdev]

Hi,

When I load some HTML code in the HTML property and some JavaScript-code in the AfterScript property of a TUniHTMLFrame (both refering to some ID's in the HTML), at the first load everything works fine, but I encounter two problems :

1. When I 'reload' the same TUniHTMLFrame-component with the same HTML and JS, I don't get any longer the same as in the first instance.

2. I have my TUniHTMLFrame-component  on a frame.  When I load a second instance of that frame, this means a second instance of my TUniHTMLFrame and load the same HTML and JS, I also don't get any longer the same as in the first instance.

When I load several instances in my internetbrowser of that HTML-code with the JS-code, they are all being displayed correctly.  In my UniGUI-application, I get the correct display once, but all other 'loads' of the same HTML-code are incorrect.

Who can help me ?  What am I doing wrong ?

[Sherzod]

9 minutes ago, cdev said:

When I load some HTML code in the HTML property and some JavaScript-code in the AfterScript property of a TUniHTMLFrame (both refering to some ID's in the HTML), at the first load everything works fine, but I encounter two problems :

Hi,

Sorry, could you please make a simple testcase?

[cdev]

Of course, for example your solution of this topic :

First, I add the following lines in ServerModule.CustomFiles:

https://cdn.quilljs.com/1.3.6/quill.snow.css
files/style.css
https://cdn.quilljs.com/1.3.6/quill.js

Then I load the html-code in the TUniHTMLFrame.HTML :

<div id="editor-container">

</div>

And finally I edit the TUniHTMLFrame.Afterscript :

var Delta = Quill.import('delta');
var quill = new Quill('#editor-container', {
  modules: {
    toolbar: true
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
});

// Store accumulated changes
var change = new Delta();
quill.on('text-change', function(delta) {
  change = change.compose(delta);
});

// Save periodically
setInterval(function() {
  if (change.length() > 0) {
    console.log('Saving changes', change);
    /* 
    Send partial changes
    $.post('/your-endpoint', { 
      partial: JSON.stringify(change) 
    });
    
    Send entire document
    $.post('/your-endpoint', { 
      doc: JSON.stringify(quill.getContents())
    });
    */
    change = new Delta();
  }
}, 5*1000);

// Check for unsaved data
window.onbeforeunload = function() {
  if (change.length() > 0) {
    return 'There are unsaved changes. Are you sure you want to leave?';
  }
}

I obtain this (correct):

I have saved for example the HTMLCode in a stringlist slHTML and the AfterScript-code in a stringlist slAS

When I 'reload' the code in the same way as the first time:

uniHTMLFrame1.HTML.Text := slHTML.Text;

uniHTMLFrame1.AfterScript.Text := slAS.Text;

When I do this: my uniHTMLFrame displays nothing, as if nothing was loaded.

And when I load a second instance of the same uniHTMLFrame in another Frame with the same code, I also don't get anything in that second frame, but

my first instance looks now like this :

I am convinced the reason of this unwanted behaviour is related to the ID in the HTML-code: editor-container.  But when I load the code directly in my browser twice in two separate tabs, I get it twice right.  As if the code is loaded in two separate sessions, where there is no id overlapping.  In UniGUI I think I have an ID overlapping.  How can I solve this ?

 

 

 

[Sherzod]

Please make a simple testcase and attach here if possible.

By the way, I worked with quill, and it seems there were no problems.

 

[cdev]

Attached, you can find a small sample project in which you can see that the first time the html is loaded everything is fine.  From the moment the html code is loaded a second time or is loaded in another frame the expected display is gone.

uniHTMLFrameTest.zip

[Sherzod]

I will check. 

[Sherzod]

11 hours ago, cdev said:

Attached, you can find a small sample project in which you can see that the first time the html is loaded everything is fine.  From the moment the html code is loaded a second time or is loaded in another frame the expected display is gone.

uniHTMLFrameTest.zip

You should do something like the following:

procedure TframeHTMLFrame.UniButton1Click(Sender: TObject);
begin
  //UniHTMLFrame1.HTML.LoadFromFile(UniServerModule.FilesFolder+'test.html');
  //UniHTMLFrame1.AfterScript.LoadFromFile(UniServerModule.FilesFolder+'test.js');
end;

procedure TframeHTMLFrame.UniFrameCreate(Sender: TObject);
begin
  with UniHTMLFrame1 do
  begin
    HTML.Text := '<div id="'+ JSName +'editor-container"></div>';
    AfterScript.Add(JSName + '.quill = new Quill(''#'+ JSName +'editor-container'', {modules: {toolbar: true}, placeholder: ''Compose an epic...'', theme: ''snow''})');
  end;
end;

procedure TframeHTMLFrame.UniFrameReady(Sender: TObject);
begin
  //UniHTMLFrame1.HTML.LoadFromFile(UniServerModule.FilesFolder+'test.html');
  //UniHTMLFrame1.AfterScript.LoadFromFile(UniServerModule.FilesFolder+'test.js');
end;