Strange behavior with Login Form

GerhardV · February 1, 2017

I am experiencing strange behavior with regards to the Login Form.

I have a TUniHTMLFrame on my main form which contains a CSS menu. It works perfectly when I do not have a login form. When I do add the login form the CSS menu does not show or behaves correctly except for the first tab. It is a CSS "TabMenu" and the display doesn't update when moving over the other tabs nor does it receive the mouse clicks.

I also have one panel with its position slightly altered.

Any ideas why the Login Form can have such an influence on the main form when included?

See the two images attached - the second image is the one with the broken CSS menu.

Thanks.

GerhardV · February 6, 2017

I have recorded a video of the issue I am experiencing with regards to the above.

2017-02-06_09-28-48.zip

Sherzod · February 6, 2017

Hi,

How your CSS included?!

Better if you make a small test case.

Best regards.

GerhardV · February 6, 2017

Hi - thx.

CSS is loaded from HTML.

<link href="files/tabmenu/tabmenu.css" rel="stylesheet" type="text/css"/>

Yes busy creating a test app.

Sherzod · February 6, 2017

Hi,

Can you add your CSS file with

UniAddCSSLibrary();

in your MainForm initialization section?:

initialization
  RegisterMainFormClass(TMainForm);

  UniAddCSSLibrary();

end.

Best regards.

GerhardV · February 6, 2017

Same issue. I have attached a small test case.

Thanks.

GerhardV · February 6, 2017

After some more debugging I had a look at the "page source" in the browser of the main form for both scenarios. Without a Login Form the HTML code for the HTMLFrame exists in the source but not when a Login Form is included.

view-source_localhost_8077_WITHOUT_Login.html

view-source_localhost_8077_WITH_Login.html

Sherzod · February 6, 2017

Hi,

If you will use the login form, then you can use this approach:

1. UniHTMLFrame1.HTML:

<!DOCTYPE html>
<html>
<head>
    <title>IMQS Menu</title>
    <link href="files/tabmenu/tabmenu.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300"rel="stylesheet">
    ~~<script src="files/tabmenu/tabmenu.js"></script>~~ // remove this line
</head>

......

2. UniFormReady:

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  UniSession.AddJS('Ext.Loader.loadScript({url:"/files/tabmenu/tabmenu.js", onLoad:function(){tabmenu.init(); tabMenuSelect("menuDashboardClick", "menuHomeDashboard", "");}})');
end;

Try...

Best regards.

GerhardV · February 7, 2017

Thank you that does the trick!

But is this a bug?

Farshad Mohajeri · February 7, 2017

Problem here is that TUniHTMLFrame is not a real web page, so it can not have all capabilities of a regular web page. For example, below files in

may not be properly loaded because actuall they belong to section of a main web page.

<head>
    <title>IMQS Menu</title>
    <link href="files/tabmenu/tabmenu.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300" rel="stylesheet">
    <script src="files/tabmenu/tabmenu.js"></script>
</head>

Solution is to place those files in ServerModule.CustomFiles so they will be placed under

tag of main page.

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300" rel="stylesheet">

Above file doesn't have a standard syntax. This syntax is not supported by CustomFiles. I will fix it in next build so you will be able to add below lines to ServerModule.CustomFiles:

files/tabmenu/tabmenu.css
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300" rel="stylesheet">
files/tabmenu/tabmenu.js

GerhardV · February 7, 2017

OK that make sense. Excellent and thank you Farshad!

GerhardV · February 10, 2017

Hi Farshad:

It seems the fix doesn't work in 1374. I have added the lines exactly as you have done in your post and removed the OnReady event.

Farshad Mohajeri · February 10, 2017

How can I test it?

In my test menu appeares.

GerhardV · February 11, 2017

Farshad you can use the test case I have attached to one of my earlier posts (post #6).

I made sure I cleared the cache also.

GerhardV · February 14, 2017

Farshad were you able to test with my test case?

Farshad Mohajeri · February 14, 2017

Create a file named menux.js and add below content:

Load this file in CustomFiles

   function tabMenuSelect(menuItemClicked, menuId, params) {
      // Declare all variables
      var i, menuLevel1, menuLevel2; 
      
      //Remove the "active" and "subActive" class set by previous selection   
      menuLevel1 = document.getElementsByClassName("menuLevel1");
      for (i = 0; i < menuLevel1.length; i++) {
         menuLevel1[i].className = menuLevel1[i].className.replace(" active", "");
      }
      menuLevel2 = document.getElementsByClassName("menuLevel2");
      for (i = 0; i < menuLevel2.length; i++) {
         menuLevel2[i].className = menuLevel2[i].className.replace(" subActive", "");
      }
      
      //Select the new item
      tabmenu.select(menuId);      
      ajaxRequest(MainForm.menuHTMLFrame, menuItemClicked, params);  
			alert(menuItemClicked);    
   }

In HTMLFrame afterupdatehtml event add below code:

function afterupdatehtml(sender, eOpts)
{
       tabmenu.init(); 
      tabMenuSelect('menuDashboardClick', 'menuHomeDashboard', '');
 

}

In HTMFrame leave below code:

<ul id="tabmenu">
    <li class="menuLevel1">
        <a id="menuHome" href="#">HOME</a>
        <ul>
            <li class="menuLevel2"><a id="menuHomeDashboard" href="#" onclick="tabMenuSelect('menuDashboardClick', 'menuHomeDashboard', '');">Dashboard</a></li>
            <li class="menuLevel2"><a id="menuHomeLogout" href="#" onclick="tabMenuSelect('menuLogoutClick', 'menuHomeLogout', '');">Logout</a></li>
        </ul>
    </li>
    <li class="menuLevel1">
        <a id="menuReg" href="#">REGISTERS</a>
        <ul>
            <li class="menuLevel2"><a id="menuRegVAR" href="#" onclick="tabMenuSelect('menuVARClick', 'menuRegVAR', '');">Valuation Asset Register</a></li>
            <li class="menuLevel2"><a id="menuRegFAR" href="#" onclick="tabMenuSelect('menuFARClick', 'menuRegFAR', '');">Financial Asset Register</a></li>
            <li class="menuLevel2"><a id="menuRegWIP" href="#" onclick="tabMenuSelect('menuVARClick', 'menuRegWIP', '');">Work in Progress</a></li>
            <li class="menuLevel2"><a id="menuRegDerecognitions" href="#" onclick="tabMenuSelect('menuVARClick', 'menuRegDerecognitions', '');">Derecognitions</a></li>
            <li class="menuLevel2"><a id="menuRegInputForms" href="#" onclick="tabMenuSelect('menuVARClick', 'menuRegInputForms', '');">Transaction Forms</a></li>
		    	<li class="menuLevel2"><a id="menuRegAnnualDepr" href="#" onclick="tabMenuSelect('menuRegAnnualDeprClick', 'menuRegAnnualDepr', '');">Annual Depreciation Run</a></li>
            <li class="menuLevel2"><a id="menuRegRollOver" href="#" onclick="tabMenuSelect('menuRegRollOverClick', 'menuRegRollOver', '');">Roll-Over Financial Year</a></li>
        </ul>
    </li>
    <li class="menuLevel1">
        <a id="menuRep" href="#">REPORTS</a>
        <ul>
            <li class="menuLevel2"><a id="menuRepFinSumm" href="#" onclick="tabMenuSelect('menuFinSummClick', 'menuRepFinSumm', '');">Financial Summary</a></li>
            <li class="menuLevel2"><a id="menuRepAppendixB" href="#" onclick="tabMenuSelect('menuVARClick', 'menuRepAppendixB', '');">Appendix B</a></li>
            <li class="menuLevel2"><a id="menuRepAppendixC" href="#" onclick="tabMenuSelect('menuAppendixCClick', 'menuRepAppendixC', '');">Appendix C</a></li>
            <li class="menuLevel2"><a id="menuRepCostCentre" href="#" onclick="tabMenuSelect('menuCostCentreClick', 'menuRepCostCentre', '');">Cost Centre Summary</a></li>
            <li class="menuLevel2"><a id="menuRepGenLedger" href="#" onclick="tabMenuSelect('menuGenLedgerClick', 'menuRepGenLedger', '');">General Ledger Summary</a></li>
            <li class="menuLevel2"><a id="menuRepMore" href="#" onclick="tabMenuSelect('menuMoreClick', 'menuRepMore', '');">More ...</a></li>
        </ul>
    </li>
    <li class="menuLevel1"><a id="menuOps" href="#">GRAPHS</a></li>
    <li class="menuLevel1"><a id="menuUtil" href="#">UTILITIES</a>
      <ul>
            <li class="menuLevel2"><a id="menuUtilImport" href="#" onclick="tabMenuSelect('menuUtilImportClick', 'menuUtilImport', '');">Import</a></li>
            <li class="menuLevel2"><a id="menuUtilExport" href="#" onclick="tabMenuSelect('menuUtilExportClick', 'menuUtilExport', '');">Export</a></li>
        </ul>
    </li>
    <li class="menuLevel1"><a id="menuMaint" href="#">MAINTENANCE</a>
        <ul>
            <li class="menuLevel2"><a id="menuMaintPolicy" href="#" onclick="tabMenuSelect('menuMaintPolicyEditor', 'menuMaintPolicy', '');">Edit Policy</a></li>
            <li class="menuLevel2"><a id="menuMaintRefTabs" href="#" onclick="tabMenuSelect('menuVARClick', 'menuMaintRefTabs', '');">Reference Data</a></li>
        </ul>
    </li>
</ul>

Farshad Mohajeri · February 14, 2017

It seems that dropdown is still not working!

Farshad Mohajeri · February 14, 2017

Corrected:

function afterupdatehtml(sender, eOpts)
{
       tabmenu.init();  
      tabMenuSelect('menuDashboardClick', 'menuHomeDashboard', '');
  

}

GerhardV · February 14, 2017

Thank you Farshad...starting to understand the usage of TUniHtmlFrame - need to break things out as this isn't the main page.

Thanks again - much appreciated!

Strange behavior with Login Form

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation