Question

我有以下jsp页面，我正在使用struts2-jquery-plugin-3.1.1

<script type="text/javascript">
function openDialog() {
    $.publish('openDialog');
}

</script>
</head>
<body>

<div id="detailContainer">
  <div id="header">
     <s:action name="ecu-info-header" var="dc"/>

<ul class="vMenu">
    <s:iterator var="ecus" value="ecuList" status="status">
    <s:url id="ecu" value="ecu-info-detail" escapeAmp="false">
        <s:param name="id" value="%{id}"></s:param>
        <s:param name="ecuName" value="name"></s:param>
        <s:param name="ajax" value="true"></s:param>
    </s:url>

    <li class="vMenuItem"><sj:a href="%{ecu}" requestType="GET" targets="detail" onclick="openDialog()" onCompleteTopics="closeDialog"><div class="vMenuItemText"><s:property value="description"/></div></sj:a></li>
    </s:iterator>
    </ul>

</div>

<div id="detail">
</div>
</div>
<div id="clear"></div>
<s:submit cssClass="vMenuItemText hidden" id="submit" type="button"
        label="Back" name="back"/>
<sj:dialog 
    id="myclickdialog" 
    autoOpen="false" 
    modal="true" 
    title="Please Wait ..... "
    closeOnEscape="false"
    openTopics="openDialog"
    closeTopics="closeDialog"
    overlayOpacity="0.85"
    showEffect="scale"
>
    <p class="instruction">Reading data from the vehicle</p><br /><br />
    <img id="loading" src="<%=request.getContextPath()%>/resources/images/loading.gif"/>

</sj:dialog>

</body>

第一次单击其中一个链接时，对话框会按预期打开和关闭，结果以div id =“details”加载。对任何链接进行第二次和随后的点击会导致重新加载新数据，但对话框永远不会重新打开。

编辑：

我已经采取了下面的sugestions并试图转换为纯JQuery，我仍然有同样的问题。

<script type="text/javascript">

$(document).ready(function() {
    $('#popup').dialog({ autoOpen: false })    
    $('#popup').dialog({ modal: true })             // set modal
    $('#popup').dialog({ closeOnEscape: false });       // prevent closing by pressing the escape key
    $('#popup').dialog({ dialogClass: 'no-close' });    // in conjunction with css hides the "x" to close button
    $('#popup').dialog({ title: 'Please wait ....'});
    $('.anchor').each(function() {
        $(this).click(function() {
            processDialog($(this).attr('href'));
            return false;
        });
    });
});

function openDialog() {

    $('#popup').dialog('open');
}


function processDialog(url) {
        openDialog();

        $.get(url, function(data) {
            $('#popup').dialog('close');
            $('#detail').html(data);

            });

        return false;
    }

</script>
</head>
<body>

<div id="detailContainer">
<div id="header">
<s:action name="ecu-info-header" var="dc"/>

<ul class="vMenu">
    <s:iterator var="ecus" value="ecuList" status="status">
    <s:url id="ecu" value="ecu-info-detail">
        <s:param name="id" value="%{id}"></s:param>
        <s:param name="ecuName" value="name"></s:param>
        <s:param name="ajax" value="true"></s:param>
    </s:url>

    <li class="vMenuItem"><s:a cssClass="anchor" href="%{ecu}"><div class="vMenuItemText"><s:property value="description"/></div></s:a></li>
    </s:iterator>
    </ul>

</div>

<div id="detail">
</div>

</div>
<div id="clear"></div>
<s:a cssClass="vMenuItemText" id="floatingButton" href="display-diagnostic-menu">Back</s:a>


<div id="popup" class="hidden">
<p class="instruction">Reading data from the vehicle</p><br /><br />
    <img id="loading" src="<%=request.getContextPath()%>/resources/images/loading.gif"   />
</div>

我点击第一个链接，对话框按预期打开，执行get请求，关闭对话框并刷新数据。任何后续尝试单击其中一个链接都会导致Firebug控制台报告“（#popup）.dialog不是函数”。刷新页面，一切都开始工作，但只有一次。

修改

我在http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog找到了博客条目，因此答案似乎是从我的jsp页面中删除对话框的div，并在初始化对话框时创建javascript。所以我现在得到的是

<script type="text/javascript">

var $dialog;

$(document).ready(function() {

    $dialog = $('<div></div>')
    .html('<p class="instruction">Reading data from the vehicle</p><br /><br /><img id="loading" src="<%=request.getContextPath()%>/resources/images/loading.gif"/>')
    .dialog({ autoOpen: false,    
              modal: true,              // set modal
              closeOnEscape: false,         // prevent closing by pressing the escape key
              dialogClass: 'no-close',  // in conjunction with css hides the "x" to close button
              title: 'Please wait ....'
              });
    $('.anchor').each(function() {
        $(this).click(function() {
            processDialog($(this).attr('href'));
            return false;
        });
    });
});

function processDialog(url) {
        $dialog.dialog('open');
        $('#detail').empty();

        $.get(url, function(data) {
            $('#detail').html(data);
            $dialog.dialog('close');


            });

        return false;
    }

</script>
</head>
<body>

<div id="detailContainer">
<div id="header">
<s:action name="ecu-info-header" var="dc"/>

<ul class="vMenu">
    <s:iterator var="ecus" value="ecuList" status="status">
    <s:url id="ecu" value="ecu-info-detail">
        <s:param name="id" value="%{id}"></s:param>
        <s:param name="ecuName" value="name"></s:param>
        <s:param name="ajax" value="true"></s:param>
    </s:url>

    <li class="vMenuItem"><s:a cssClass="anchor" href="%{ecu}"><div class="vMenuItemText"><s:property value="description"/></div></s:a></li>
    </s:iterator>
    </ul>

</div>

<div id="detail">
</div>

</div>
<div id="clear"></div>
<s:a cssClass="vMenuItemText" id="floatingButton" href="display-diagnostic-menu">Back</s:a>

</body>

为什么这样做而不是在jsp页面中引用div我不知道和会很感激解释。

Answer 1

您是否查看了浏览器调试控制台？

类似的错误：http://code.google.com/p/struts2-jquery/issues/detail?id=652

我建议使用javascript和jQuery代替struts2-jquery-plugin。它更灵活，更清晰。

Struts Jquery插件对话框只会打开一次

1 个答案: