2013-04-23 17 views
5

enthalten Ich habe eine Schaltfläche ausloggen. Nach dem Abmelden muss ich eine andere Seite anzeigen. Wie kann ich das mit JavaScript machen? Kann mir bitte jemand helfen?Wie ein JSP in einem anderen JSP mit Javascript

Mein Code:

<s:form name="LogoutAction" 
       id="LogoutAction" action="logout"> 
    <span class="inlayField2"> 
    <s:a href="logout" cssClass="planTabHeader" id="logoutId"> <img src="../../KY/images/common/header/lock.png" alt="logout" style="border: none;background-color: transparent;" /> &nbsp;Log out</s:a></span> 
    </s:form> 

Ich versuchte dies:

$('#logoutId').click(function(event) { 

    $('#logoutdiv').load('ConfirmationPopup.jsp'); 
}); 
+0

also, sind Sie auf einen Fehler gestoßen? –

+0

no. Ich bekomme keinen Fehler. Die Seite wird nicht geladen – mukund

+0

versuchen, in JavaScript-Konsole einchecken. –

Antwort

2

Sie können nicht include eine JSP in respone zu einem Klick auf der Client-Seite, weil es sich um eine serverseitige Technologie ist. Sie können den gewünschten HTML-Code vor dem Senden in die Seite einfügen, diesen Bereich mit CSS ausblenden und ihn dann als Antwort auf einen Mausklick mit JavaScript sichtbar machen. Die include wäre bereits auf dem Server passiert, bevor die Seite an den Client gesendet wurde . Sie können so etwas wie diese:

<div id="confirmPopup" style="display:hidden;"> 
     <%@ include file="ConfirmationPopup.jsp" %> 
</div> 
<script> 
    $('#logoutId').click(function(event) { 
    document.getElementById("confirmPopup").style.display="block"; 
    }); 
</script> 
+0

Ich habe ein Problem hier ... Ich erhalte die Bestätigung popup.jsp jedes Mal, wenn ich die Seite laden, die die Abmeldung enthält. Es wird nicht angezeigt, wenn auf die Abmeldung geklickt wird. – mukund

+0

Könnten Sie mir bitte dabei helfen? – mukund

3

Sie Ajax verwenden könnten die HTML aus dem 2. jsp zu bekommen und dann auf das DOM oder zum innerHTML- eines Elements hängen.

Haupt Page.jsp

<span id=confirmSpan></span> 
<script language="Javascript"> 
function xmlhttpPost(strURL, queryStr) { 
    var xmlHttpReq = false; 
    var self = this; 
    // Mozilla/Safari, opera etc 
    if (window.XMLHttpRequest) { 
     self.xmlHttpReq = new XMLHttpRequest(); 
    } 
    // IE 
    else if (window.ActiveXObject) { 
     self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 
    }else{ 
     alert("no ajax") 
     return 
    } 
    self.xmlHttpReq.open('POST', strURL, true); 
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    self.xmlHttpReq.onreadystatechange = function() { 
     if (self.xmlHttpReq.readyState == 4) { 
      updatepageConfirm(self.xmlHttpReq.responseText); 
     } 
    } 
    self.xmlHttpReq.send(queryStr); 
} 


function updatepageConfirm(str){ 
    document.getElementById("confirmSpan").innerHTML = str; 
} 
function logout1(){ 
xmlhttpPost("confirm.html");//http://sel2in.com/pages/prog/html/ajax/confirm.html", "") 
} 
</script> 
</head> 
<body> 
<form id="search" action="/search" method="get"> 
<input type=button onclick=logout1() value=logout> 
</form > 

Musterseite mit Code bestätigen -> jede gültige html für die div könnte confirm.jsp Aktion Do ... Sind Sie sicher?

// todo Form hier html der Spanne/Pop-up/script/css -> wie ein iframe

Sieht aus wie Sie eine Bestätigung angezeigt werden soll - einige UI fragen tun Sie wirklich abmelden wollen?

Der beste Weg für das wäre eine leere Spanne mit der ID „logoutConfirmSpan“ dann auf Klick auf Logout zu machen, gehen Sie wie Ajax (asynchroner Modus -> false, so dass es inline geschieht), um die HTML-Markup und setzen Sie es an die die Innerhtml der Spanne

Das HTML sollte so gültig sein, dass es die Benutzeroberfläche erscheinen und das Formular wirklich abmelden.

See Replace inner HTML of a div with Ajax response sagt Ihnen, wie Ajax verwenden, um mit jQuery

Einfache Beispiel:

HTML snippets

<span id = 'logoutConfirmSpan'> </span> 
<script> 
// call ajax, with the response call setHtmlForConfirm 
function setHtmlForConfirm(req) 
{ 
    document.getElementById('logoutConfirmSpan').innerHTML = req.responseText; 
} 
//req.responseText should have the html to show the confirm UI and form to submit yes/ no 
</script> 
+0

könnten Sie ein bisschen mehr klar sein, oder könnten Sie mir bitte einige Beispiele zeigen, da ich mit Ajax keine Erfahrung nicht haben – mukund

+0

Leider bekomme ich didnt Sie – mukund

+0

vorschlagen, dass Sie die Stacktrace gehen durch http://stackoverflow.com/a/14851734/1643558 Du fragst das Gleiche - siehe die Antwort dort. Wenn du etwas Hintergrundwissen über Ajax haben möchtest, siehe http://www.quirksmode.org/blog/archives/2005/12/the_ajax_response.html Suche nach "HTML Snippets" – tgkprog

2

Sie eine einfache GET Anfrage können Sie die HTML durch den sekundären .jsp Seite gerendert holen .Grundsätzlich , aus Ajax, mit jQuery können Sie tun:

$.get({ 
    url: "mysite.com/otherpage.jsp", 
    data: "some data you want to send, optional", 
    success: function(data, textStatus, jqXhr)//the response data, the ajax request status and the ajax request object itself { 
     $('#someDiv').html(data); 
    } 
}); 
1

1) Erstellen Sie eine <div id='someID'></div> während anfängliche Laden der Seite

2) auf die Schaltfläche klicken, durch Javascript einen Iframe mit Ihrem neuen jsp erstellen url

3) Sobald der iframe Inhalt zeigt es als Popup vielleicht im Dialog Fenster geladen

+0

Ich habe noch nie iframes und alle verwendet. Könntest du mir bitte ein bisschen mehr erklären oder mir ein Beispiel zeigen? – mukund

+0

von hier starten http://www.w3schools.com/tags/tag_iframe.asp – Madhu

+0

I iframes nicht brauchen ... Ich habe bereits eine Seite habe ... Ich brauche diese Seite zu zeigen, mit Hilfe von Javascript ... Wie kann ich tun dass ... weil wir gleiches Format der Bestätigungsmeldungen überall verwenden und ich nicht brauchen, um es – mukund

0

Eine weitere Möglichkeit, es tun kann eine Spannweite und auf Klick zu halten tun: http://sel2in.com/pages/prog/html/ajax/aPage2.html1

<span id=confirmSpan></span> 
<script language="Javascript"> 

function logout1(){ 
    iconfirmSpan = document.getElementById("confirmSpan") 
    if (!confirmSpan){ 
     alert("Error no confirmSpan contact support!"); 
    } 
    confirmSpan.innerHTML = "<iframe src=\"http://sel2in.com/pages/prog/html/ajax/confirm.html\" height=400 width=700></iframe>" 
    //in real can keep height 1 width 1 and location off page if you want it just to load elements, scripts etc 
} 
</script> 
</head> 
<body> 
<form id="search" action="/search" method="get"> 
<input type=button onclick=logout1() value="Do Action"> 
</form > 
+0

aber Ajax ist leistungsfähiger für Workflows und so, aber das könnte sein genug, wenn nur 1 Aktion – tgkprog

0

AJAX ist das, was Sie suchen.

empfehle ich Ihnen sehr AJAX Anrufe mit jQuery (showcase -> div) durchzuführen, aber in Struts2 können Sie versuchen, mit der Dojo Plugin in einem zweiten veraltet, ohne die Notwendigkeit, jede Bibliothek herunterladen, nur um Ihnen ein Idee.

<%@ taglib prefix="s" uri="/struts-tags"  %> 
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %> 

<head>  
    <sx:head/> 
    <script> 
     function loadAjax(){ 
      var div = dojo.widget.byId("myDiv"); 
      div.href = "yourAjaxAction.action"; 
      div.refresh(); 
     } 
    </script> 
</head> 
<body> 
    <input type="button" 
      value="Include a JSP fragment dynamically" 
      onclick="loadAjax();"/> 

    <sx:div id="myDiv"> </sx:div> 

</body> 

Und dann Ihre yourAjaxAction.action muss Return on SUCCESS der JSP-Snippet Sie einschließen möchten.