2016-11-08 2 views
2

Ich versuche, eine modale Fenster auf einem onClick EreignisWie effektiv nutzen onClick und EJS

Dies basiert anzuzeigen, in dem ich die onClick

<div class = "post-content"> 
 
    <a onClick = "<%"show()"%>"> <h6><center> <%= imageData[0].title%></center> </h6> </a> 
 
    <img src = "<%= imageData[o].associated_images[0].url%>"> 
 
    <center> <%= imageData[0].short_description%> </center> 
 
</div>

Dies ist die modal ist tue Fenster

<% if(number){%> 
 
    <div class = "single-preview"> 
 
    <h6><center> <%= imageData[0].title%></center> </h6> 
 
     <center><img src="<%=imageData[0].associated_images[0].url%>"style="width:720px height:405px;"> </center> 
 
     <center> <%= imageData[0].long_description%> </center> 
 
     <button class = "close-button"> &#215; </button> 
 
    </div> 
 
<%}%>
Und das i ist mein js

router.get(name, function(req, res) { 
 
    res.render('shows', { 
 
    number: false 
 
    }); 
 
});

Grundsätzlich Ich versuche, den Wert der Variablen number zu ändern, wenn show() genannt Datei.

Was ich versucht habe
a. Setzen der Show-Funktion auf der Serverseite
b. Setzen der Show-Funktion auf der Clientseite
c. die vielen verschiedenen Möglichkeiten, onclick zu verwenden, die ich hier gesehen habe
d. Deklarieren der Nummer Variable in Client-Seite <% var number = false%>

Nichts funktioniert für mich. Bitte hat jemand irgendwelche Ideen

Antwort

2

schreiben Sie eine Show-Funktion in Client-Seite, die eine Express-Route aufruft.

function show(){ 
$("#yourmodal").load("/showmodalroute"); 
} 

Aufruf dieser Funktion in Onclick

<a onClick = "show()"> 

// Schnellstraße

router.get("/showmodalroute", function(req, res) { 
    res.render('shows', { 
    number: false 
    }); 
}); 

wenn Sie jquery Dinge verwenden werden easy.JQuery Javascript-Bibliothek ist ,,, in Schmerz javascipr Sie müssen http rufen

function show() 
{ 
    var xmlhttp=new XMLHttpRequest(); 
    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
     document.getElementById('yourmodal').innerHTML=xmlhttp.responseText; 
     } 
    } 
xmlhttp.open("GET","/showmodalroute",true); 
xmlhttp.send(); 
} 

html //

<a onClick = "show()"> 
+0

ist die einzige Möglichkeit, mit Jquery zu bekommen dies getan? Ich frage, weil ich nicht weiß, wie man jquery benutzt, und das würde bedeuten, dass ich lernen müsste. –

+0

Ich endete mit jquery. Und du hast recht, jquery hat die Dinge leichter gemacht –