CODEWITHSUNDEEP
javascriptphpjqueryajax
allogos
allogos

Reputation: 47

Filtering dropdown form with jquery.ajax

I have two dropdown getting value from database:

Table_Buildings

|id|---|building_name|

Table_Floors

|id|---|Floor_name|---|building(Foreign key to table_Buildings)|

and in my form

Dropdown: building)

$db->setQuery("SELECT buildings.building_name, floors.id 
               FROM buildings 
               INNER JOIN floors 
               ON buildings.id=floors.id"

Dropdown: floor)

$db->setQuery("SELECT floor_name, id FROM floors");

For filtering my dropdown I want to use this script:

<script type="text/javascript">
var xhr;
jQuery(function($) {
    $('#filter_building').change(function(){
        var filterBuilding = $('#filter_building').val(); 
        if (xhr && xhr.abort) {
            xhr.abort();xhr=false;
            }
        xhr = jQuery.ajax( {
            url: 'index.php', 
            data: 'option=com_mycomponent', 
            success: function(data){
                jQuery('#filter_building').replaceWith(data);
            }
        });
    });
});
</script>

But somewhere is wrong and its not working.

Upvotes: 0

Views: 3829

Answers (3)

Pratik Gaikwad
Pratik Gaikwad

Reputation: 1

<strong>
    <div class="float-right">
        <span>From: </span><input type="date" name="From1" id="From1" />
        <span>To: </span><input type="date" name="To1" id="To1" />
        <input type="submit" value="Get Details" onclick="GetDetailsFromToTransactions()" />
    </div>

    </div>
    <div class="smallsize1 float-right" id="filterdropdown">
        <select id="selectBox" onchange="FilterDate(value);">
            <option value="0" Idselected>Select Filter</option>
            <option value="1">Today</option>
            <option value="-1">Last 1 Month</option>
            <option value="-3">Last 3 Months</option>
            <option value="-6">Last 6 Months</option>
            <option value="-9">Last 9 Months</option>
            <option value="-12">Last 1 Year</option>
            <option value="-24">Last 2 Years</option>
        </select>
    </div>
</strong>

Upvotes: 0

Gopalakrishnan
Gopalakrishnan

Reputation: 957

I have sample jquery and function in index.php Jquery and ajax

$('#filter_building').change(function(){
var buildingId =  $('#filter_building').val();
$.ajax({
    url: "index.php",
    type: "post",
    data: {buildingId: buildingId}, 
    success: function(data) {
        if(data != "false")
    {
        $('#Floor').html(data); 
    }
    else{
    alert("No value");}
    }
});
});

And In index.php page

$buildingId = JRequest::getVar('buildingId');
$db->setQuery("SELECT floor_name, id FROM floors WHERE filter_building='".$_GET['filter_building']."'");
$db->query();
$num_rows = $db->getNumRows();
if($num_rows>0){
while($nt = $db->loadAssoc()){
echo "<option value=$nt['id']>$nt['floor_name']</option>"; 
}
}
else
{
echo "false";
}

Upvotes: 0

Maxim Colesnic
Maxim Colesnic

Reputation: 465

$('#filter_building').change(function(){

    var buildingId = $(this).val();

    $.ajax({
        url: "index.php",
        type: "post",
        data: {buildingId: buildingId}, 
        success: function(data) {
            $('select#floor-id').html(data); 
           // data = '<option>val1</option><option>val2</option>'
        }
    });
}):

Upvotes: 1

Related Questions