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?
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
});
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.
Related
I want to show the models by changing the Drop Down value....I know how to get the value of drop down with change function but my problem is that i want to send that value in route to filter the models.....Please tell me how can i send the changed value id with route from blade..
This is my Drop Down
<select class="form-control" id="category" placeholder="Select category">
<option>All</option>
#foreach($categories as $category)
<option value="{{route('contributors.index')}}?category={{ $category->id }}">{{$category->name}}</option>
#endforeach
</select>
Here i my Jquery Change Function
$('#category').change(function(){
alert($(this).val());
})
Explanation :
Please check the below picture....I want to show the models(in the same view)which are related to that category selected in the drop down.
Add this to redirect you to the specific route. For you, it refreshes the page with the selected id in URL. So, models will filter for the given category_id.
$('#category').change(function(){
window.location = "domain.com/route/" + $('option:selected', this).val();
})
Of course, you should use your own URL instead of the URL in the example.
You can use ajax call to append and send category value to your route
$( "#category" ).change(function() {
var id=$(this).val();
$.ajax({
type: 'GET',
url: your url goes here,
success: function (data) {
//here yuo can append to model div
},
error: function (data) {
console.log(data);
}
});
});
the above code is sample for ajax request
I am using select2 version 3.5.4.
I want to have two select2 dropdowns side by side. When page loads first time one select2 dropdown has data whereas second select2 dropdown is empty. Once user clicks on an entry/option in the first select2 dropdown an ajax call should be made to the server and second select2 dropdown should be populated with ajax response data. I am not being able to achieve it. Whenever i try to populate second dropdown I get errorrs like,
Option 'data' is not allowed for Select2 when attached to a <select> element
Option 'ajax' is not allowed for Select2 when attached to a <select> element
My code is something like,
HTML:-
<div class="form-group">
<label class="col-md-4 control-label" for="folderSelect">Files & Folders</label>
<div class="col-md-5">
<div class="select2-wrapper">
<select class="form-control select2" id="folderSelect" name="folderSelect">
<option></option>
<option th:each="folder : ${folders}" th:value="${folder}" th:text="${folder}"/>
</select>
</div>
</div>
<div class="col-md-5">
<div class="select2-wrapper">
<select class="form-control select2" id="fileSelect" name="fileSelect">
<option></option>
<option th:each="file: ${files}" th:value="${file}" th:text="${file}"/>
</select>
</div>
</div>
</div>
JS:-
$('#folderSelect').on("select2-selecting", function(e) {
var value = $(e.currentTarget).find("option:selected").val();
var data = null;
$.ajax({url: "test?value=" + value, success: function(result){
data = result;
return result;
}});
$("#fileSelect").select2({
/* ajax: { // Tried but didn't work
dataType: 'json',
url: 'test',
results: function (data) {
return {results: data};
}
}*/
/*data: function() { //Tried but didn't work
$.ajax({url: "test", success: function(data){
return data;
}});
}*/
});
//Tried but didn't work <br>
$("#fileSelect").select2('destroy').empty().select2({data: data});
});
follow this
$("#fileSelect").empty();
$("#fileSelect").select2({data: data});
It worked well in my case
sorry for asking such a basic question, but i am new to ajax and i couldn't find a documentation (i dont even know the name of this ajax syntax).i understand other parts of this code snippet but i don't know what am i supposed to put in the url part of the $.ajax function. please help
<form method="GET" action="">
<select name="docSpec" id="docSpec">
<option value="Pulmonary" selected="selected">Pulmonary</option>
<option value="Physician">Physician</option>
<option value="General">General</option>
<option value="Cardiologist">Cardiologist</option>
<option value="pediatrics">pediatrics</option>
</select>
</form>
js:
function do_something() {
var selected = $('#docSpec').val();
$.ajax({
this part-- > url: '/you/php/script.php',
type: 'POST',
dataType: 'json',
data: {
value: selected
},
success: function (data) {
$('#my_div').html(data);
}
});
}
this is the javascript! by the way, i am trying to get a selected option value from a <select> ("supposedly on change as a trigger") without having to submit the form.
You can get the selected value of the <select> using
$('#docSpec').val();
You don't need to use ajax for that. Changing the selected option of a <select> will not trigger form submission or reload the page by default.
You can get the value when it is changed using the change() method:
$('#docSpec').change(function(){
alert(this.value); // You can access the new value here
});
I'm trying to add a new feature to this pagination/filtering script but so far, without succes. I want that, when you change the page, the filter you picked from the top right corner select (that with "Ordonare dupa...) to remain picked instead of switching back to the first option.
This is my website - http://www.wheelsmarket.ro/cautare/jante/1
To paginate/filter i used this function:
$(document).ready(function()
{
$('.sortare').on('change', function(){
$.ajax({
url: '/filtrare-jante.php',
type: 'POST',
data: {'selected' : $(this).val(), 'pagina_id' : <?php echo $_GET['pagina'];?>},
success: function(data){
console.log(data); // do something with what is returned
$('#myTest').html(data);
$('#queryInitial').html('null');
}
});
});
All the querys are made inside a #myTest div, and the myTest div gets changed without reloading when you change that select. The problem is that the select box is out of #myTest div, so i doubt that i can make use of that function i have.
ex:
<select class="sortare select" >
<option value="1">cele mai noi</option>
<option value="2">cele mai ieftine</option>
<option value="3">cele mai scumpe</option>
</select>
<div id="myTest">
code
</div>
If i understood correctly you need something like :
1) Add id to your options:
<select class="sortare select" >
<option id="sel1" value="1">cele mai noi</option>
<option id="sel2" value="2">cele mai ieftine</option>
<option id="sel3" value="3">cele mai scumpe</option>
</select>
<div id="myTest">
code
</div>
AND change tha attr() to selected in jquery :
$(document).ready(function()
{
$('.sortare').on('change', function(){
selValue = $(this).val(); //---> Store this value in a variable.
$.ajax({
url: '/filtrare-jante.php',
type: 'POST',
data: {'selected' : $(this).val(), 'pagina_id' : <?php echo $_GET['pagina'];?>},
success: function(data){
console.log(data); // do something with what is returned
$('#myTest').html(data);
$('#queryInitial').html('null');
$('#sel'+selValue).attr("selected","selected"); //---> Use the variable we created to determine which option should be set to selected dynamically
}
});
});
Hi i am using jquery to pull data from database n if the field has some value, i am calling clone function to create a dropdown list and using that value to set the selected value for dropdownbox. Like in code below database returns score so i am trying to set selected value of dropdown to score. ANDCriteria2 is the dropdown created using clone. Even if i try to print ANDCriteria's selected value which by default should be total_balance, it show empty alertbox (alert($('#ANDCriteria2').val()) as if the dropdown doesnt even exist
HTML
<div id="ListOne">
<div id="crit">
<div id="innerDiv2">
<select name="ANDCriteria2">
<option value="total_balance">Total Balance</option>
<option value="collector_code">Collector Code</option>
<option value="score">Score</option>
<option value="standard_desc">SDC</option>
<option value="acct_age">Account Age</option>
<option value="attempts_total">Total Attempts</option>
<option value="phone_age">Phone Age</option>
</select>
</div>
</div>
</div>
Jquery ready function
(document).ready(function(){
$('#lst').change(function(){
$.ajax({
type: "GET",
url: "getter.php",
data: "list=" + $(this).val(),
success: function(data){
var items = JSON.parse(data)
var andc2 = items[5];
if(andc2 === 'score ') {
clone ();
alert("BEFORE");
//$('#ANDCriteria2 option').eq(2).attr('selected', 'selected');
//alert( $('.innerDiv2 ANDCriteria2').text());
$('#ANDCriteria2 > .innerDiv2 >.crit option[value=score]').attr('selected','selected');
alert("AFTER");
I think you mean $("[name='ANDCriteria']") and not $("#ANDCriteria"). # is for ID based selection.
Culprit:
<select name="ANDCriteria2">
And you're using:
$('#ANDCriteria2 > .innerDiv2 >.crit option[value=score]')