Layui中Jquery动态设置的select标签加载时而正常时而失效问题排查和解决

1.背景
前段使用Layui框架，jQuery动态设置的下拉框select标签，加载时而正常时而失效。
本地调试完全没有问题，但是在服务器运行加载成功和失败的比例五五开。

2.解决
问题原因：Layui的form美化修饰和jQuery的select方法发生冲突，受渲染速度不同影响，最终的select异步加载成功与否也会不同。
解决方法：在使用jquery异步加载完成之后，调用Layui的重新渲染方法，对页面重新渲染

如下：

<script type="text/javascript">$(function() {init();})//页面初始化function init() {$.ajax({type: "post",url: "http://...",timeout : 30000,success: function(result) {var select = $("select[name=siteId]");var site = ${house.siteId}$.each(result.data, function(index, element) {var option = $("<option value='"+element.id+"'>"+element.name+"</option>");select.append(option);  if(site == element.id){option.prop("selected",true)}})},error: function() {},async: false});//添加下面的代码，重新渲染，可以有效避免加载失效问题layui.use('form', function(){var form = layui.form;form.render();});}
</script>

3.总结：
ajax改成同步请求！！！！！然后form.render()ajax改成同步请求！！！！！然后form.render()

转自

Layui中Jquery动态设置的select标签加载时而正常时而失效问题排查和解决相关推荐

vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式
工作中我们经常会遇到这种需求,后台定义用户的权限数据,前端进行获取,并渲染在侧边栏导航上,不同权限的用户看到的侧边栏是不同的.即前端渲染的数据是随着后台的改变而改变的,做到真正的前后端分离. 一.拿到 ...
jQuery动态增加/删除select下来框的option中的selected属性
jQuery动态增加/删除select下来框的option中的selected属性 1.说明:选中下拉框的时候,先清除所有选中的option选项 2.效果截图: 1.说明:选中下拉框的时候,先清除所有 ...
layui中的动态表格
layui中的动态表格介绍 layui提供了丰富的动态表格的操作,它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求.支持固定表头.固定行.固定列左/列右,支持拖拽改变列 ...
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
在xml文件的Preference标签中，用extra给intent标签加参数
2019独角兽企业重金招聘Python工程师标准>>> 在xml文件的Preference标签中,用<extra>给<Intent>标签加参数,以及<i ...
vue项目中 img标签加载失败方法，onerror事件的两种方法
vue项目中 img标签加载失败方法 ?css 第一种方法第二种方法本人写的第一篇文章,希望对你有帮助第一种方法 < img src="123" :οnerrοr=&q ...
vue项目中 img标签加载失败(404)方法，@error事件
vue项目中 img标签加载失败方法,@error事件 @error="defImg" <img src="123" @error="defIm ...
php网站首页点击更多时获取数据,jQuery+PHP实现点击按钮加载更多，不刷新页面加载更多数据！附：可用源码+demo...
先上效果: 刚打开页面的时候,只显示部分数据,点击加载更多的时候,就会加载我们预先定义的加载数量显示出来!当数据库里面的所有数据都显示出来,就提示全部加载了! 新建index.php jQuery+p ...
如何使用jQuery创建“请稍候，正在加载...”动画？
我想在我的网站上放置一个"请稍等,加载中"的旋转圆圈动画. 我应该如何使用jQuery完成此操作? #1楼 Jonathon的出色解决方案在IE8中中断(动画完全不显示). 要解决 ...

Layui中Jquery动态设置的select标签加载时而正常时而失效问题排查和解决

Layui中Jquery动态设置的select标签加载时而正常时而失效问题排查和解决相关推荐

最新文章

热门文章