I am using skote theme and I want to set auto select value in multiple select select box when edit data I have get this multiple select box from this this for that I am trying below code
<select class="select2 form-control select2-multiple" name="assign_to[]" multiple="multiple" data-placeholder="Choose ...">
<option value="1" data-select2-id="1">Admin</option>
<option value="2" data-select2-id="2">Admin2</option>
<option value="3" data-select2-id="3">Admin3</option>
</select>
$(document).on('click','.edittodotask',function(e){
e.preventDefault();
var id = $(this).attr('id').replace('edittodotask_', '');
var url = "{{route('task_to_do.edit', ':id')}}";
url = url.replace(":id", id);
$.ajax({
type: "get",
url: url,
processData: false,
contentType: false,
success: function(response) {
//response = assign_to: "1, 2"
var assign_to = response.assign_to.split(',');
$("#edit_assign_to").val(assign_to);
},
error: function(data) {
console.log(data);
}
})
});
when I click on edit button I have get data with ajax and want to set auto select options for that I have make this code
but it is not set selected value.
can anybody help me with this
Using select2, you need to trigger the changes manually.
$("#edit_assign_to").val(response.assign_to.split(',')).trigger('change.select2');
If your data returns 1, 2 with a comma, you need to split by , with a space after the comma.
Related
Not sure what I am doing wrong here but the on change function is not hitting for some reason. I hope someone here can point me in the right direction.
I have a view that has some bootstrap tabs, inside one of those tabs I have a dropdown list. What I want to happen is, when the user selects a year, it make an ajax call to controller, gets the json data and populates a table with the data. Here is my code:
In the View:
<div id="StatementsTab" class="tab-pane fade">
<div class="text-left dash-left-padding dash-right-col-content-billing">
<select class="form-control edi-blue" id="ddlStatements">
<option value="0">VIEW STATEMENTS</option>
<option value="#DateTime.Now.Year">#DateTime.Now.Year STATEMENTS</option>
<option value="#DateTime.Now.AddYears(-1).Year">#DateTime.Now.AddYears(-1).Year STATEMENTS</option>
<option value="#DateTime.Now.AddYears(-2).Year">#DateTime.Now.AddYears(-2).Year STATEMENTS</option>
<option value="#DateTime.Now.AddYears(-3).Year">#DateTime.Now.AddYears(-3).Year STATEMENTS</option>
<option value="#DateTime.Now.AddYears(-4).Year">#DateTime.Now.AddYears(-4).Year STATEMENTS</option>
<option value="#DateTime.Now.AddYears(-5).Year">#DateTime.Now.AddYears(-5).Year STATEMENTS</option>
</select>
<br />
<table id="statementtbl">
<tr>
<td></td>
</tr>
</table>
and the jquery:
$("#ddlStatements").change(function () {
console.log("change function yes");
var yr = $("#ddlStatements").val();
if (yr > 0){
$.ajax({
//var url = '../LabOrder/DeletePatientNoteAttachment?PatientNotes=' + JSON.stringify(yr);
url: '..Members/GetStatements',
data: 'Year=' + yr, // Send value of the drop down change of option
dataType: 'json', // Choosing a JSON datatype
success: function (data) {
console.log("success");
// Variable data contains the data you get from the action method
},
error: function (ex) {
console.log(ex);
}
});
}
});
I am not sure why but the console log is not being hit. Please help...
I have a form with two select elements where users can select a product variant (for example red, green, blue shirt) and the quantity.
When changing the variant/quantity, I do a AJAX request to get the price.
The complicated part is: each variation has its own price and its own quantities. For example red shirts are 10 USD and at a minimum quantity of 5 (10, 15…). Green shirts are 15 USD but quantity starts at 3 (6, 9…).
(Color/shirt just an example, real products are control units for streetlights :-)
The problem is, when the default is 'red' and '5' and I change to 'green' the price shows 75 USD (AJAX query was green+5). But green only has quantities of 3, 6, 9 etc.
I could return the minimum quantity from my AJAX request, but then the user can't update the price when changing the quantity select.
Only solution I see is make two doSubmit() functions and two submitAjax(). But this would mean I have a lot of duplicate code.
HTML
<form action="" id="product_selection">
<select name="product_variation">
<option value="r">Red</option>
<option value="g">Green</option>
<option value="b">Blue</option>
</select>
<select name="product_quantity">
<option value="">10</option>
<option value="">20</option>
<option value="">30</option>
</select>
</form>
JavaScript
// Product variation, quantity select dropdown
var product_selection = document.querySelector('#product_selection');
var product_variation = document.querySelector('#product_variation');
var product_quantity = document.querySelector('#product_quantity');
// Event listener to submit the form on change
product_selection.addEventListener('submit', submitAjax);
product_variation.addEventListener('change', doSubmit);
product_quantity.addEventListener('change', doSubmit);
// Submit form
function doSubmit(event) {
product_selection.dispatchEvent(new Event('submit')); // product_selection.submit();
}
// Handle ajax submit
function submitAjax(event) {
// Stop default form submit
event.preventDefault();
// Ajax request
$.ajax({
url: '/static/public/ajax/get_product_data.php',
type: 'POST',
data: $('#product_selection').serialize(),
success: function(result) {
if (result == 0) {
alert('Sorry');
} else {
setProductData(result);
}
},
error: function(jqxhr, status, exception) {
alert('Sorry');
}
})
}
// Update product details
function setProductData(result) {
$('#product_price').html(result.price_gross);
// Remove current quantity options
var product_quantity = document.getElementById("product_quantity");
for(i = product_quantity.options.length - 1 ; i >= 0 ; i--) {
product_quantity.remove(i);
}
// … reapply new quantity options
var c = 0;
for (var i = result.minimum; i <= result.maximum; i+=result.graduation) {
product_quantity.options[c] = new Option(i + ' ' + pwjs.product.unit, i);
if (result.product_quantity == i) {
var setselectedIndex = c;
}
c++;
}
// product_quantity.selectedIndex = setselectedIndex;
}
I think you would want to do this in steps so product_variation.addEventListener('change', doSomethingElse);
then your select would be something like:
<select name="product_variation">
<option data-increment="5" value="r">Red</option>
<option value="g">Green</option>
<option data-increment="3" value="b">Blue</option>
</select>
then when the product_variation changes doSomethingElse would rebuild the product_quantity select to take the increment value of the selected product_variation
As far I can see, you are using jQuery. So, Ill give you an example of how you can achieve this.
HTML
First of all, don't forget to specify the values for your select options, your values for product_quantity were empty. Also, I'd recommend to you that you create an extra option tag to be the default selected option and be able to validate your form later on.
<form action="" id="product_selection" name="product_selection">
<select name="product_variation">
<option value="">Select color</option>
<option value="r">Red</option>
<option value="g">Green</option>
<option value="b">Blue</option>
</select>
<select name="product_quantity">
<option value="">Select quantity</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</form>
JavaScript
As for JavaScript, I'll recommend you to add the event listener for your last input, which is the product_quantity.
$("#product_selection").submit(function(e){
e.preventDefault();
var inputs = document.product_selection;
if( inputs.product_variation.value != "" && inputs.product_quantity.value != "" ){
$.ajax({
url: '/static/public/ajax/get_product_data.php',
type: 'POST',
data: $('#product_selection').serialize(),
success: function(result) {
if (result == 0) {
alert('Sorry');
} else {
setProductData(result);
}
},
error: function(jqxhr, status, exception) {
alert('Sorry');
}
});
}
});
So in my 'edit records' view I have this two dropdrown the first one contains the main category and the second one should contain values based from the main category chosen is the first dropdown. So I implemented an ajax call for this in my view, here is how the dropdown code looks like
<select name="category" id="category" class="dds">
#foreach($mCategories as $lists)
<option value="{{$lists->maincategoryid}}">{{$lists->maincategoryname}}</option>
#endforeach
</select>
<h6>Doc SubClass 1</h6>
<select name="subcategory" id="subcategory" class="dds">
<option value=""></option>
</select>
then I have this in my script to call the ajax function
<script>
$('#category').on('change' , function(e){
console.log(e);
var cat_id = e.target.value;
alert(cat_id);
//ajax
$.getJSON('ajax-subcat?cat_id=' + cat_id , function(data){
console.log(data);
$('#subcategory').empty();
$.each(data, function(index, subcatObj)
{
$('#subcategory').append('<option value="' + subcatObj.Object.subcategoryid +'">' + subcatObj.subcategoryname +'</option>');
});
});
});
</script>
and the code for the ajax call is in my routes and here is how it looks
Route::get('ajax-subcat' ,function()
{
$cat_id = Input::get('cat_id');
$subcategories = DB::table('nsa_subcategory')
->where('maincategoryid' , '=' , $cat_id)
->get();
return Response::json($subcategories);
});
as you can see, in my script I tried to log the data after the $getJSON to check whether or not it went in but I am not getting anything. The thing is I also used this codes in my creating of records so i don't know what my error is now. any ideas? thanks in advance!
Hi I have select menu that should not have empty row, this is my code in AngularJS
$scope.GetAllSnimateljiBaseInfo = function () {
$http.get(serviceBase + "GetAllSnimateljiBaseInfo", { timeout: 6000 })
.success(function (response) {
$scope.snimatelji = response;
$scope.snimatelji.splice(0, 0, { "IDsnimatelj": 0, "Ime": "", "Prezime": "" });
$scope.selectedSnimateljInfilterVideoKlip = $scope.snimatelji[0];
})
.error(function (response, status) {
if (status == 401) {
$state.go('/');
}
else {
alert(response.Message);
}
});
};
this is HTML code
<div class="form-group">
<label class="col-lg-3">Snimatelj:</label>
<div class="col-lg-9">
<select class="form-control" ng-options="column as column.Ime +' '+ column.Prezime for column in snimatelji" ng-model="selectedSnimateljInfilterVideoKlip">
<option value=""></option>
</select>
</div>
</div>
But select menu looks like this
As you can see I have two empty menu options instead of one ?
Where is my mistake , any help please ?
Regards
By default one empty row will be there for angular select. The additional empty row is because you have specified
<option value=""></option>
in select tag- remove that.
If you would like to remove the default empty row as well, then set
$scope.selectedSnimateljInfilterVideoKlip = $scope.snimatelji[0]
or use ng-init to achieve the same.
I load values for select2 like the following way.
Declare the Type
var AdjustmentType = Backbone.Model.extend({
url : Hexgen.getContextPath("/referencedata/adjustmenttype")
});
create instance for the Type
var adjustmentTypes = new AdjustmentType();
load the values to select2 box
adjustmentTypes.fetch({
success : function() {
for(var count in adjustmentTypes.attributes) {
$("#adjustment-type").append("<option>" + adjustmentTypes.attributes[count] + "</option>");
}
}
});
$("#adjustment-type").select2({
placeholder: "Select Adjustment Type",
allowClear: true
});
My HTML Code
<div class="span4">
<div>ADJUSTMENT TYPE</div>
<select id="adjustment-type" tabindex="5" style="width:200px;">
<option value=""></option>
</select>
</div>
when i load this for the first it is not giving any exception but if i Refresh or navigate to different URL i get the following exception:
Uncaught query function not defined for Select2 adjustment-type
"Query" refers to the list by which to check your search terms against. You need to make sure that your data property is a proper array of objects (ie. your options elements).