`

关于手机端JQuery的异步传输时UI界面不更新的bug

 
阅读更多
JQeryMobile的UI界面,其标签首先经过jquery.mobile-1.0a2.min.js的处理(你可以用chrome的审查元素功能,看到事实上显示的页面中已经由JS添加许多新标签和class,而不仅仅是原来你写的那点标签),然后再进行css布局。因此,当你的页面与后台异步传输获得数据的时候,返回的内容通过append插入页面后,往往没有相应的CSS效果。这个时候我们就需要动态加载jquery.mobile-1.0a2.min.js,即在异步传输获得数据后,再读处理页面的jquery.mobile-1.0a2.min.js。

具体如下:

function LoadJs(file){ //动态调用JS文件函数

    var head = $('head').remove('#loadScript');

    $("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:'text/javascript',id:'load'}).appendTo(head);

}



function getData(type, url, argname1, arg1, argname2, arg2, nextfunction){

//采用XMLHttpRequest方法向服务器提供参数,获得数据

//参数定义:类型,调用的后台页面,参数1的名称,参数1的值,参数2的名称,参数2的值,返回结果后执行的下一个函数名

var $xmlhttp, $result;

$xmlhttp = false;

    // branch for native XMLHttpRequest object

   if(window.XMLHttpRequest) {

     try{

    $xmlhttp = new XMLHttpRequest();

        } catch(e) {

        $xmlhttp = false;

        }

    // branch for IE/Windows ActiveX version

    } else if(window.ActiveXObject) {

        try {

         $xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

       } catch(e) {

         try {

            $xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

         } catch(e) {

            $xmlhttp = false;

         }

       }

    }

  

   $xmlhttp.open(type, url, true);   //异步调用

   $xmlhttp.setRequestHeader(argname1, arg1);//将参数定义在header里

   $xmlhttp.setRequestHeader(argname2, arg2);  

   $xmlhttp.onreadystatechange = function()

{

   if ( $xmlhttp.readyState == 4 && $xmlhttp.status == 200 ){

  

        $result = $xmlhttp.responseText;            //得到返回信息      

        $glb_result = $result;

        eval(nextfunction);//执行下一个函数

   }else{

   //result = xmlhttp.status;

   }

}

    $xmlhttp.send('USERNAME=user1&PASSWORD=123456');//异步发送,这里send的内容无意义  

}



function GetShowMyList()//获取根目录文件列表函数



var authcode = GetRequest();

$glb_authcode = authcode; //保存为全局变量

var $url = 'http://222.31.76.184/rest.php?case=showMyList';

getData("get", $url, "AUTHCODE", authcode, "", "", "ShowMyListOK()");



}



function ShowMyListOK(){//处理根目录文件列表函数

if( $glb_result == ""){

alert("密码或用户名有错!");

}else{

//alert("成功: "+$glb_result);

var $obj = jQuery.parseJSON($glb_result);

$.each( $obj, function(i, n){

if( $obj[i].wname != ""){

var onelist = "<li><img src='stylesheets/images/file_icon/" + SwitchIcon($obj[i].wext) + "' class='ui-li-icon'/><a href='#' onclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + $obj[i].wsize + "B</span><a href='dialog/operatefile.html' >操作</a></li>";

$("#wlist").append(onelist);

}

});

LoadJs("js/jquery.mobile-1.0a2.min.js");//处理成功后再调用jquery.mobile的JS函数对页面内容进行处理

}

}

http://hi.baidu.com/%CE%F7%B1%B1%C5%DD%C3%E6%CD%F5/blog/item/ca3f507810d8d6ff2e73b3cd.html
分享到:
评论

相关推荐

    springmvc+maven+junit+jqueryUI

    8. 在前端,利用jQuery库和jQuery UI组件,通过Ajax实现异步数据交互,提高用户体验。 这个组合提供了从后端到前端的完整解决方案,覆盖了开发、测试、构建和用户界面等多个方面,是现代企业级Web应用开发的常见...

    jQuery LigerUI V1.3.3

    jQuery LigerUI V1.3.3是一款基于jQuery的前端用户界面库,它为开发者提供了丰富的组件和功能,便于快速构建交互式、响应式的Web应用。这个版本是V1.3.3,意味着它可能包含了之前的版本修复的错误、新增的功能和性能...

    jquery-ui-1.9.2.custom

    《jQuery UI 1.9.2自定义版:构建高效互动网页界面的基石》 jQuery UI,作为基于jQuery的开源JavaScript库,为开发者提供了一系列强大的工具,用于创建富有交互性、美观且易于使用的网页界面。在1.9.2这个版本中,...

    jquery中文版离线手册

    总的来说,**jQuery中文版离线手册**是学习和工作中不可或缺的资源,无论是在桌面端还是移动端,都能提供方便快捷的查阅体验,帮助开发者快速掌握和应用jQuery技术。无论是网页开发新手还是经验丰富的程序员,这个...

    Jquery easy ui Tree组件使用(tree11.json当数据源有bug)

    在本文中,我们将深入探讨jQuery EasyUI中的Tree组件以及如何使用`tree11.json`作为数据源时可能遇到的问题和解决方法。jQuery EasyUI是一个基于jQuery的轻量级UI库,它提供了一系列易于使用的组件,如对话框、表格...

    LigerUI框架 v1.3.2

    hidden(隐藏域)初始化的支持[优化]增加enabledCompleteCheckbox参数(是否启用半选择模式)[BUG]解决在firefox无法自动完成的问题[优化]解决 下拉框树 setValue 方法当值为0时不正常设置 的问题[BUG]解决在firefox无法...

    jQuery-File-Upload

    传统表单提交会刷新页面,但jQuery-File-Upload使用Ajax技术异步上传文件,使得文件上传过程中页面保持不刷新,提升了用户体验。同时,它还可以处理文件数据和其他表单字段的上传,确保所有必要的数据一起发送到...

    jquery-2.2.4插件

    例如,使用`jQuery UI`插件库,我们可以创建交互式的用户界面,包括日期选择器、拖放功能和可自定义的主题。再比如`Bootstrap`,它结合了jQuery和CSS框架,提供了一套完整的网页设计解决方案,包括导航栏、模态窗口...

    jquery-easyui-1.3.6.zip

    jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解...

    jQuery中文参考手册

    6. **插件生态系统**:jQuery拥有庞大的插件库,如jQuery UI提供各种用户界面组件,Bootstrap则结合jQuery提供了响应式布局和组件。 在《jQuery中文参考手册》中,你将找到每个函数的详细解释、参数说明、返回值和...

    jQuery 1.4.1 中文版参考

    8. **插件扩展**:jQuery的强大力量在于其丰富的插件生态系统,如`jQuery UI`提供了一系列的界面组件,`jQuery Validation`用于表单验证。 9. **版本差异**:jQuery 1.4.1相较于更早的版本,可能包含性能优化、bug...

    jquery-3.1.1.zip

    6. **插件生态**:jQuery拥有庞大的插件生态系统,开发者可以通过$.fn.extend()扩展功能,如jQuery UI提供了丰富的用户界面组件,jQuery Validation Plugin则用于表单验证。 7. **版本更新**:jQuery 3.x系列对旧的...

    jquery-easyui-1.3.5 文件

    同时,由于其良好的社区支持和活跃的更新,遇到问题时也能找到相应的解决方案。 总之,jQuery EasyUI 是一个强大的前端工具,通过其组件化的特性,让开发者能够专注于业务逻辑,而非繁琐的界面实现。了解并掌握 ...

    最新jquery-2.1.1.js以及jquery-2.1.1.min.js文件

    7. **插件生态**:jQuery拥有庞大的社区和丰富的插件库,如Bootstrap、jQuery UI等,扩展了其功能,满足各种需求。 总之,`jquery-2.1.1.js`和`jquery-2.1.1.min.js`为开发者提供了强大且易用的工具,无论是在开发...

    jquery-1.11.3.js 、jquery-1.11.3.min.js 【官方jquery包 js】

    jQuery的生态体系强大,拥有无数第三方插件,如Bootstrap、jQuery UI等,它们扩展了jQuery的功能,如日期选择器、轮播图等,满足了各种应用场景的需求。 8. **性能优化(Performance)** jQuery 1.11.3在性能上做...

    jquery-3.3.1.min

    - **插件生态**:jQuery拥有庞大的插件生态系统,如jQuery UI提供丰富的用户界面组件,jQuery Validation进行表单验证等。 总的来说,jQuery 3.3.1.min是前端开发者的重要工具,它通过提供简洁的API和优化的性能,...

    JQuery1.8.1(含1.8.1vsdoc智能提示)

    5. 插件生态系统:jQuery拥有丰富的插件库,如jQuery UI提供了一套完整的用户界面组件,而jQuery Mobile则针对移动设备进行了优化。 四、VSdoc的使用与优势 在Visual Studio中,只需引入带有VSdoc信息的jQuery库,...

    jquery-1.10.2.min.js

    6. **插件生态**:jQuery拥有丰富的插件生态系统,如jQuery UI、jQuery Validate等,它们为开发者提供了更多扩展功能,满足多样化的需求。 三、jQuery 1.10.2.min.js的版本意义 版本号1.10.2表明这是一个稳定版,...

    Jquery api

    在提供的文件中,jQuery UI 是一个知名的插件集合,包含了许多用户界面组件和特效。 **jQuery 版本差异** 在描述中提到了两个版本:1.7.2和1.8.3。这两个版本之间的主要区别在于修复了一些bug,增加了对新浏览器...

Global site tag (gtag.js) - Google Analytics