I have the following pseudo code for example: I want to use the same ajax script to select phone_type and method per record, I tried using .attr()
<script>
$('#phone_type').on('change', function (e) {
console.log(e);
var phone_type = e.target.value;
//ajax
$.get('../get_conversion_method_by_phone_type?phone_type=' + phone_type, function (data) {
//success data
$('#method').empty();
$('#method').append('<option value="0" selected>Choose Method</option>');
$.each(data, function (index, conMethObj) {
$('#method').append('<option value="' + conMethObj.id + '">' + conMethObj.method + '</option>');
});
});
});
</script>
foreach($foo as $bar){
<tr>
<select id="phone_type" name="phone_type">
<option>Choose</option>
</select>
<select id="method" name="method">
</select>
</tr>
}
well i hope i understand correctly what you want to do, try this code
<script>
$('.phone_type').on('change', function (e) {
console.log(e);
var $self = $(this);
var phone_type = e.target.value;
//ajax
$.get('../get_conversion_method_by_phone_type?phone_type=' + phone_type, function (data) {
//success data
$method = $self.next('.method');
$method.empty();
$method.append('<option value="0" selected>Choose Method</option>');
$.each(data, function (index, conMethObj) {
$method.append('<option value="' + conMethObj.id + '">' + conMethObj.method + '</option>');
});
});
});
</script>
and the html
foreach($foo as $bar){
<tr>
<select class="phone_type" name="phone_type">
<option>Choose</option>
</select>
<select class="method" name="method">
</select>
</tr>
}
Related
Picture above shows snippets of Furnitures table. The user will key-in their desired reference number in ReferenceNum field. The problem is, the data itself have slash(/). Everytime the user try to submit the value, my url became MyWebsite.com/Furniture/PriceList/Ref/3/Case2, thus the website couldnt find the website.
View
<div class="form-group row">
<label class="control-label col-md-2">Reference Number</label>
<div class="col-md-8">
<input type="text" class="form-control" id="RefNum" />
</div>
<div class="col-md-2">
<input class="btn btn-success" id="getReference" value="Find"/>
</div>
</div>
<p id="rData">
</p>
JS
<script type="text/jscript">
$('#getReference').click(function () {
$.getJSON('/Furniture/PriceList/' + $('#RefNum').val(), function (data) {
var items = '<table><tr><th>Name</th><th>Reference Number</th></tr>';
$.each(data, function (i, lists) {
items += "<tr><td>" + lists.ItemName + "</td><td>" + lists.ReferenceNum + "</td></tr>";
});
items += "</table>";
$('#rData').html(items);
});
})
Controller
public JsonResult PriceList(string id)
{
var result = db.Furnitures.Where(x => x.ReferenceNum == id);
return Json(result, JsonRequestBehavior.AllowGet);
}
You can add the result as a query string value, rather than a route value
$('#getReference').click(function () {
$.getJSON('/Furniture/PriceList?id=' + $('#RefNum').val(), function (data) {
or
$('#getReference').click(function () {
$.getJSON('#Url.Action("PriceList", "Furniture")', { id: $('#RefNum').val() }, function (data) {
You can use %2F to escape slash(/) character in URL.
So updated JS code will be:
<script type="text/jscript">
$('#getReference').click(function () {
$.getJSON('/Furniture/PriceList/' + $('#RefNum').val().replace(/\//g,'%2F'), function (data) { //<--- Fix
var items = '<table><tr><th>Name</th><th>Reference Number</th></tr>';
$.each(data, function (i, lists) {
items += "<tr><td>" + lists.ItemName + "</td><td>" + lists.ReferenceNum + "</td></tr>";
});
items += "</table>";
$('#rData').html(items);
});
})
I have two select boxes, one is for products and the other is for product type. what a appears in the product type list is dependent on what is selected in the product. What i want to achieve is a null option at the top of the loaded list so that i can search just on the product. How would i go about this?
so far i have
<select class="form-control" name="product_type" id="producttype">
<option value=""></option>
</select>
and JS/jquery
$('#product').on('change', function(e) {
console.log(e);
var prod_id = e.target.value;
$.get('/ajax-subcat?prod_id=' + prod_id, function(data) {
$('#producttype').empty();
$.each(data, function(index, subcatObj) {
$('#producttype').append('<option value="' + subcatObj.id + '">' + subcatObj.name + '</option>');
});
});
});
You can append that default options before filling your select in the each, something like this:
$('#product').on('change', function(e) {
console.log(e);
var prod_id = e.target.value;
$.get('/ajax-subcat?prod_id=' + prod_id, function(data) {
$('#producttype').empty();
$('#producttype').append('<option selected disabled>Select a product type</option>');
$.each(data, function(index, subcatObj) {
$('#producttype').append('<option value="' + subcatObj.id + '">' + subcatObj.name + '</option>');
});
});
});
need an help on a jquery script.
I have a select that trigger from Ajax a list of options available. Once user click this option if a variable got 1 a HTML div is added, if i change to another value HTML disappear. This script work as well first time: i click a option and div appear, when i click other option disappear but this cycle is completed if i it another time select option this stop working...
This is the code:
<script type="text/javascript">
$(document).ready(function() {
request_url = 'opzioni-select';
$.ajax({
url: request_url,
success: function(data){
$('#id_opzione').html("");
$.each(data, function(i, item){
var id = item.id;
var parent_id = item.parent;
var nome_opzione = item.nome_opzione;
var nome_parent = item.nome_parent;
$('#id_opzione').append('<option data-opzione="'+ item.nome_parent +'" data-parent="'+ item.parent +'" id="' + item.nome_opzione +'" value="' + item.id + '">' + item.nome_opzione +'</option>');
});
$(document).on('change', '.opzione', function(){
var parent = $('#id_opzione').find(':selected').data('parent');
var nome_parent = $('#id_opzione').find(':selected').data('opzione');
if(parent != null) {
$('#parent-div').append('<label for="parent-div" class=" control-label col-md-4 text-left">'+ nome_parent +'</label><div class="col-md-6"><input type="text" name="valore_parent" class="form-control"></div><div class="col-md-2"></div>');
} else {
$('#parent-div').hide('fast');
}
});
}
});
});
</script>
I tried to change div id in class and switched to "on('change" instead of call directly the #div with .change( but nothing.
Few problems - you're appending a bunch of options - then delegating for a class that i cant see being created.. Id recommend moving the delegated event to the document ready function. . and using the id of the select - and selecting the option after that using this.
<script type="text/javascript">
$(document).ready(function() {
request_url = 'opzioni-select';
$.ajax({
url: request_url,
success: function(data){
$('#id_opzione').html("");
$.each(data, function(i, item){
var id = item.id;
var parent_id = item.parent;
var nome_opzione = item.nome_opzione;
var nome_parent = item.nome_parent;
$('#id_opzione').append('<option data-opzione="'+ item.nome_parent +'" data-parent="'+ item.parent +'" id="' + item.nome_opzione +'" value="' + item.id + '">' + item.nome_opzione +'</option>');
});
});
$('#id_opzione').on('change', function(){
alert('Changed');
var parent = $('#id_opzione').find(':selected').data('parent');
var nome_parent = $('#id_opzione').find(':selected').data('opzione');
if(parent != null) {
$('#parent-div').append('<label for="parent-div" class=" control-label col-md-4 text-left">'+ nome_parent +'</label><div class="col-md-6"><input type="text" name="valore_parent" class="form-control"></div><div class="col-md-2"></div>');
} else {
$('#parent-div').hide('fast');
}
});
}
});
</script>
i have the following JS Code:
//vars
var plz = jQuery('#plz_field_12374786');
var ortsteil = jQuery('#ortsteil_field_31289743');
var is_ortsteil = jQuery('#is_ortsteil_12312487');
//PLZ-Ajax for Ortsteil
jQuery(plz).on('change', function(){
var obj = jQuery(this);
obj.addClass('loading');
jQuery.ajax({
url: '/xxxxxxx/wp-admin/admin-ajax.php?action=get_ortsteil_from_plz&plz='+jQuery(this).val(),
context: document.body
}).done(function(data) {
var ortsteile = jQuery.parseJSON(data);
jQuery(ortsteil).find('option').each(function(){
jQuery(this).remove();
});
if(ortsteile.length>1){
for (var i=0;i<ortsteile.length;i++){
jQuery('<option/>').val(ortsteile[i]).html(ortsteile[i]).appendTo(ortsteil);
}
jQuery(ortsteil).show();
jQuery(ortsteil).attr('disabled', false);
jQuery(is_ortsteil).val('true');
}else{
jQuery(ortsteil).hide();
jQuery(ortsteil).attr('disabled', 'disabled');
jQuery(is_ortsteil).val('false');
}
obj.removeClass('loading');
});
});
The result is an select field like:
<select style="" class="ortsteil" id="ortsteil_field_31289743" name="ortsteil_field_31289743">
<option value="Districtname1">Districtname1</option>
<option value="Districtname2">Districtname2</option>
<option value="Districtname3">Districtname3</option>
</select>
I want to display the PLZ (zip-Code) too... like:
<select style="" class="ortsteil" id="ortsteil_field_31289743" name="ortsteil_field_31289743">
<option value="PLZ - Districtname1">PLZ - Districtname1</option>
<option value="PLZ - Districtname2">PLZ - Districtname2</option>
<option value="PLZ - Districtname3">PLZ - Districtname3</option>
</select>
Can someone help me and tell me what I have to change?
Thanks!!!!
Change:
jQuery('<option/>').val(ortsteile[i]).html(ortsteile[i]).appendTo(ortsteil);
to
jQuery('<option/>').val('PLZ - ' + ortsteile[i]).html('PLZ - ' + ortsteile[i]).appendTo(ortsteil);
Or if PLZ - is a variable, replace the string in the above with it:
jQuery('<option/>').val(plz + ' - ' + ortsteile[i]).html(plz + ' - ' + ortsteile[i]).appendTo(ortsteil);
so below is my snippet. What I want is to create a select dropdown option base from the data attribute (data-select-text and data-select-values) of the currently clicked button, so below is a working snippet except for getting the data-select-values which is the problem because i dont know how to loop it along with the data-select-text so that the result of each select option will have values and text base from the split values of the data-select-text and data-select-values attribute, any ideas, help, suggestions, recommendations?
NOTE: currently, I could only able to use the attribute data-select-text as a select options values and text.
$(document).ready(function(){
$(document).on("click", "button", function(){
if($(this).attr("data-input-type").toLowerCase() === "select"){
var classList = $(this).attr('data-select-text').split(/\s+/);
var field = '<select>';
$.each(classList, function(index, item) {
field += '<option value="' + item.replace(/%/g, ' ') + '">' + item.replace(/%/g, ' ') + '</option>';
});
field += '</select>';
}
$("body").append(field);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-input-type="select" data-select-text="select%1 select%2 select%3" data-select-values="1 2 3">Create a select dropdown option</button>
You could create an array for the values, the same as so did for the text.
Make sure that the order in both data-select-text and data-select-values is the same. Then you can use the index in your $.each loop:
$(document).ready(function(){
$(document).on("click", "button", function(){
var elem = $(this);
if( elem.attr("data-input-type").toLowerCase() === "select" ){
var classList = elem.data('select-text').split(/\s+/),
valueList = elem.data('select-values').split(/\s+/),
field = '<select>';
$.each(classList, function(index, item) {
field += '<option value="' + valueList[index].replace(/%/g, ' ') + '">' + item.replace(/%/g, ' ') + '</option>';
});
field += '</select>';
}
$("body").append(field);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-input-type="select" data-select-text="select%1 select%2 select%3" data-select-values="1 2 3">Create a select dropdown option</button>
The result will be:
<select>
<option value="1">select 1</option>
<option value="2">select 2</option>
<option value="3">select 3</option>
</select>
Here is one way to do it, if I understand correctly. This code does not take into account different text or value lengths. It expects that the text length of options created is always equal to the values length being used.
$(document).ready(function () {
$(document).on("click", "button", function () {
if ($(this).attr("data-input-type").toLowerCase() === "select") {
var classList = $(this).attr('data-select-text').split(/\s+/);
var valueList = $(this).attr('data-select-values').split(' ');
var field = '<select>';
$.each(classList, function (index, item) {
field += '<option value="' + valueList[index] + '">' + item.replace(/%/g, ' ') + '</option>';
});
field += '</select>';
}
$("body").append(field);
})
});
Fiddle: http://jsfiddle.net/32qt0vn8/