Ich habe die folgende jsp Seite, und ich bin mit struts2-Jquery-Plugin-3.1.1Struts jQuery-Plugin-Dialog wird nur einmal öffnen
<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>
Das ersten Mal, dass ich auf einem des Link klicken öffnet und schließt sich das Dialogfeld erwartungsgemäß mit den Ergebnissen, die in div id = "details" geladen wurden. Der zweite und nachfolgende Klick auf einen der Links führt dazu, dass die frischen Daten erneut geladen werden, aber das Dialogfeld wird nie wieder geöffnet.
EDIT:
ich die sugestions genommen habe unten und versucht, reine JQuery zu konvertieren, und ich habe immer noch das gleiche Problem.
<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>
Erste Link ich auf, öffnet sich der Dialog wie erwartet, die GET-Anforderung ausführt, wird der Dialog geschlossen und die Daten aktualisiert. Jeder nachfolgende Versuch, auf einen der Links zu klicken, führt zur Firebug-Konsolenmeldung "(#popup) .dialog ist keine Funktion". Aktualisieren der Seite und alles beginnt zu arbeiten, aber wieder nur einmal.
EDIT
fand ich den Blog-Eintrag bei http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog und als Ergebnis scheint die Antwort zu sein, um die div für den Dialog von meiner jsp Seite zu entfernen und Javascript erstellen, wenn der Dialog initialisiert wird. Also, was ich jetzt habe ist
<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>
Warum das funktioniert stattdessen ein div in der jsp Seite der Referenzierung ich keine Ahnung habe und würde für eine Erklärung dankbar.
+1 für das Vorschlagen einfacher Jquery als flexibler und haben mehr Kontrolle –
@UmeshAwasthi Ich möchte wissen, was die Vorteile sind, die wir mit Struts2-jquery-plugin abgesehen von Ausgaben im Vergleich zu einfachen jquery haben. –
@MohanaRaoSV In struts2-jquery-plugin hast du einige Tags und nur. Wenn Sie etwas härter machen wollen, wird es unmöglich sein. In jQuery können Sie alles machen. – gooogenot