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。可能就是这样，lightbox：方法实现警告它只有在从根组件调用时才可能工作？检查浏览器中的元素显示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（＆＃34;灯箱＆＃34;）;在控制台中显示列表下方的编辑器，但没有灯箱效果。响应是这个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();});'

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

要检查您是否包含Prototype，您可以评估$("lightbox")。在Prototype中，这将返回标识为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但事实并没有很好地记录（抱歉）。

使用灯箱：在Seaside的WAComponent出现在Halos中，但是浏览器没有显示它？

2 个答案:

更新

更新2