[CLOSED] Notification Window shows no Text

[Peter.Treier]

Good Morning all

I need to give a feedback to the user on a successful saving operation. My idea is a Notification Window ...
I use this JS call

   var stubWithPlausiError = '<p>Test for Order </br> <strong style="color: #00FF00">' + _declDTO.OrderReference + '</strong> </br>successfully saved</p></br><p><strong style="color: #FF0000">(with Plausibility errors)</p>';


  if (_hasPlausiError == true) {
    Ext.net.Notification.show({
      iconCls: '#Information',
      pinEvent: 'click',
      html: stubWithPlausiError,
      title: 'Success...'
    });

The Window pop's up, the Title and the Icon are OK, but the Window Body - the Message (msg) - isn't visible.

Here's the Generated HTML

<div id="window-1150_header" class="x-window-header x-header x-header-horizontal x-docked x-unselectable x-window-header-default x-horizontal x-window-header-horizontal x-window-header-default-horizontal x-top x-window-header-top x-window-header-default-top x-docked-top x-window-header-docked-top x-window-header-default-docked-top" style="left: -1px; top: -1px; width: 200px; right: auto;">
    <div id="window-1150_header-body" class="x-header-body x-window-header-body x-window-header-body-default x-window-header-body-horizontal x-window-header-body-default-horizontal x-window-header-body-top x-window-header-body-default-top x-window-header-body-docked-top x-window-header-body-default-docked-top x-box-layout-ct x-window-header-body-default-horizontal x-window-header-body-default-top x-window-header-body-default-docked-top" style="width: 188px;">
        <div id="window-1150_header-innerCt" class="x-box-inner " role="presentation" style="width: 188px; height: 16px;">
            <div id="window-1150_header-targetEl" class="x-box-target" style="width: 188px;">
                <img id="window-1150_header-iconEl" class="x-window-header-icon x-header-icon icon-information x-box-item x-window-header-icon-default x-window-header-icon-before-title" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="margin: 0px; left: 0px; top: 0px; right: auto;"><div id="window-1150_header_hd" class="x-component x-header-text-container x-window-header-text-container x-window-header-text-container-default x-box-item x-component-default" style="margin: 0px; left: 18px; top: 0px; width: 153px; right: auto;" unselectable="on">
                    <span id="window-1150_header_hd-textEl" class="x-header-text x-window-header-text" unselectable="on">
                    Success...</span></div>
                <div id="tool-1151" class="x-tool x-box-item x-tool-default x-tool-after-title" style="margin: 0px; left: 173px; top: 0px; width: 15px; height: 15px; right: auto;">
                    <img id="tool-1151-toolEl" class="x-tool-img x-tool-close" role="presentation" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div>
            </div>
        </div>
    </div>
</div>
<div id="window-1150-body" class="x-window-body x-window-body-default x-closable x-window-body-closable x-window-body-default-closable x-window-body-default x-window-body-default-closable" style="left: 0px; top: 20px; width: 190px; height: 70px;">
    <span id="window-1150-outerCt" style="width: 100%; height: 100%; display: table; table-layout: fixed;">
    <div id="window-1150-innerCt" style="height: 100%; vertical-align: top; display: table-cell;">
        <p>Test for Order <br><strong style="color: rgb(0, 255, 0);"></strong>
        <br>successfully saved</p>
        <br>
        <p><strong style="color: rgb(255, 0, 0);">(with Plausibility errors)</strong></p>
    </div>
    </span></div>

Any hint on this ?

Peter

[Daniil]

Hi Peter,

I cannot reproduce. To avoid "undefined" error I wrapped _declDTO.OrderReference in quotes.

Could you, please, provide a full test case?

[Peter.Treier]

Could you, please, provide a full test case?

Huh, that's not so easy. We use a very complex architecture - own application center, like ur Portal.
Hmm, have to think how I can subtract all this.

Peter

[Vladimir]

Huh, that's not so easy. We use a very complex architecture - own application center, like ur Portal.

Do you think that Portal is required to reproduce the issue? Do you able to reproduce the issue in the simple example?

[Peter.Treier]

Do you think that Portal is required to reproduce the issue? Do you able to reproduce the issue in the simple example?

Hi Vladimir, yes it looks so :-(
I made a single page test case and this one is working as expected.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

  <script type="text/javascript">
    function cmdClick() {
      startSomethingLong();
    };

    function startSomethingLong() {

      showMask('working...');

      App.direct.WaitAWhile(5000, { success: OnSuccess2, failure: OnFail });
    };

    function OnSuccess1(miliSec) {

      hideMask();

      var stub = '<p>I was waiting for </br> <strong style="color: #00FF00">' + miliSec + '</strong> </br>but I had fun !</p>';
      Ext.net.Notification.show({
        iconCls: '#Information',
        pinEvent: 'click',
        html: stub,
        title: 'Success...'
      });

    };

    function OnSuccess2(miliSec) {



      var stub = '<p>I was waiting for </br> <strong style="color: #00FF00">' + miliSec + '</strong> </br>but I had fun !</p>';
      Ext.net.Notification.show({
        iconCls: '#Information',
        pinEvent: 'click',
        html: stub,
        title: 'Success...'
      });

      hideMask();

    };

    function OnFail() {

    };


    // Show / Hide Functions for the Ext.Net LoadMask
    var _loadMask = null;
    function showMask(title) {
      var loadingText;

      if (_loadMask == null) {
        _loadMask = new Ext.LoadMask(Ext.getBody(), { msg: title });
      }
      _loadMask.show();

    };
    function hideMask() {
      if (_loadMask != null) {
        _loadMask.hide();
        Ext.net.Mask.hide();
      }
    };


  </script>

  <head runat="server">
    <title></title>
  </head>
  <body>
    <form id="form1" runat="server">
      <div>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport runat="server">
          <Items>

                <ext:Button runat="server" Text="Click me !">
                  <Listeners>
                    <Click Handler="cmdClick()"></Click>
                  </Listeners>
                </ext:Button>

          </Items>
        </ext:Viewport>

      </div>
    </form>
  </body>
</html>

Direct Method

  <DirectMethod()>
  Public Function WaitAWhile(miliSec As Int32) As Int32
    System.Threading.Thread.Sleep(miliSec)
    Return miliSec
  End Function

I try to do a minimal version with our architecture...

Peter

[Daniil]

Are you applying any custom CSS? If so, please try without any custom CSS.