I have hunted around and cannot find the solution here. I am using Node with Express Handlebars and trying to use jquery on a button for navigation.
If I type an address into the browser's address bar the routes.js and controller file item.js behave correctly. But if I make a call using jquery, the routes.js sends the message to the item.js correctly, but then nothing happens.
Here's the relevant parts of the code (more can be supplied if this is not sufficient):
My button html:
<button class="btn btn-primary btn-lg btn-block" id="btn-item" data-id="{{item.uniqueId}}">Item</button>
My jquery call:
$(function(){
$('#btn-item').on('click', function(event) {
event.preventDefault();
var itemId = $(this).data('id');
console.log("I am itemId = " + itemId);
$.get('/item/' + itemId).done(function(data) {
});
});
});
Note: that console.log message gets printed correctly.
Going over to the routes.js file:
var item = require('../controllers/item'); //imports item module
router.get('/item/:item_id', item.index);
The item.js controller file that was imported:
var fs = require('fs');
var path = require('path');
module.exports = {
index: function(req, res) {
var viewModel = {
item: {uniqueId: 1}
};
console.log("In item.js!!!!");
res.render('item', viewModel); //Handlebars file displays correctly
}
};
And here, too, the console.log output appears correctly.
As I mentioned at the top, if I type localhost:3001/item/1 into the browser address bar, everything is rendered correctly. But when I try to call this using jquery I get all my console messages and a GET item/1 appears in the node console as well, but the browser doesn't update.
Any clues?
The problem is you are correctly getting the content, but then discarding the results. You need to do something in the done event handler you have hanging off the $.get call.
For now put an alert in there and verify it gets called. Then you will need to do a replace of the page content, or the content of a containing element in order to see the results.
If you wanted to load a partial view there are several ways to do so. Say you had a DIV in your markup that took up part of the page (or perhaps a majority of the page.
<div id="sidePanel" class="panels" ></div>
Then assuming the url returns a partial html view (not a full page) then you could load that up using jQuery.
$(function(){
$('#btn-item').on('click', function(event) {
event.preventDefault();
var itemId = $(this).data('id');
console.log("I am itemId = " + itemId);
$.get('/item/' + itemId).done(function(data) {
$('#sidePanel').html(data);
});
//alternate way not using get
$('#sidePanel').load('/item/' + itemId);
//Also, here is a neat way to use load
//note the selector used at the end here. It is optional
//if provided it will load the result, perform the selector
//and only load in the content from the selected element
$('#sidePanel').load('/item/' + itemId +' #panelSource');
});
});