collint25 collint25 - 1 month ago 5
Ajax Question

JQuery AJAX - Populating a textbox and dropbown box

This is my first time using JQuery AJAX so I’m not very familiar with the syntax. Right now I’m pulling a set of values from a database and populating a dropdown box. What I need AJAX to do is populate three other fields with hardcoded information when they make a selection from the dropdown box. Once I get AJAX working correctly, I’d then like to query the database and return results based on their selection from the dropdown.

<div class="panel-body">
<div class="form-group">
<label for="nomName" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" data-validation="required" name="nomName" id="nomName" placeholder="Name" maxlength="50">
</div>
</div>
<div class="form-group">
<label for="nomTitle" class="col-sm-3 control-label">Title:</label>
<div class="col-sm-8">
<input type="text" class="form-control" data-validation="required" name="nomTitle" id="nomTitle" placeholder="Title" maxlength="50">
</div>
</div>
<div class="form-group">
<label for="nomDept" class="col-sm-3 control-label">Department:</label>
<div class="col-sm-8">
<select class="form-control" name="nomDept" id="nomDept">
<option value="" disabled selected>Select a Department...</option>
<option value="Building Services">Building Services</option>
<option value="Construction Management">Construction Management</option>
</select>
</div>
</div>
<div class="form-group">
<label for="nomGUID" class="col-sm-3 control-label">AU Email/GUID:</label>
<div class="col-sm-8">
<select class="form-control" name="nomGUID" id="nomGUID">
<option value="" disabled selected>Select a Person...</option>
<?php
while($row = mssql_fetch_array($user_list)){
echo "<option value=\"" . $row['id'] . "\">" . $row['id'] . "</option>";
}
?>
</select>
</div>
</div>
</div>


And here is my AJAX. I know it's not correct, so I'd appreciate some explanation behind someone's solution if they provide one. Thanks.

$(function() {
var options = {
"Option 1": "value 1",
"Option 2": "value 2",
"Option 3": "value 3"
}
$('#nomGUID').change(function() {
$.ajax({
url: 'test.php',
success: function('#options') {
$('#nomDept').empty();
$('#nomTitle').html('Test AJAX');
}
})
}
}

Answer

"success" is for passing in a callback handler. You can implement the handler with either an anonymous function or a named function. The syntax you have is illegal and does neither.

Read up on anonymous functions: http://www.w3schools.com/js/js_function_definition.asp

I'm assuming your AJAX call to test.php will return some kind of JSON response. For example:

{
    "title": "New Title",
    "foo": "bar",
    "baz": "qux",
    "departments": [
        "Building Services",
        "Construction Management"
    ]
}

You could implement your success callback function using a named function. Inside the callback, you set your options.

$.ajax({
    url: 'test.php',
    success: myAjaxSuccessHandler
});

function myAjaxSuccessHandler(data) {
    $('#nomDept').empty().append(
        $('#nomTitle').html(data.title);

        $.map(departments, function(element) {
            return $('<option></option>').val(element).text(element);
        })
    );
}

You could also choose to use an anonymous function, like this:

$.ajax({
    url: 'test.php',
    success: function(data) {
        $('#nomTitle').html(data.title);

        $('#nomDept').empty().append(
            $.map(departments, function(element) {
                return $('<option></option>').val(element).text(element);
            })
        );
    }
});
Comments