Jump to content

UnimURLFrame Ajax Call does not work


Kattes

Recommended Posts

image.thumb.png.89be3514d614075650c29239b687d4ef.png

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

54 minutes ago, mhmda said:

Why don't you use Unigui controls ???

You insert plain html inside control and give it a css :blink2:

Where is the power of Unigui goes, such a waste :sad:

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. 

Link to comment
Share on other sites

3 hours ago, Abaksoft said:

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

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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!

image.thumb.png.2c479a90a353237b9c32951bb795aceb.png

  • Like 2
Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...