圣经般的"Sortable.create()"方法在进行AJAX调用以更新无序列表后不起作用
Scriptaculous "Sortable.create()" method does not work after making AJAX call to update unordered list
这是我使用该网站大约两年后的第一篇stackoverflow帖子,所以请不要发布猎犬。
我正在尝试创建网站的"编辑我的个人资料照片"部分,用户可以(1)添加个人资料照片;(2) 删除个人资料照片;以及(3)重新排序她的个人资料照片。
从数据库的角度来看,每个用户只能有五张个人资料图片。因此,我的users表有image0、image1、image2、image3和image4的字段。
添加照片很简单,但在删除和重新排序照片时,我遇到了一个奇怪的问题。
为了重新排序照片,我使用了prototype/scriptaculous"sortable.create()"方法。具体来说,我在无序列表。
重新排序任何列表元素将进行ajax调用,并在相应的php脚本中适当地重新排序图像(例如,过去的image0将现在写入数据库到图像2等)
然后,我将更新后的无序图像列表重新创建为HTML。
最后,在处理ajax javascript函数中(即,如果ajax.status==200和ajax.readyState==4),我调用sortable.create方法再次使新的无序图像列表可排序。
上面提到的效果非常好。下面是脑筋急转弯:
无序列表中的每个列表元素还包含一个链接,用于删除有问题的特定图像
因此,想象一个照片列表,在无序列表中的每张照片下面都有一个"删除这张照片"链接。
以下是HTML的大致草图:
<ul id="profile_pics" onmouseup="reorder_photos();">
<li id="0"><img src="images/image0.jpg"><a href="?delete_id=0" onclick="return false;" onmouseup="stopPropagation(event); delete_photo('image0');">delete this photo</a></li>
<li id="1"><img src="images/image1.jpg"><a href="?delete_id=1" onclick="return false;" onmouseup="stopPropagation(event); delete_photo('image1');">delete this photo</a></li>
<li id="2"><img src="images/image2.jpg"><a href="?delete_id=2" onclick="return false;" onmouseup="stopPropagation(event); delete_photo('image2');">delete this photo</a></li>
</ul>
请注意,单击"删除此照片"链接将调用delete_photo函数,但不会因为调用了stopPropagation()函数而牵连到reorder_photos函数。
delete_photo函数对PHP脚本进行AJAX调用,该脚本(1)删除有问题的照片,(2)进行适当的数据库调整,以及(3)重新创建无序列表。ajax处理函数然后调用sortable.create()使这个新的无序列表可排序。
问题是新的无序列表不可排序。
更奇怪和令人困惑的是,当我在ajax处理函数中调用另一个脚本方法,如"$('profile_pics').fade({duration:2.5});"时,它确实有效。
为什么?为什么?为什么?
任何帮助都将不胜感激。如果示例代码有帮助,我可以发布它——我只是不想让这篇文章比现在更像百科全书
当页面上的内容被替换时,事件处理程序会随之进行。AJAX调用后,您需要重新初始化可排序项。
- 得到"TypeError:无法读取属性'filename'未定义的“;调用“npm start
- "访问控制允许起源”;通过javascript从http页面调用同一网站的httpsurl时出现问题
- 多个“;脚本调用"在SINGLE”内$(文档).ready()”;
- jQuery捕获"RangeError:超过了最大调用堆栈大小“;
- jQuery:使用.attr('href',")调用javascript
- 重复“;function(){}.调用(this)"在Uglified JS中
- 无法调用方法“”;getEditResponseUrl"当使用表单ID打开表单时,绑定到工作表的Google
- 要求JS 2.1.9引起“;最大调用堆栈"使用Grunt时出错
- Fine Uploader S3-无处安全调用异步“;setUploadSuccessParams()"
- 将对象设置为Backbone.js模型,而不必调用“;set()"在每一处房产上
- "堆叠外空间”;同时通过AJAX调用填充jsTree
- 得到"未捕获的类型错误:未定义的不是函数“;当试图从对象调用get()或set()时
- "TypeError:无法调用方法'匹配'未定义的“;Angular JS指令中的Morris
- Node.js服务器在没有调用“;end()"用于服务器发送的事件
- "无法调用方法'打开'未定义的“;使用indexedDB.open时出错
- jQuery获取"事件调用“;要素
- 为什么<车身负载=“;fn()">使用函数调用,但是window.onload=fn;使用处理程序函
- "访问控制允许原点不允许原点为null"使用jQuery调用web服务时出错
- 无法调用方法“”;setHtmlContent"在GAS中
- "与服务器的连接不成功”;尝试在WebView中调用javascript时