У меня есть следующая страница 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". Второй и последующий щелчок по любой из ссылок приводит к перезагрузке свежих данных, но диалоговое окно никогда не открывается.
EDIT:
Я воспользовался приведенными ниже предложениями и попытался преобразовать их в чистый 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 не является функцией». Обновление страницы и все начинает работать, но опять же, только один раз.
EDIT
Я нашел запись в блоге по адресу http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog, и в результате мне кажется, что ответ состоит в том, чтобы удалить div для диалогового окна со страницы jsp и создать его 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>
Почему это работает вместо ссылки на div на странице jsp, я понятия не имею и
был бы признателен за объяснение.