龙空技术网

JS实现弹出窗口调用父窗口列表中的某元素,更新页面而不刷新页面

开发分享 180

前言:

此时看官们对“弹出框js”大概比较关怀,兄弟们都需要分析一些“弹出框js”的相关文章。那么小编在网上汇集了一些有关“弹出框js””的相关内容,希望我们能喜欢,咱们一起来了解一下吧!

使用场景:

我们在开发WEB ERP系统时,常需要新打开一个窗口,打开后,根据新打开的窗口运行的结果,更新原来窗口的数据,但这里要求不能直接页面刷新,因为刷新又会增加访问数据库压力以及用户的等待时间。

现在这个任务,就是在打开的一个窗口中,显示两个选项,用户如果其中一个,并提交保存后,我需要先把选择的内容更新到数据库,如果更新成功,则直接通过访问父窗口,find窗口中的无素,把用户提交内容更新到父窗口。

如图:

我们可以看到,首先,用户点击“设置”按钮,会弹出一个子窗口,在子窗口给用户提供选择包装方式,选中之后开始调用上图的Ajax。

如果ajax更新成功:

1)显示确认框成功信息

2)找到父窗口中某一行包含产品ID的元素(这样能确定具体列表中哪一行)

3)找到父窗口中某一行需要修改的数据(这样就可以只更新这一行数据)

4)用attr(属性,值)来更新该项数据值(这样就不需要刷新页面)

然后再Close掉这个子窗口。

任务结束。

标签: #弹出框js