smalltalkpharoseaside

Using lightbox: in Seaside's WAComponent appears in Halos but the browser doesn't show it?

Just wanted to show the editor in a lightbox in the Ajax chapter here

StLoggedInComponent>>initializeMenuComponent
    self
        menuComponent:
            (StMenuComponent new
                addEntry: 'All' withAction: [ self showAllTasks ];
                addEntry: 'Completed' withAction: [ self showCompletedTasks ];
                addEntry: 'Pending' withAction: [ self showPendingTasks ];
                addEntry: 'Missed' withAction: [ self showMissedTasks ];
                addEntry: 'New Task' withAction: [ self createNewTask ];
                addEntry: 'Logout' withAction: [self session logout. self answer: true];
                yourself)

StLoggedInComponent>>createNewTask
    (self lightbox: self taskEditor newTask)
        ifFalse: [ ^ self ].
    self session database addTask: self taskEditor task toUser: self session user

The only thing I can figure it that by the time we reach this chapter the StLoggedInComponent is no longer the root component, switched to StRootTask in Task chapter. Could this be it, the lightbox: method implementation warns it will might work only when called from the root component? Inspecting the element in the browser shows the html is there but invisible, so it could just be the browser stumbling Scriptaculous, but downloaded an older Firefox 4 and the problem persists. Do I have to report it somehow in the children method somewhere?

Here is a print screen and the generated html:

Screen capture showing the Seaside output with Halos enabled

WADelegation
Browser
Inspector
Styles
Render / Source
<div class="generic">
  <h1>ToDo-List of xxx</h1>
  <div class="menu">
    <a href="/sttodo?_s=rLz5X40B6zq9NMsX&amp;_k=a2yB92XcFDp9dWq6&amp;6">All</a>&nbsp;
    <a href="/sttodo?_s=rLz5X40B6zq9NMsX&amp;_k=a2yB92XcFDp9dWq6&amp;7">Completed</a>&nbsp;
    <a href="/sttodo?_s=rLz5X40B6zq9NMsX&amp;_k=a2yB92XcFDp9dWq6&amp;8">Pending</a>&nbsp;
    <a href="/sttodo?_s=rLz5X40B6zq9NMsX&amp;_k=a2yB92XcFDp9dWq6&amp;9">Missed</a>&nbsp;
    <a href="/sttodo?_s=rLz5X40B6zq9NMsX&amp;_k=a2yB92XcFDp9dWq6&amp;10">New Task</a>&nbsp;
    <a href="/sttodo?_s=rLz5X40B6zq9NMsX&amp;_k=a2yB92XcFDp9dWq6&amp;11">Logout</a>
  </div>
  <div class="list" id="list">
    <table>
      <tr>
        <td>
          <input onclick="new Ajax.Updater(&quot;list&quot;,&quot;/sttodo&quot;,{&quot;evalScripts&quot;:true,&quot;parameters&quot;:[&quot;_s=rLz5X40B6zq9NMsX&quot;,&quot;_k=a2yB92XcFDp9dWq6&quot;,&quot;12&quot;].join(&quot;&amp;&quot;)})" type="checkbox" class="checkbox"/>
        </td>
        <td>2 February 2016</td>
        <td>
          <div id="id15">Pending task</div>
        </td>
        <td></td>
        <td>
          <a href="/sttodo?_s=rLz5X40B6zq9NMsX&amp;_k=a2yB92XcFDp9dWq6&amp;16">edit</a>
        </td>
      </tr>
    </table>
  </div>
  <div class="editor" id="editor">
    <table>
      <tr>
        <td>
          <input onclick="new Ajax.Updater(&quot;list&quot;,&quot;/sttodo&quot;,{&quot;evalScripts&quot;:true,&quot;parameters&quot;:[&quot;_s=rLz5X40B6zq9NMsX&quot;,&quot;_k=a2yB92XcFDp9dWq6&quot;,&quot;17&quot;].join(&quot;&amp;&quot;)})" type="checkbox" class="checkbox"/>
        </td>
        <td>2 February 2016</td>
        <td>
          <div id="id20">Pending task</div>
        </td>
        <td></td>
        <td>
          <a href="/sttodo?_s=rLz5X40B6zq9NMsX&amp;_k=a2yB92XcFDp9dWq6&amp;21">edit</a>
        </td>
      </tr>
    </table>
  </div>
</div>
<div id="overlay"></div>
<div id="lightbox" style="display: none">
  <div class="generic lightbox">
    <h1>Editing task</h1>
    <form accept-charset="utf-8" method="post" action="/sttodo?_s=rLz5X40B6zq9NMsX&amp;_k=a2yB92XcFDp9dWq6">
      <table>
        <tr>
          <td>Name: </td>
          <td>
            <input name="22" type="text" class="text"/>
          </td>
        </tr>
        <tr>
          <td>Description: </td>
          <td>
            <textarea rows="auto" cols="auto" name="23"></textarea>
          </td>
        </tr>
        <tr>
          <td>Deadline: </td>
          <td>
            <select name="24">
              <option value="1">January</option>
              <option value="2" selected="selected">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>&nbsp;
            <input value="02" name="25" size="2" maxlength="2" type="text" class="text"/>&nbsp;
            <input value="2016" name="26" size="4" maxlength="4" type="text" class="text"/>
            <input name="27" type="hidden" class="hidden"/>
          </td>
        </tr>
        <tr>
          <td>Completed: </td>
          <td>
            <select name="28">
              <option value="1">yes</option>
              <option value="2" selected="selected">no</option>
            </select>
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input name="29" value="Save" type="submit" class="submit"/>
            <input name="30" value="Cancel" type="submit" class="submit"/>
          </td>
        </tr>
      </table>
    </form>
  </div>
</div>
New Session Configure Halos Profile Memory XHTML 0/4 ms

My Scriptaculous library works in other effects on the page, here it is:

initialize
    "self initialize"
 (WAAdmin
  register: self
  asApplicationAt: 'sttodo')
  addLibrary: PTDevelopmentLibrary;
  addLibrary: SUDevelopmentLibrary;
  addLibrary: StToDoLibrary;
  preferenceAt: #sessionClass put: StSession.

Evaluating Element.show("lightbox"); in the console shows the editor just below the list, no lightbox effect though. The response is this div contains the editor.

<div id="lightbox" style=""><div class="generic lightbox"><h1>Editing task</h1><form accept-charset="utf-8" method="post" action="/sttodo?_s=FqZr4RP_dLxEUf59&amp;_k=Ewy2Ngig00mj4yiH"><table><tbody><tr><td>Name: </td><td><input name="17" type="text" class="text"></td></tr><tr><td>Description: </td><td><textarea rows="auto" cols="auto" name="18"></textarea></td></tr><tr><td>Deadline: </td><td><select name="19"><option value="1">January</option><option value="2" selected="selected">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select>&nbsp;<input value="02" name="20" size="2" maxlength="2" type="text" class="text">&nbsp;<input value="2016" name="21" size="4" maxlength="4" type="text" class="text"><input name="22" type="hidden" class="hidden"></td></tr><tr><td>Completed: </td><td><select name="23"><option value="1">yes</option><option value="2" selected="selected">no</option></select></td></tr><tr><td></td><td><input name="24" value="Save" type="submit" class="submit"><input name="25" value="Cancel" type="submit" class="submit"></td></tr></tbody></table></form></div></div>
Solution

  • There's a method called #lighter:

    lighter
^ 'updateLightbox();Event.observe(window,"resize",function(){updateLightbox();});'

    This method calls the updateLightbox() function defined in the #script method. In the last line of that script you'll see Element.show("lightbox");, which calls the scriptaculous show() function on the lightbox node. Take a look at your inspector and try to evaluate Element.show("lightbox"); in the console. You should either see the lightbox or (more likely) an error message. I suspect that you might have included jQuery, which won't work with scriptaculous (scriptaculous requires Prototype).

    To check wether you've included Prototype you can evaluate $("lightbox"). In Prototype this will return the node with the id lightbox, in jQuery it will be an empty jQuery object (since "lightbox" is interpreted as a CSS selector).

    Update

    I went and checked the lightbox code. There's indeed an error there, at least in the Seaside version distributed with the 3.1 one-click image. The problem is that the script is being interpreted as a JavaScript string and not as code. To see the effect (not as an actual fix) you can modify the method WAScriptGenerator>>writeLoadScriptsOn: as follows:

    self loadScripts
    collect: [ :script|
        script isString
            ifTrue: [ JSStream on: script ]
            ifFalse:[ script ] ]   
        thenDo: [ :each |
            aDocument stream javascript: each.
            aDocument  nextPut: $; ]

    The extra #collect: will ensure the correct encoding (quoting) of the script.

    The problem is obviously that Seaside 3 introduced major changes to the JavaScript object model that weren't completed in case of the lightbox code and since most people nowadays use jQuery, this problem went unnoticed.

    If you are subscribed to the Seaside mailing list, please drop a bug report there. If you're not, let me know and I can do that for you.

    Update 2

    The issue report for reference: https://github.com/SeasideSt/Seaside/issues/863