Kattes Posted August 13, 2020 Share Posted August 13, 2020 Hello, I have a very simple mobile application, which contains only MainForm and one component "UnimURLFrame". Here I am loading the following HTML code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>LoginDemo</title> <style> @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'); } body { background-color: #3C3C3C; color: #000000; font-family: Roboto; font-weight: normal; font-size: 13px; line-height: 1.1875; margin: 0; padding: 0; } .Editbox { border: 0px #A9A9A9 none; background-color: transparent; color :#FFFFFF; font-weight: normal; font-size: 14px; text-align: left; vertical-align: middle; width: 100%; padding: 20px 5px; display: inline-block; outline: none; } .Line { border-width: 0; width: 100%; vertical-align: middle; height:4px } body, html { height: 100%; margin: 0; } .bg { /* The image used */ background-image: url("/files/images/loginBack.png"); /* Full height */ height: 50%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; } input[type="checkbox"] { visibility: hidden; } label { cursor: pointer; color: #fff; font-size:14px; font-weight: lighter; } input[type="checkbox"] + label:before { border: 1px solid #fff; background: #fff; color: #000; content: "\00a0"; /* Checkbox Symbol off*/ text-align: center; display: inline-block; font: 16px; font-weight: bold; /* Box size */ height: 16px; width: 16px; border-radius: 5px; margin: 0 0.75em 0 0; /* 0.75 em Label distance */ padding: 0; vertical-align: center; } input[type="checkbox"]:checked + label:before { background: #fff; color: #000; content: "\2713"; /* Checkbox Symbol on*/ text-align: center; } input[type=submit] { background-color: #3c9fd9; color: white; padding: 16px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #3673a5; } .unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .bg { /* The image used */ background-image: url("files/images/loginBack.png"); /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; } input.largerCheckbox { width: 20px; height: 20px; background: #3d404e; } </style> </head> <body class="bg"> <form> <br><br><br> <img src="/files/images/LoginLock.png" id="Image2" alt="" style="display: block; margin-left: auto; margin-right: auto;width: 20%; height: auto;"> <div style="color: #fff; font-size:32px;text-align: center; font-weight:800;"> Login Demo </div> <table style="width: 100%;position:relative;top:50px"> <colgroup> <col span="1" style="width: 5%;"> <col span="1" style="width: 90%;"> <col span="1" style="width: 5%;"> </colgroup> <tbody> <tr> <td style="background-color: #ff000000"></td> <td> <input class="Editbox" type="text" id="EditboxEmail" value=""; placeholder="E-Mail" > <img class="Line" src="/files/images/img0001.png" id="Line1" alt="" style="position:relative;top:-20px"></div> <input class="Editbox" type="password" id="EditboxPW" value="" placeholder="Password" > <img class="Line" src="/files/images/img0001.png" id="Line1" alt="" style="position:relative;top:-20px"></div> <div class="unselectable" style="position:relative;left:-20px; height:75px"> <input type="checkbox" id="CheckboxSave" name="" value=""> <label for="CheckboxSave"><span>Save Data</span></label> </div> <div class="unselectable" style="height:136px"> <input type="submit" value="Login" style="font-size:22px;font-weight:550; width: 100%;" onclick="ajaxRequest(MainmForm,'button', ['val1='+document.getElementById('EditboxEmail').value, 'val2='+document.getElementById('EditboxPW').value, 'val3='+document.getElementById('CheckboxSave').checked ])"> </div> <div style="color: #fff; font-size:20px;text-align: center; font-weight:900;"> Unigui - HTML Test </div> </td> <td style="background-color: #ff000000"></td> </tr> </tbody> </table> </form> </body> </html> Mainm.pas looks like: unit Mainm; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, uniGUITypes, uniGUIAbstractClasses, uniGUIClasses, uniGUImClasses, uniGUIRegClasses, uniGUIForm, uniGUImForm, uniGUImJSForm, uniGUIBaseClasses,unimTimer, uniSweetAlert,unimURLFrame, uniTimer; type TMainmForm = class(TUnimForm) UnimTimerEvent: TUnimTimer; UniSweetAlert1: TUniSweetAlert; UnimURLFrame: TUnimURLFrame; procedure UnimURLFrameAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); private { Private declarations } public { Public declarations } end; function MainmForm: TMainmForm; implementation {$R *.dfm} uses uniGUIVars, MainModule, uniGUIApplication, ServerModule; function MainmForm: TMainmForm; begin Result := TMainmForm(UniMainModule.GetFormInstance(TMainmForm)); end; procedure TMainmForm.UnimURLFrameAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); begin if EventName='button' then Begin ShowMessage('Email '+ Params.Values['val1']+#13+ 'PW '+ Params.Values['val2']+#13+ 'CB '+ Params.Values['val3']); End; end; initialization RegisterAppFormClass(TMainmForm); end. But the Ajax event will not be fired when I press the HTML button. I am pretty sure that I made a stupid error, but cannot find it. So please guys help me! Kind regards, Kattes Quote Link to comment Share on other sites More sharing options...
andyhill Posted August 13, 2020 Share Posted August 13, 2020 The way I see it, You have to identify the ajax sender with it's appropriate ajax listening event. You are listening with UnimURLFrame but sending to MainmForm ajaxRequest(MainmForm.UnimURLFrame, 'button' etc. Quote Link to comment Share on other sites More sharing options...
Kattes Posted August 14, 2020 Author Share Posted August 14, 2020 Thank you for the quick reply, but I also tried it in this way before without any success. So this what you see here was one of my last experiments having ajax call handler from mainm and unimUrlFrame pointing to the same handler. Unfortunately the solution is not so easy. Kind regards, Kattes Quote Link to comment Share on other sites More sharing options...
andyhill Posted August 15, 2020 Share Posted August 15, 2020 Can you post a shell mockup ? Quote Link to comment Share on other sites More sharing options...
Kattes Posted August 15, 2020 Author Share Posted August 15, 2020 Currently I am on a weekend trlp, so can share sources not before Monday. But finally the sources are already more or less listed above. Best regards K. Quote Link to comment Share on other sites More sharing options...
Kattes Posted August 17, 2020 Author Share Posted August 17, 2020 Hi again, Attached ZIP-File contains the complete test case sources. Hopefully somebody can help to solve, why ajax calls do not get fired. Kind regards, Kattes Testcase.zip Quote Link to comment Share on other sites More sharing options...
mhmda Posted August 17, 2020 Share Posted August 17, 2020 hi Quote Link to comment Share on other sites More sharing options...
mhmda Posted August 17, 2020 Share Posted August 17, 2020 Why don't you use Unigui controls ??? You insert plain html inside control and give it a css Where is the power of Unigui goes, such a waste Quote Link to comment Share on other sites More sharing options...
Kattes Posted August 17, 2020 Author Share Posted August 17, 2020 54 minutes ago, mhmda said: Why don't you use Unigui controls ??? You insert plain html inside control and give it a css Where is the power of Unigui goes, such a waste Why? I was asked to program a mobile app, which needs to look 100% as a given template. Using power of Unigui would be nice, but would require a very good understanding of css structure of the components to manipulate their look and feel accordingly. Responsive design is another topic... CSS is part of the html code only to make it easier to read in this test case. Quote Link to comment Share on other sites More sharing options...
Kattes Posted August 17, 2020 Author Share Posted August 17, 2020 1 hour ago, mhmda said: So what is the problem? What needs to be added to html code to have AjaxRequest available? Kind regards, Kattes Quote Link to comment Share on other sites More sharing options...
Abaksoft Posted August 18, 2020 Share Posted August 18, 2020 10 hours ago, Kattes said: Why? I was asked to program a mobile app, which needs to look 100% as a given template. Hello Kattes, I think this topic can help you. http://forums.unigui.com/index.php?/topic/14365-login-form-layout/&do=findComment&comment=78363 B.Regards Quote Link to comment Share on other sites More sharing options...
Kattes Posted August 18, 2020 Author Share Posted August 18, 2020 3 hours ago, Abaksoft said: Hello Kattes, I think this topic can help you. http://forums.unigui.com/index.php?/topic/14365-login-form-layout/&do=findComment&comment=78363 B.Regards Thank you Abaksoft, but currently I first need to understand why AjaxCall is not bind to the HTML Code, which I load into an UnimURLFrame. I only can guess that I am missing a reference to some JS Unigui library. Kind regards, Kattes Quote Link to comment Share on other sites More sharing options...
Sherzod Posted August 18, 2020 Share Posted August 18, 2020 8 minutes ago, Kattes said: but currently I first need to understand why AjaxCall is not bind to the HTML Code, which I load into an UnimURLFrame. I only can guess that I am missing a reference to some JS Unigui library. Hi, Can you try to use window.parent.ajaxRequest instead of ajaxRequest? 1 Quote Link to comment Share on other sites More sharing options...
Kattes Posted August 18, 2020 Author Share Posted August 18, 2020 7 minutes ago, Sherzod said: Hi, Can you try to use window.parent.ajaxRequest instead of ajaxRequest? Sherzod, my hero in darkest hours ! Thank you !!! Finally... <input type="submit" value="Login" style="font-size:22px;font-weight:550; width: 100%;" onclick="window.parent.ajaxRequest(window.parent.MainmForm.UnimURLFrame,'button', ['val1='+document.getElementById('EditboxEmail').value, 'val2='+document.getElementById('EditboxPW').value, 'val3='+document.getElementById('CheckboxSave').checked ])"> ..did make it work! Many many thanks - and also a big thanks to all the others for their help and comments! 2 Quote Link to comment Share on other sites More sharing options...
mhmda Posted August 18, 2020 Share Posted August 18, 2020 hi Quote Link to comment Share on other sites More sharing options...
Kattes Posted August 18, 2020 Author Share Posted August 18, 2020 Wow, that looks really nice and probably took a lonk time to achieve. I'm looking forward for your tutorial, Mohammad Quote Link to comment Share on other sites More sharing options...
mhmda Posted August 18, 2020 Share Posted August 18, 2020 Actually I created the video today after my work Quote Link to comment Share on other sites More sharing options...
mhmda Posted August 18, 2020 Share Posted August 18, 2020 Here you go: http://forums.unigui.com/index.php?/topic/14973-building-mobile-login-screen-using-unigui/ 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.