Nodejs/Express noob update page view no reload - node.js

Question

I am using Node v.0.10.29 on Win XP SP3.
I am new to Node/Express.
I am trying to learn Node/Express by duplicating a existing PHP project.
http://stevenjsteele.com/database/
The PHP project allows the user to build a list of items
from either the materials, tools or equipment tables needed for a project,
without a page reload.
What I am having a hard time with (don't understand) is:
With the PHP project I can change tables using the select table
drop down without a page reload. This is done with a PHP echo and:
xmlHttp.open("POST","getpage.php?tablename="+str,true);
I initialize the app with:
var express = require('express'),
request = require('request'),
requirejs = require('requirejs'),
mysql = require('mysql'), // node-mysql module
path = require('path'),
bodyParser = require('body-parser'),
app = express();
var mh_connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password: ''
});
mh_connection.connect();
var materialhandler = router.route('/materialhandler');
materialhandler.get(function(req,res){
selecttools = 'tools';
selectelectrical = 'electrical';
selectequipment = 'equipment';
mh_connection.query('use materialhandler');
var strQuery = 'SELECT * FROM materialhandler.tools ORDER BY item_id';
mh_connection.query( strQuery, function(err, rows){
if(err) {
throw err;
}else{
tablename='Tools';
res.render('materialhandler',{title:"page title",data:rows});
res.end("");
}
});
});
In my node/express template (which is html) I use:
For the select option dropdown inside of a form,
I use: onchange="getData()"
<form id="theForm" action="/materialhandler">
<div class="tablepicker two-thirds column">
<select id="selectTable" onchange="getData()" class="selectpicker" name="selectpicker">
<optgroup>
<option name="" value="">Select Table</option>
<option name="tools" value="tools"><%=selecttools%></option>
<option name="electrical" value="electrical"><%=selectelectrical</option>
<option name="equipment" value="equipment"><%=selectequipment%</option>
</optgroup>
</select>
</div>
</form>
function getData() {
//console.log('begin');
var http = new XMLHttpRequest();
var selectedTable = selectTable.options[selectTable.selectedIndex].value;
http.open("POST", 'http://localhost:3000/materialhandler?selectpicker='+selectedTable, true);
http.setRequestHeader("Content-type", "application/x-www-form urlencoded");
http.onreadystatechange = function() {
console.log('onreadystatechange');
if (http.readyState == 4 && http.status == 200) {
//alert(http.responseText);
}
else {
console.log('readyState=' + http.readyState + ', status: ' + http.status);
}
}
//console.log('sending...')
http.send(selectedTable);
console.log(selectedTable)
//console.log('end');
$('#theForm').submit();
}
In terminal window console.log shows the selected table.
I am trying to change the tables without a page reload.
As I said at beginning I am just starting to learn this paradigm.
Any help or pointing in the right direction is appreciated.
Thanks.

Answer 1

The $('#theForm').submit(); is what's causing your page reload, but instead of doing it that way you can make your post request directly with javascript. jQuery would be a better alternative to XMLHttpRequest.
Instead of your getData() function, you can hook up some javascript to listen for select changes, and post them to your server like so:
$('#selectTable').on('change', function() {
$.post("materialhandler?selectpicker=" + $(this).val());
}