Following a GET Ajax Request, how to get a new window to be open and render a EJS view?

StackOverflow https://stackoverflow.com/questions/23545869

Question

On the front-end, I would like, following a GET Ajax Request, a new window to be open and render a EJS view.

The GET Request is already correctly handled on the server-side: when I ask for the relevant URL in my browser, I actually get the EJS view rendered, that is what my server is supposed to do (although it is in the same window, because I would prefer the EJS view to be rendered in a new window).

But when the GET Ajax Request is executed from a JS script on the front-end, I can see in the console that the server is handling the request, but the EJS view is not rendered at all.

How could I do to (1) actually get the EJS view rendered (2) in a new window? Thank your for your help.

I currently have the following code on the front-end:

$.ajax({ 
   type: "GET",
   url: '/selection/oui/?value='+value, // `value` is previously defined
   success: function(data)
   { // nothing here for the moment
     // if I write `alert(data);` here it correctly displays an alert containing what the EJS view would contain
   }
   });

This is the back-end code (in Node.js, using Express), if it is useful:

app.get('/selection/oui/', function(req, res) { 
  var celien = req.param("value"); 
  // parts omitted, but I controlled they work well
   res.render('selection_form.ejs',{cetarticle:cetarticle}); // the EJS view and the data it takes
});
Was it helpful?

Solution

I see that your back-end code fully renders the EJS view, merging the template and data to produce HTML. If the rendered view represents a complete HTML page, then you should be able to simply open a new window and supply the URL:

var url = '/selection/oui/?value=' + value;
window.open(url);

If the rendered view is HTML markup that must be inserted in the page, you will need to add another page to your application, and open that page.

window.open('EJSView.html?name=value');

I haven't tested this, but your new page must load the EJS view and append it to an element in the page.

<html>
<head>
    <title>EJS View</title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        $(function () {
            var querystring = 'name=value';
            var url = '/selection/oui/?' + querystring;
            $.get(url, function (data) {
                $("#ejs-view").append(data);
            });
        });
</script>
</head>
<body>
<div id="ejs-view"></div>
</body>
</html>

If you need to pass a query string to the new window, see How can I get query string values in JavaScript? for ideas how your new window can parse the values.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top