`

关于手机端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 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 api

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

    uploadify异步文件上传插件

    异步上传技术使得文件上传无需等待整个文件传输完成即可继续执行其他操作,提高了交互效率,减轻了服务器压力。以下是Uploadify插件的一些核心知识点和相关细节: 1. **异步上传原理**: Uploadify利用HTML5的File...

    jquery2.2.2

    例如,许多流行的插件如jQuery UI提供了丰富的界面组件,而jQuery Validation则提供了强大的表单验证功能。 总的来说,jQuery 2.2.2作为一款高效、易用的前端库,为开发者提供了强大且灵活的工具,极大地简化了Web...

Global site tag (gtag.js) - Google Analytics