cdev Posted April 6, 2020 Share Posted April 6, 2020 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 ? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 6, 2020 Share Posted April 6, 2020 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? Quote Link to comment Share on other sites More sharing options...
cdev Posted April 6, 2020 Author Share Posted April 6, 2020 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 ? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 6, 2020 Share Posted April 6, 2020 Please make a simple testcase and attach here if possible. By the way, I worked with quill, and it seems there were no problems. Quote Link to comment Share on other sites More sharing options...
cdev Posted April 6, 2020 Author Share Posted April 6, 2020 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 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 7, 2020 Share Posted April 7, 2020 I will check. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 7, 2020 Share Posted April 7, 2020 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; Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.