EasyUI Forum
March 02, 2021, 10:08:02 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: EasyUI datagrid in iFrame can't display records in first click loading or IE  (Read 12569 times)
wonderone
Newbie
*
Posts: 2


View Profile Email
« on: January 07, 2014, 08:46:05 PM »

I have one iFrame which include the datagrid in my JSP page, the iFrame will show only by clicking the tab.

The problem is that when I click the Announcement Tab to show the iFrame, the databrid only shows the pagination bar, no records displayed.

When I click the refresh or next page button, the data will display.

I debuged and found that, the datagrid was rendered.

The main page was like below:
Code:
<%@ page contentType="text/html; charset=utf-8"%>
<head>
    <title>首页</title>
    <script type="text/javascript" src="<%=request.getContextPath()%>/StaticResource/jslib/jquery-easyui-1.3.4/jquery-1.8.0.min.js"></script>
      <style type="text/css">
        .div_style{
            width:770px; height:740px;border: 0px solid black;
         }

        .tabNav_sq{
            width:600px; height:42px; margin:0; padding:0;}
        .tabNav_sq li{float:left; height:42px;margin-right:5px;}

         .tabNav_sq li a{display:block;float:left; width:120px;height:42px; line-height:42px; position:relative; z-index:2;text-align:center;
                  color:#333;cursor:pointer; border:1px solid #fead21; border-bottom:0; font-weight:bolder; font-size:14px;
                  border-radius-topleft:5px;
                  border-radius-topright:5px;
                  -webkit-border-radius-topleft:5px;
                  -webkit-border-radius-topright:5px;
                  -moz-border-radius-topleft:5px;
                  -moz-border-radius-topright:5px;
                  background: #fff;
                  background: -moz-linear-gradient(top, #feda98 0%, #fff4e0 100%);/* FF3.6 */
                  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feda98), color-stop(100%,#fff4e0));
                  background: -webkit-linear-gradient(top, #feda98 0%,#fff4e0 100%); /* Chrome 10+, Saf5.1+ */
                  background: -o-linear-gradient(top, #feda98 0%,#fff4e0 100%); /* Opera 11.10+ */
                  background: -ms-linear-gradient(top, feda98 0%,#fff4e0 100%);/* IE10 */
                  background: linear-gradient(top, #feda98 0%,#fff4e0 100%);
                  behavior:url(../js/ie-css3.htc);
        }
    </style>
    <script>
        function show(){
            $("#ann").show();
        }

    </script>
</head>
<body>
    <div id="wrapper">
       <div class="tpaicWebAlipay fl w800">
            <div class="tab_containerfix cb mt15">
                 <div class="tabNavWrap">
                    <ul class="tabNav_sq">
                         <li><a href="javascript:void(0);" ><span>Line data</span></a></li>
                         <li><a href="javascript:void(0);" onclick="show();"><span>Announcement</span></a></li>
                    </ul>
                </div>
                 <div style="display:none;">
                     <div>
                     </div>
                </div>
                 <div  id="ann" class="b-gray lh200 tabCont" style="display:none;">
                     <div class="div_style">
                        <iframe id="announcementForm" name="announcementForm"  width="100%" height="100%"  frameborder="0" scrolling="no"
                                src="<%=request.getContextPath()%>/system/announcement/home_list.do"></iframe>
                     </div>  
                </div>
           </div>
        </div>
    </div>
</body>
</html>


the /system/announcement/home_list.do request will direct to the page like below:

Code:
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>通知公告</title>
<link rel="stylesheet" type="text/css"
    href="<%=request.getContextPath()%>/StaticResource/jslib/jquery-easyui-1.3.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
    href="<%=request.getContextPath()%>/StaticResource/jslib/jquery-easyui-1.3.4/themes/icon.css">
<script type="text/javascript"
    src="<%=request.getContextPath()%>/StaticResource/jslib/jquery-easyui-1.3.4/jquery-1.8.0.min.js"></script>
<script type="text/javascript"
    src="<%=request.getContextPath()%>/StaticResource/jslib/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript"
    src="<%=request.getContextPath()%>/StaticResource/jslib/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"
    charset="UTF-8"></script>
    <script>
        $(function(){
            $("#dg").datagrid({
                width:500,
                height:400,
                url:'${pageContext.request.contextPath}/system/announcement/list_json.do?',
                singleSelect:true,
                pageSize:10,
                pagination:true,
                pageList : [ 10, 20, 30, 40, 50],  
                loadMsg: 'Loading...,wait!',
                columns:[[
                            {field:'title',title:'title',width:150,align:'center'},
                            {field:'beginDate',title:'beginDate',width:150,align:'center'},
                            {field:'endDate',title:'endDate',width:150,align:'center'},
                          ]],
                onLoadSuccess:function(e) {
                    var a = 'aa';
                }
            });
            $('#dg').datagrid('getSelected');
            var b = "ccc";
        });
    </script>
</head>
<body style="width:100%;heighgt:300px;overflow:auto;">
    <div>
        <div style="position:relative; overflow:auto;">
            <table id="dg" title="Announcement Show">
            </table>
        </div>
    </div>
</body>
</html>

All worked perfectly good for chrome, this problem only happened in IE. Can anyone tell me why and the workaround for this.

The result is like below screenshots.

I also found that, when the main page was first loaded, there is no element for $(".datagrid-view2 .datagrid-body"). After I click the "announcement tab", the element for $(".datagrid-view2 .datagrid-body") exists. I wonder why it not display when it exists. And in chrome browser, this element exists when the main page first loaded.

I don't know if it is a bug for EasyUI to handle browser compatibility.

 
« Last Edit: January 07, 2014, 09:28:36 PM by wonderone » Logged
pjobbins
Newbie
*
Posts: 4


View Profile
« Reply #1 on: January 20, 2021, 04:20:17 PM »

For anyone who stumbles upon this post (as I did).  I had a very similar problem recently; an accordion where each panel linked to a page containing a datagrid.  When expanding any accordion panel in IE the panel would be blank.  Collapsing then re-expanding the panel and the datagrid would be displayed.  This only happened for IE.  Edge, Chrome, Firefox and Safari all worked fine; i.e. the grid would be displayed the first time the panel was expanded.

My solution was to hook into the panels onLoad() event and call the panels resize() method.  This seems to trigger the redraw of the panel and thus shows the grid (NB I tried refresh() but this did not work).  Also the onLoad() event only gets called once (per panel), not every time I expand it.  There does not appear to be any adverse affects in the other browsers.

Code:
...
function fixForIE(id) {
  $('#aa').accordion('getPanel', id - 1).panel('resize');
};

$(document).ready(function () {
...

  for (var group in productGroups) {

    var p = $('#aa').accordion('add', {
      title: group + '<span style=\'float:right;margin-right:10px;\'>' + productGroups[group].length + '</span>',
      content: '<div style="padding:10px"></div>',
      selected: false
    });

    $('#aa').accordion('getPanel', $('#aa').accordion('panels').length - 1).panel({
      id: $('#aa').accordion('panels').length,
      href: 'Products?index=' + ($('#aa').accordion('panels').length - 1),
      onLoad: function () { fixForIE(parseInt(this.id)); }
    });

  }

...
});

I am using jQuery 3.5.1 and jQuery EasyUI 1.9.7
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!