CODEWITHSUNDEEP
javascripthtmldatabasejsp
Judy
Judy

Reputation: 1553

dropdown menu populated from a database in a client side page

I want to populate the data from a database using client side programming either HTML or javascript. I looked online and got lot of sites giving examples on server side i.e. JSP,ASP or PHP for creating the dropdown menu. I know the simple syntax for creating the HTML dropdown menu and in other languages. But I don't know how to populate that HTML dropdown menu values from the database. Any technique which either gets the data from the JSP page which fetches the data from the database and on selecting a single item triggers a query to JSP page which again fetches data from the database can work for me.

Problem: I want to access the database fields from a html page. The dropdown list of html page should be populate from the database and on selecting a specific value it should get data specific to that option.

Any ideas or links to the sources I should look at.

Upvotes: 0

Views: 2171

Answers (1)

Fuzzzzel
Fuzzzzel

Reputation: 1773

Just so you can get a general idea of the mechanism: How about an Ajax-call triggered by an event listener like this (could also use click event or whatever):

After the html-document is loaded, add an event listener to the watched element (here onchange) and call a function when the event is triggered:

$(document).ready(function() {
    $('#watchedElement').change(callAjaxFunction());
});

Function for Ajax-call: In the data variable you can send information to the server to decide there which options to send back. Easiest way (though quick and dirty) would be to return (like "echo" in php) the option values in plain text/html and replace the old option-elements with this. I prefer the JSON-ways described in the link from your question's comment, since you have a lot more control on the data but for a first impression you could try if the mechanism works for you in general:

function callAjaxFunction() {
    $.ajax({
        type: "POST",
        url: url,
        data: { "selectedValue": $('#watchedElement').val() }
        success: function(data) {
            $("#idOfSelectElement").html(data);
        }
        dataType: "HTML"
    });
}

Just for testing purposes without any evaluation of the value sent to the server you could send back two dummy options like this (example is php file for simplicity and you even could use an html-file that only contains the text itself):

<?php
echo "<option value='test1'>Test1</option>" .
     "<option value="test2">Test2</option>";
?>

Still it's probably better to go the JSON way and add element by element, which makes dbugging and stuff way easier later on.

Upvotes: 1

Related Questions