Updating select box with Ajax, JavaScript and Webmatrix - sql

Question

I'm very new to Ajax.
What I'm trying to achieve, I would imagine, is fairly common. I have 2 dropdown boxes, referencing my database, these are called "area" and "resort". The idea is that when i choose and area from the first boxes, it ONLY shows resorts within that area in the second box.
Here is my form:
<div id ="homepage-form-div" class="row">
<form id ="homepage-form"action=" /Search1.cshtml">
<div class="span3">
<label>Area:</label>
<select name="area">
<option value="">Any</option>
#foreach(var row in qlistarea){
<option value="">#row.AreaName</option>
}
</select>
</div>
<div class="span3">
<label>Resort:</label>
<select name="resort">
<option value="">Any</option>
#foreach(var row in qlistresort){
<option value="">#row.ResortName</option>
}
</select>
</div>
<button type="submit" class="btn btn-default" value="Submit" style="p">Go!</button>
</form>
</div>
I thought it might be useful to see my current SQL code:
var listarea = "SELECT DISTINCT AreaName FROM ResortInfo";
var qlistarea = db.Query(listarea);
var listresort = "SELECT DISTINCT ResortName FROM ResortInfo";
var qlistresort = db.Query(listresort);
I'm guessing I'll need to somehow add a "+ WHERE AreaName = something" to the second query, dependant on the result of the AJAX call right?

Answer 1

Ok, you are using Razor syntax? Lets the show begin. And hey, arent you the same guy?
First I will tell you the basics of what I use.
I use the click keyup or change events.
I update the content of the body on ajax calls.
You need some basic tutorials buddy! Learn ASP.NET, then Learn jQuery Ajax! That will be simple.
My humble request to you:
Buddy please atleast once search for the code, before pasting it here. You will get alot of downvotes and might get blocked for posting more questions here. Please search for questions first. However this is the code.
Ok, to create the code:
I am going to post the code that works for me. Ok?
Here is the main page content:
#{
Layout = "~/_SiteLayout.cshtml";
}
<script>
$(document).ready(function () {
$('#area').change(function () {
$.ajax({
url: "testtworesult",
data: "type=resortupdate&resval=" + $('#area').val(),
success: function (data) {
$('#resort').html(data);
}
});
});
$('.btn').click(function () {
$.ajax({
url: "testtworesult",
data: "type=submit&area=" + $('#area').val() + "&res=" +
$('#resort').val(),
success: function (data) {
$('#result').html(data);
}
});
});
});
</script>
<div id ="homepage-form-div" class="row">
<div class="span3">
<label>Area:</label>
<select id="area">
<option value="">Any</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="span3">
<label>Resort:</label>
<select id="resort">
<option value="">Any</option>
<option value="Love">Love</option>
<option value="Hate">Hate</option>
</select>
</div>
<button type="submit" class="btn btn-default" value="Submit" style="p">Go!</button>
<div style="font-weight: bold; margin-top: 20px;" id="result"></div>
</div>
Then the ajax page:
#{
var db = Database.Open("StayInFlorida");
var getresortval = Request.QueryString["resval"];
var type = Request.QueryString["type"];
var res = Request.QueryString["res"];
var area = Request.QueryString["area"];
var listresort = "SELECT DISTINCT ResortName FROM ResortInfo WHERE AreaName = '#0'";
var qlistresort = db.Query(listresort, getresortval);
if(type == "resortupdate") {
if(getresortval == "Kissimmee") {
Response.Write ("<option value='kissimmee'>Kissimmee</option");
}
if(getresortval == "Davenport") {
Response.Write("<option value='davenport'>Davenport</option");
}
} else if(type == "submit") {
Response.Write(#"You selected the Resort!<br>
Your area was: " + area + #".<br>
And your resort was: " + res + #". Hope you have a great trip!");
}
}
This won't save the content in Database, you will need to use INSERT INTO for that. Then you will require SELECT * FROM to select the data. I have simply used Response.Write().
Good luck.

Answer 2

For the AJAX call, you need a function AJAX can call which houses the Resort query after the user selects an Area. I'm not familiar with Razor or Webmatrix, so here's a pseudo-function (based on PHP) that you might be able to translate to your environment:
if (isset($_POST['area'])) set_resort(); /*AJAX will set $_POST['area'], then do function that returns output to AJAX*/
. . .
function set_resort() {
var listresort = "SELECT DISTINCT ResortName FROM ResortInfo WHERE AreaName = " $_POST['area']; /*make sure you escape that variable, however you do that in your syntax*/
var qlistresort = db.Query(listresort);
var resortArray = array(); /*or however you make arrays in your syntax*/
#foreach(var row in qlistresort){
resortArray[] = #row.ResortName; /*append each resort name to array*/
}
echo json_encode(#resortArray); /*JSON is preferred way to echo array back to AJAX*/
}
Your HTML would look like...
<div id ="homepage-form-div" class="row">
<form id ="homepage-form"action=" /Search1.cshtml">
<div class="span3">
<label>Area:</label>
<select id="areaSelect" name="area"> <!-- add an ID for easier jQuery selection -->
<option value="">Any</option>
#foreach(var row in qlistarea){
<option value="">#row.AreaName</option>
}
</select>
</div>
<div class="span3">
<label>Resort:</label>
<select id="resortSelect" name="resort"> <!-- add an ID for easier jQuery selection -->
<option value="">Any</option>
</select>
</div>
<button type="submit" class="btn btn-default" value="Submit" style="p">Go!</button>
</form>
</div>
Finally, your jQuery AJAX call would be like:
$('#areaSelect').on('change', function() {
var str = $(this).serialize();
$.ajax({
type: 'POST',
url: /*URL of your page*/
dataType: 'json',
data: str,
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown + '\n' + textStatus);
},
success: function(msg) {
$.each(msg, function(index, value) {
$('#resortSelect').append('<option value=' + index + '>' + value + '</option>'; /*add each resort from the set_resort() query to the resort select input*/
});
});
});