Populate a dropdownlist after selecting a value from a different list using Ajax

Question

I have 2 dropdownlists. The first contains Car Brands like seat,bmw,audi etc. The second i want to contain the models from the specific Brand the user selected in list 1. In my current code state, when i select A brand from List 1 the second list is getting Filled with the same elements from List 1. So I Have a Duplicated List with exactly the same records.

The main file:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
$css='css.css';
$doc = JFactory::getDocument();
$doc->addStyleSheet('modules/mod_alpha_table/assets/'.$css);
$db= JFactory::getDbo();
$ready = $db->getQuery(true);
$query="SELECT category_name,virtuemart_category_id from uhhu_virtuemart_categories_el_gr INNER JOIN uhhu_virtuemart_category_categories ON uhhu_virtuemart_categories_el_gr.virtuemart_category_id = uhhu_virtuemart_category_categories.category_child_id WHERE uhhu_virtuemart_category_categories.category_parent_id =  105";
$db->setQuery($query);
$options=$db->loadObjectList();
$model="";

?>
<script>
function showUser(str) {
var xmlhttp;


        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET","query.php?q="+str,true);
        xmlhttp.send();

}
</script>
<div class="srchcr">
    <div class="srch">
        <form name="searchcar">
        <form>
            <select onchange="showUser(this.value)" name="cats">
            <option value="none">Select Make</option>
                <?php foreach ($options as $row) {

                    echo '<option value=' . $row->virtuemart_category_id . '>'. $row->category_name . '</option>';
                    }
                    ?>
            </select>


            <select name="subcats"  id="txtHint">
                <option value="none">Select Model</option>

            </select>

        </form>
    </div>
</div>

query.php file :

<?php
            $doc = JFactory::getDocument();
            $db= JFactory::getDbo();
            $ready = $db->getQuery(true);
            $q = htmlspecialchars($_REQUEST['q']);
            $query='SELECT category_name,virtuemart_category_id from #__virtuemart_categories_el_gr INNER JOIN #__virtuemart_category_categories ON #__virtuemart_categories_el_gr.virtuemart_category_id = #__virtuemart_category_categories.category_child_id WHERE #__virtuemart_category_categories.category_parent_id = $q';
            $db->setQuery($query);
            $options=$db->loadObjectList();

            foreach ($options as $row) {

                    echo '<option name='. $q .' value=' . $row->virtuemart_category_id . '>'. $row->category_name . '</option>';
                    }

            ?>

Query tested at phpmyAdmin and working fine. It seems somehow the first query is getting executed twice instead of the query inside the $query.php file. I also tried include the code from the external file inside the main but its the same story.I also renamed the second $query as $query2 and executed $query2 but nothing changed.Could someone enlight me on what is going wrong ?

EDIT: After a break and bit more debugging i think that this is where the problem start:

 xmlhttp.open("GET","query.php?q="+str,true);

It seems like the request for some reason, instead of query.php is sent at index.php and triggers the same query again.I added die(); at the start of query.php and nothing happened.So may i need to use a joomla syntax or something ?

score 1 · Answer 1 · edited May 23 '17 at 12:12

Looks like you have a copy-paste-error here. When comparing the creation of your option-tags, I see the exact same code for both the brands and the models, meaning query and dom-creation.

So basically, your code is perfectly fine. But in your query.php you are creating this same brand-list again ;)

Some general comments on your code:

Do not create your own implementation of the XmlHttpRequest, use a library like jquery or mootools
You are vulnerable to sql-injections when using values from userland ($_REQUEST['q']) without sanitizing them. See this question on stackoverflow: Best way to prevent SQL injections in Joomla
if it is true that you gather the information for your 2 lists with the same query, try to implement your logic (user selects brand, model-list is updated) through javascript. So your main.php still creates the brand-list, but renders all model-lists as well. These are shown/hidden when the user changes the brand accordingly. This would avoid the additional roundtrip to the server each time a brand is selected.

It isnt the same Code. In the first query WHERE id=105 (The Car Brands are Also inside a Parent Category Named Cars with id 105 ) , so the first time i select the Brands. In second query WHERE id=$q i select the children categories from the Brand.for example: id for Audi is 166. When i use the above query for id=166 in phpmyadmin , i get all the results i want ;) — IseNgaRt, Dec 29 '14 at 14:02
Correct me if i misunderstood it. You suggest, while i create the List1, to actually parse the subcategories for each Brand and keep em hidden in arrays . When a brand is selected from list 1 the corresponding array will be shown in list 2. Right ? — IseNgaRt, Dec 29 '14 at 14:16

Populate a dropdownlist after selecting a value from a different list using Ajax

1 Answers1