Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Update part of a page in jade?

I'm trying to make a search and send back the result to the same site, I've got the search to work but I can't get the result to be sent back. I want the start site to render the information without page reload.

How can I send the search result back to the index.jade page without having to update it?

function pagelist(items, res) {
    var document='';
    var db = db_login;
    if ( items != null){
            items.forEach(function(item) {
            document += '<a href=share/'+item._id+' class="searchElement">'
            document += item.document 
            document += '</div>'
        })
        if(document != ''){
            res.send(document);
        }else{
        }
    }
}   

index.jade

extends layout
block content
    block child

child.jade

extends index
block child
    !{document}
like image 246
josef Avatar asked Nov 03 '25 04:11

josef


1 Answers

You can do it the following way:

First, you could update your index.jade like this:

extends layout
block content
    #content
        block child

And then, there should be some sort of function you call to get your results. I'll call it getResults. In the callback of that function you can now do the following:

getResults(function(results){
    document.getElementById("content").innerHTML = results;
});

I hope that helps.

UPDATE

I'll give you a complete example:

server.js

var express = require("express");

var i = 0;
function getResults(cb){
    cb("<div>Result "+(i++)+"</div><div>Result "+(i++)+"</div><div>Result "+(i++)+"</div>");
}

var app = express();
app.set("view engine","jade");
app.get("/",function(req,res){
    getResults(function(results){   
        res.render("page",{results:results});
    });
});
app.get("/results",function(req,res){
    getResults(function(results){       
        res.writeHead(200,"OK",{"Content-Type":"text/html"});
        res.end(results);
    });
});

app.listen(80);

views/page.jade

doctype html
html
    head
        script.
            function update(){
                var req = new XMLHttpRequest();
                req.open("GET","/results");
                req.onreadystatechange = function(){
                    if(req.readyState == 4){
                        document.getElementById("content").innerHTML = req.responseText;
                    }
                }
                req.send();
            }
    body
        #content!= results
        input(type="button",value="Update",onclick="update()")

Run it with node server.js and visit localhost. You should learn from it how it's done ;)

like image 52
Van Coding Avatar answered Nov 04 '25 20:11

Van Coding



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!