CODEWITHSUNDEEP
phpjavascriptjquerymysqlajax
Drew
Drew

Reputation: 6872

Dropdown Sort MySQL Query with Javascript OnChange?

Below is a preview of what I have. What I want to do is when someone changes the drop down to "Cooper" then only Cooper brand tires will show, it will have to update my MySQL query. If they change it back to "All Tire Brands" then it does a quick refresh and shows every one of them.

Is something like this possible? If someone can point me in the right directions I would really appreciate it.

Thanks!

enter image description here

Upvotes: 0

Views: 3306

Answers (2)

rlemon
rlemon

Reputation: 17667

$("#selectMenuId").bind("change", function(event) {
    var selectedID = event.target.value;
    $.post("path/to/your/serverSide.php", {
        selectionID: selectedID
    }, function(data) {
        $("#myContainer").html(data);
    });
});

And on serverSide.php you would want to do something like this

if(isset($_POST["selectionID"])) {
    $sql = "SELECT * FROM someTable WHERE category_id = " . $_POST["selectionID"] . ";
    // run your query, build your new results, echo them back.
}

The basic id is you are passing the selected value to the serverSide page, running a query against the DB with the (i would assume some sort of category ID) value, build your new resultset and return it. Without knowing how you are building the list currently I wouldn't be able to help further.

Edit To show a loader you can do something like this?

$("#selectMenuId").bind("change", function(event) {
    var selectedID = event.target.value;
    var container = $("#myContainer");
    container.html("Loading...");
    $.post("path/to/your/serverSide.php", {
        selectionID: selectedID
    }, function(data) {
        container.html(data);
    });
});

Or you can have a overlay with a loading gif, and just $("#loadingLayer").show()/.hide() for that.

as for the default selection.. you could (using your ServerSide language) have the default view rendered on the page. or you can have it collected via JS the same way you have the rest of your results... just wait for the list to load and trigger a 'change'

$("#selectMenuId").bind("change", function(event) {
    var selectedID = event.target.value;
    var container = $("#myContainer");
    container.html("Loading...");
    $.post("path/to/your/serverSide.php", {
        selectionID: selectedID
    }, function(data) {
        container.html(data);
    });
}).trigger("change");

Hope this helps!

Upvotes: 1

Sean McMains
Sean McMains

Reputation: 59223

Sure, it's possible.

You'll need to assign a javascript event listener to the popup. When a visitor selects an item from the popup, you'd use an AJAX call to ask a web service on the server which items to display. (Your Javascript framework of choice -- jQuery, Prototype, or others -- will help with this.) Then you'd replace the search result items in the DOM with those that the web service returned.

That's a high-level conceptual view. If you'd like more details, here's an article that's pretty close to what you need.

Upvotes: 0

Related Questions