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...
Related
I have a form input field loaded by jquery based on user selection but the HTML form validation and even jquery form validation not working for the input field loaded by jquery.
<tr>
<td colspan="2">
<select name="usdtnetwork" required="required" id="usdtnetwork" onChange="getaddressForm()" title="Please select your USDT Network">
<option>::: Choose your USDT Network :::</option>
<option value="ERC20">ERC20 (ETH)</option>
<option value="TRC20">TRC20 (TRON)</option>
<option value="BEP20">BEP20 (BNB)</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<div align="left">
<span id="showinputfield"></span>
</div>
</td>
</tr>
This is my jquery (Noticed I tried e.preventDefault() but can't figure what am doing wrong so I commented it out)
<script>
/*$('.thisbuyUSDT').click(function (e) {
var myForm = jQuery( "#catalog_formusdt" );
// html 5 is doing the form validation for us,
// so no need here (but backend will need to still for security)
if ( ! myForm[0].checkValidity() )
{
// bonk! failed to validate, so return true which lets the
// browser show native validation messages to the user
return true;
}
e.preventDefault(); */
function getaddressForm() {
//e.preventDefault();
$("#loaderIcon").show();
jQuery.ajax({
url: "usdt_form_field.php",
data:'usdtnetwork='+$("#usdtnetwork").val(),
type: "POST",
success:function(data){
$("#showinputfield").html(data);
$("#loaderIcon").hide();
},
error:function (){}
});
}
//}
</script>
you have to reset validation on form after add some element (after $("#showinputfield").html(data);) by :
myForm.removeData("validator").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(myForm );
if it doesn't work please share complete html and jquery code
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.
I have a program that has multiple dropdown menus and I am running it as a chrome unpacked extension but I cannot get any of the dropdown menus to save after I reopen the app. How can I achieve this? I have already attempted some solutions but they have not worked. The dropdowns are in a table format.(Note: This is not all of my code but to make it more simple I only included two of my dropdowns). Thanks!
<!-- <head>
<link rel="stylesheet" href="styles.css">
<script src="java.js"></script>
</head> -->
<body>
<div class="imgcontainer">
<img src="images.jpeg" alt="Avatar" class="image">
</div>
<table id="t01">
<tr>
<th>Name</th>
<th>ID</th>
<th>In Use</th>
<th>Quantity</th>
<th>Connected to...
*Based on OUTPUT*</th>
<th>Comment</th>
</tr>
<tr><td id="master01">1/4 Inch Audio Cables</td>
<td>1-2</td>
<td>--</td>
<td>2</td>
<td><select align="center" id="master01dropdown">
<option value="option01">option01</option>
<option value="option02">option02</option>
<option value="option03">option03</option>
<option value="option04">option04</option>
<option value="option05">option05</option>
<option value="option06">option06</option>
<option value="Null">Null</option>
<option value="Not Defined">Not Defined</option>
<option value="Not in Use">Not in Use</option>
</select></td>
<td></td>
</tr>
<tr><td align="center" id="cable01">6 feet</td>
<td>1</td>
<td><input align="center" checked type="checkbox" name="void" value="In use"><br></td>
<td>1</td>
<td><select id="cable01dropdown">
<option value="option01">option01</option>
<option value="option03">option02</option>
<option value="option03">option03</option>
<option value="option04">option04</option>
<option value="option06">option05</option>
<option value="option07">option06</option>
<option value="Null">Null</option>
<option value="Not Defined">Not Defined</option>
<option value="Not in Use">Not in Use</option>
</select></td>
<td></td>
I added the suggested code and it still will not work. *Note: I am not very good with JavaScript.*
chrome.storage.sync.set({ items: 'master01,cable01,cable02'});
chrome.storage.sync.get('items', function(data) {
var items = data.items.split(',');
items[0] => (master01)
items[1] => (cable01)
items[2] => (cable02)
});
Store items in chrome storage:
Suppose you save comma separated items
chrome.storage.sync.set({ items: 'item1,item2,item3,item4'});
fetch it using:
chrome.storage.sync.get('items', function(data) {
var items = data.items.split(',');
// items[0] => item1
// items[1] => item2
});
I'll detail how to save and load an example options menu, containing a textbox and a checkbox. In your example, you'll want to use document.getElementById('master01dropdown').value in your save.
Setting up
First, create a file options.html in the root of the project, containing your form.
Next, make sure this options page is registered in your manifest.json:
"options_ui": {
"page": "options.html",
"chrome_style": true
}
At the bottom of your options.html, before </body>, include a JavaScript file:
<script src="js/options.js"></script>
Your form should also include a Save button somewhere with id save:
<button id="save">Save</button>
Saving
Inside your /js/options.js file, register the save() function to run when your save button is clicked:
document.getElementById('save').addEventListener('click', save);
Your save() function should use Chrome Storage to save every element from your form. For example, to save a textbox and a tickbox:
function save() {
var sitesToSave = document.getElementById('sites').value;
var displayPopup = document.getElementById('popup').checked;
chrome.storage.sync.set({
sites: sitesToSave,
popup: displayPopup
}, displaySavedMessage);
}
Loading
Inside your /js/options.js file again, register the load() function when your form is loaded:
document.addEventListener('DOMContentLoaded', load);
Now set those form fields from earlier with the saved values (and provide default values), again using Chrome Storage:
function load() {
chrome.storage.sync.get({
sites: 'supersecretsite.com',
popup: false
}, function(items) {
document.getElementById('sites').value = items.sites;
document.getElementById('popup').checked = items.popup;
});
}
Done! Settings can now be saved and loaded.
All code in this answer is from a very simple example Chrome Extension I made, which also has an accompanying detailed tutorial.
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!
I am trying to list the options for a select tag from server with the help of knockout options binding. I have a PHP page which returns the JSON data which is pushed to a knockout observable array which is binded to the select tag. But somehow it is not working, please refer to the following code for reference:
HTML:
<div class="form-group">
<select class="form-control">
<option data-bind="options: Country_Names, optionsText: 'country_name'"></option>
</select>
</div>
JavaScript:
$(document).ready(function(){
function appModel(session_info){
/* Session Info related bindings are commented as they are working fine */
var self = this;
this.Country_Names = ko.observableArray();
// Bindings related to the batch processing
$(function(){
$.ajax({
url:"../api/master_list.php",
type:"get",
data:{mastertype: '1'},
cache:false,
success:function(country_list){
ko.mapping.fromJSON(country_list, {}, self.Country_Names);
}
});
});
};
$.ajax({
url:"../api/sessions.php",
type:"get",
data: {rqtype: '1'},
cache:false,
success:function(session_info){
var data = $.parseJSON(session_info);
if (data.status == 'Invalid_id'){
window.location.replace('../files/main.html');
} else {
ko.applyBindings(new appModel(session_info));
}
}
});
});
Sample JSON:
[{"country_name":"Albania"},{"country_name":"Chile"},{"country_name":"Cuba"}]
Question, Why are the options not listed in the select tag? Am i missing something obvious?
You are data-binding the option element, whereas you want to put the bindings on the select, like this:
<select class="form-control" data-bind="options: Country_Names, optionsText: 'country_name'">
</select>
The <option...> element is gone; the options will be generated by Knockout.
Note that the relevant documentation is very clear on how all this works. If you haven't already, I suggest (re-)reading it.
Or, see this full demo:
var data = [{"country_name":"Albania"},{"country_name":"Chile"},{"country_name":"Cuba"}];
ko.applyBindings({ Country_Names: data });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: Country_Names, optionsText: 'country_name'"></select>