使用lightbox：在Seaside 的WAComponent 中出现了Halos 但是浏览器没有显示？

Question

只是想在 Ajax 章节 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

我唯一能想到的是，当我们到达本章时，StLoggedInComponent 不再是根组件，在任务章节中切换到 StRootTask。可能是这样吗，灯箱：方法实现警告说它可能只有在从根组件调用时才能工作？检查浏览器中的元素显示 html 存在但不可见，因此它可能只是浏览器绊倒了 Scriptaculous，但下载了较旧的 Firefox 4 并且问题仍然存在。我是否必须在某处的子方法中以某种方式报告它？

这是打印屏幕和生成的 html:

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

我的 Scriptaculous 库在页面上的其他效果中起作用，这里是：

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

正在评估 Element.show("lightbox");在控制台中显示列表正下方的编辑器，但没有灯箱效果。响应是 div 包含编辑器。

<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>

Answer 1

有一个方法叫做 #lighter:

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

此方法调用 #script 方法中定义的 updateLightbox() 函数。在该脚本的最后一行你会看到 Element.show("lightbox");，它在 lightbox 节点上调用脚本 show() 函数。查看您的检查器并尝试在控制台中评估 Element.show("lightbox");。您应该看到灯箱或（更有可能）一条错误消息。我怀疑您可能已经包含了 jQuery，它不适用于 scriptaculous（scriptaculous 需要原型）。

要检查您是否包含原型，您可以评估 $("lightbox")。在 Prototype 中，这将 return 具有 id lightbox 的节点，在 jQuery 中它将是一个空的 jQuery 对象（因为 "lightbox" 被解释为 CSS 选择器).

更新

我去查看了灯箱代码。那里确实有一个错误，至少在与 3.1 一键图像一起分发的 Seaside 版本中是这样。问题是脚本被解释为 JavaScript 字符串而不是代码。要查看效果（不是实际修复），您可以按如下方式修改方法 WAScriptGenerator>>writeLoadScriptsOn:：

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

额外的 #collect: 将确保脚本的正确编码（引用）。

问题显然是 Seaside 3 对 JavaScript 对象模型进行了重大更改，但在灯箱代码的情况下尚未完成，并且由于现在大多数人都使用 jQuery，因此出现了这个问题未被注意到。

如果您订阅了 Seaside 邮件列表，请将错误报告放在那里。如果你不是，请告诉我，我可以为你做。

更新 2

供参考的问题报告：https://github.com/SeasideSt/Seaside/issues/863

Answer 2

从 Seaside 3.0 到 3.1 发生了变化，其中脚本应始终是 JSObject（子）实例。因此，解决方法应该是将 lighter 方法更改为：

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

Smalltalk 字符串现在总是转换为 Javascript 字符串。更改是因为这个问题：https://github.com/SeasideSt/Seaside/issues/742 但确实没有很好地记录（对此感到抱歉）。

使用lightbox：在Seaside 的WAComponent 中出现了Halos 但是浏览器没有显示？

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

smalltalk

seaside

pharo

更新

更新 2