CODEWITHSUNDEEP
javascriptphpjqueryjsonajax
Hanny
Hanny

Reputation: 2159

Send 3 variables via json not sending properly

I have 3 dropdowns that are created via javascript, they call an 'updateTable' function when a choice gets made.

Ultimately I am trying to 'filter' a table of data depending on choices made in the dropdowns. If the user just picks one of the dropdowns I want the other choices to submit at the same time (just with empty data if they are not selected, or the currently selected choice if they had already chosen them).

My updateTables function looks like this:

function updateTables (creativeVal,stationVal,verticalVal) 
  {
    //-----------------------------------------------------------------------
    //Send the filter criteria
    //-----------------------------------------------------------------------

    $.ajax({                                      
        url: 'api.php',   //the script to call to get data          
        data: {"creative": creativeVal, "station": stationVal, "vertical": verticalVal},  //insert url arguments here to pass to api.php for example "id=5&parent=6"
        dataType: 'json',   //data format      
        success: function(response) //on recieve of reply     
        { //Do the following on Success   

        $('#results').empty();
        updateTableRows(response);

        } //end of on success
    }); //End Ajax call
}; //End Creative Function

My dropdowns look like this:

<!--DROPDOWNS-->
 <div id="dropdowns">

    <div id="creativesel">
    Creative -  
    <select name="creative-select" id="creative-select" onChange ="updateTables(this.value);">
        <option value="" selected="selected">All</option>
    </select>
    </div> 

    <div id="stationsel">
    Station - 
    <select name="station-select" id="station-select" onChange ="updateTables(this.value)">
        <option value="" selected="selected">All</option>
    </select>
    </div>

     <div id="verticalsel">
    Vertical - 
    <select name="vertical-select" id="vertical-select" onChange ="updateTables(this.value)">
        <option value="" selected="selected">All</option>
    </select>
    </div>

</div> <!--Dropdowns ending-->

No matter which dropdown is selected - the request goes through appending ?creative=whatever_the_user_selected_from_any_of_the_3_dropdowns

Ultimately I want it append something like ?creative=whatever_selection&vertical=whatever_selection&station=whatever_selection so I can get the data on the other end and do what I need to with it.

Am I sending the json request improperly?

Upvotes: 2

Views: 275

Answers (2)

000
000

Reputation: 27247

How about something like this: http://jsfiddle.net/joeframbach/2XBVv/

I've moved the onchange event to jquery where it belongs, and am pulling all the values from all dropdowns rather than just the one that changed.

html:

<!--DROPDOWNS-->
 <div id="dropdowns">

    <div id="creativesel">
    Creative -  
    <select name="creative-select" id="creative-select">
        <option value="" selected="selected">All</option>
    </select>
    </div> 

    <div id="stationsel">
    Station - 
    <select name="station-select" id="station-select">
        <option value="" selected="selected">All</option>
    </select>
    </div>

     <div id="verticalsel">
    Vertical - 
    <select name="vertical-select" id="vertical-select">
        <option value="" selected="selected">All</option>
    </select>
    </div>

</div> <!--Dropdowns ending-->

javascript:

$(function() {
    $('#dropdowns select').change(function() {
        //-----------------------------------------------------------------------
        //Send the filter criteria
        //-----------------------------------------------------------------------

        $.ajax({                                      
            url: '/echo/json',   //the script to call to get data          
            data: {"creative": $('#creative-select').val(), "station": $('#station-select').val(), "vertical": $('#vertical-select').val()},  //insert url arguments here to pass to api.php for example "id=5&parent=6"

            dataType: 'json',   //data format      
            success: function(response) //on recieve of reply     
            { //Do the following on Success   

                $('#results').empty();
                console.log(response);

            } //end of on success
        }); //End Ajax call
    }); //End Creative Function  
});

Upvotes: 2

Schleis
Schleis

Reputation: 43750

Add the values for the other dropdowns into your onchange call.

updateTables($('#creative-select').val(), $('#station-select').val(), $('#vertical-select').val())

Alternatively, don't pass the parameters in your onChange method and get the values in the updateTable function.

Upvotes: 1

Related Questions