CODEWITHSUNDEEP
javascriptjqueryajaxnode.jspug
Daniel Heinen
Daniel Heinen

Reputation: 45

Ajax with node.js/jade

I'm searching for a way to use ajax running on node.js, express and jade as template-engine without routing to subpages. I read this: Node, Express, Ajax, and Jade Example

But this doesn't work for me. I don't want to make a route to a partial part of page, so the user could access the partial page. I just want to serve a convertet jade file in a part of the website.

I think about something like this:

$( ".trigger" ).on( "click", function() {
    $( ".result" ).load( "ajax/test.jade" );
});

How could I do this without setting a route in node.js so the user could access the subpage without accessing the whole page.

Thank you for your answers.

Upvotes: 1

Views: 8344

Answers (4)

Vahid Alimohamadi
Vahid Alimohamadi

Reputation: 5868

I have a problem with ajax call

Server side:

router.get('/user/letterlist', function(req, res) {
    // ... some operations
    res.render('userLetterList', { title: 'test', rows : rows? rows: null, pageCount: pageCount,itemCount: itemCount });
});

Client side index.jade

extends layout
block content
div(id="userLettersList")
    button(type="button" class="btn btn-success")
        {success}
script.
    $(".btn").click(function(e){
        e.preventDefault();

        $.ajax({
            url: "/user/letterlist",
            success: function(data){
                $("#userLettersList").html(data) ;
            }
        });
    });

client side userLetterList.jade

table(id="UserLetters" class="table table-striped table-bordered")
  thead
   ....

The problem is when push on the button to load data into the div, it will retrieve and show, but the page redirect to nowhere with a blank page, after some m-seconds.

Upvotes: 0

matth
matth

Reputation: 6309

You could place a jade template (or HTML file) in the public folder on your website, assuming you have it set up.

For example, in the app.js:

app.use(express.static(__dirname + '/public'));

Place the template/file in (or any subfolder):

/public/example.html

Then you can use $.get to load the file, like the link you provided:

$.get('/example.html', function(result) {
    $('#test').html(result);
});

Upvotes: 0

Krasimir
Krasimir

Reputation: 13549

What if you send the file as a GET parameter:

var jade = require('jade'),
    fs = require('fs');

app.get('/ajax', function(req, res) {
    fs.readFile(req.query.file, 'utf8', function (err, data) {
        if (err) throw err;     
        var fn = jade.compile(data);
        var html = fn({});
        res.send(html);
    });
});

and send request like 

/ajax?file=test.jade

If you do the things like that you will have only one route.

Upvotes: 5

Pero P.
Pero P.

Reputation: 26992

(Still requires a route but) You could set up a route that only provides a valid response if it is an ajax request, and a 4xx if otherwise

app.get('/path', function(req, res) {
  if(req.xhr)
  {
    ...
  }
});

req.xhr Express docs.

Upvotes: 0

Related Questions