How to effectively use onClick and EJS

Question

I am trying to display a modal window based on an onClick event

this is where i'm doing the 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>

This is the modal window

<% 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>
<%}%>

And this is my js file

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

Basically I'm trying to change the value of the variable number when show() is called.

What I've tried
a. putting the show function in the serverside
b. putting the show function in the client side
c. the many different way to use onclick that I've seen here
d. declaring the number variable in client side <% var number = false%>

Nothing is working for me. Please does anyone have any ideas

Solution

Write a show function in client side which calls an express route:

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

Call the function in onClick:

<a onClick = "show()">

The express route:

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

If you use JQuery things will be easier. (JQuery is a javascript library.) In plain javascipt, you'll have to make a http call:

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()">

Comments

[Admin]

is using jquery the only way to get this done? I'm asking because I don't know how to use jquery and that'd mean I'd have to learn.

[Admin]

I ended up using jquery. And you are right jquery made things easier