Struts的jQuery插件对话框将只开一次

我有如下的JSP页面和我使用的struts2-jQuery的插件 - 3.1.1Struts的jQuery插件对话框将只开一次

<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。

来源

2012-04-02 user497087

你看过浏览器的调试控制台吗？

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

我建议使用JavaScript和jQuery代替struts2的，jQuery的插件。它更加灵活和清晰。

来源

2012-04-02 10:39:44 gooogenot

+1建议简单的JQuery作为其更灵活，更有控制 – 2012-04-02 11:51:15

@UmeshAwasthi我想知道我们使用struts2-jquery插件除了与普通jquery相比的问题有什么好处。 – 2012-04-02 18:19:00

@MohanaRaoSV在struts2-jquery-plugin中，你只有一些标签。如果你想让事情变得更加艰难，那将是不可能的。在jQuery中，你可以做到一切。 – gooogenot 2012-04-02 18:25:22

Struts的jQuery插件对话框将只开一次

回答

相关问题