CODEWITHSUNDEEP
javascriptmysqlnode.jsexpresspug
xShirase
xShirase

Reputation: 12389

Node/Express/mysql How to make get SQL results within jade page?

I have a node/express app that I use to monitor a MySQL db of mine. My page goes like this :

Node :

app.get('/banners', function(req,res){
    connection.query("SELECT * FROM banner_store_idx WHERE id_type='1' ORDER BY id_banner ASC", function selectCb(err, results, fields) {
        if (err) {
            throw err;
        }
        res.render('banners', {
            title: results[0].title,
            results: results
        });
    });
});

Which goes to this Jade template :

!!!
html
    head
    body
    ul
    - each result in results
        li(id=result['name_store'])= result['name_store']
    div#AJAXresults(style='margin: 0 auto; width: 800px; height: 600px; margin: 0 0 20px 0; border: solid 1px #999; overflow-y: scroll;')

This part renders perfectly.

Now, what i'd like to do :

When user click on one of the list elements, it should make a Mysql SELECT and display the results of the table selected (name_store) inside div#AJAXresults.

I could use jquery, and make an ajax call via php, but it would defeat the purpose... I don't want to link to another page, which I know how to do, and I don't want a page refresh... What's your suggestions?

EDIT :

Can I do something like (inspired by another thread here):

$('#id of list elem').click(function() {
    $.get('/ajax', {id:elem_id}, function(result) {
        $('#AJAXresults').html(result);
    }
}

then in node 

app.get('/ajax', function(req,res){
connection.query("SELECT * FROM id ", function selectCb(err, results, fields) {
    if (err) {
        throw err;
    }
    res.send(results);
});
});

Upvotes: 1

Views: 2369

Answers (1)

BaNz
BaNz

Reputation: 202

You could do something like this :

Add a new route in express : 

app.get('/your/route/name', function(req,res) {
      var id = req.query.id; // get your id from ajax request

      ...

      res.send(render_html); 
});

Jade :

li.list-result(id=result['name_store'], data-id=result['id'])= result['name_store']

Javascript :

$('.list-result').click(function(){
    var id = {id: $(this).data("id")};
    $.ajax({
      type: "GET",
      url: "/your/route/name",
      data: id,
      success: function(data) {
          $("#AJAXresults").html(data);
      }
    });
);

I didn't test any of this code, but you get the idea :)

P.S. : Don't forget to sanatize your id in node.

Upvotes: 1

Related Questions