<script>
function get_customer() {
$("#customer").html('');
$("#customer").html('<option value="0">SELECT CUSTOMER</option>');
$.ajax({
url: '<?=base_url();?>Drop_downs/get_customer/',
type: 'POST',
dataType: 'html',
success: function(response) {
$("#customer").append(response);
console.log(response);
}
});
}</script>
and this is my html
<select name="customer" id="customer" class="form-control select2" required tabindex="1" onFocus="get_customer()">
<option>SELECT CUSTOMER</option>
</select>
Response is not an HTML node, so you can not append it. Use $('#customer').html() instead.
It seems you are receiving option tag (html code) in response, so you've to use $('#customer').html(response);
<script>
function get_customer() {
$("#customer").html('');
$("#customer").html('<option value="0">SELECT CUSTOMER</option>');
$.ajax({
url: '<?=base_url();?>Drop_downs/get_customer/',
type: 'POST',
dataType: 'json',
success: function(response) {
$("#customer").html(response);
console.log(response);
}
});
}</script>
Without knowing what 'response' is we won't be able to provide specific help. Nonetheless, the following should help you:
Adding hard-coded values
To add a new option to it, with the text "Text 1" displaying in the drop down box, and the value "Value1" being what would be submitted from the form, do this:
var select = document.getElementById("customer");
select.options[select.options.length] = new Option('Text 1', 'Value1');
Adding options from an object
If you had an object that you wanted to use the property name as the value for the options, and the property value as the text to display, you could do this:
var myobject = {
ValueA : 'Text A',
ValueB : 'Text B',
ValueC : 'Text C'
};
var select = document.getElementById("customer");
for(index in myobject) {
select.options[select.options.length] = new Option(myobject[index], index);
}
Note that while the above is an object, it's often referred to incorrectly as an associative array, even though technically it is not. It can be accessed as an object e.g. myobject.ValueA, or like an array would be e.g. myobject['ValueA']
Now, this code is generic and should hopefully help you achieve what you require. But, if you could update your question with further detail such as what the response is returning, I would be able to be of more help and provide a solution for you.
Possible JQuery solution:
If you are using JQuery then it becomes even simpler:
$('#customer').append($('<option>', {
value: 1,
text: 'My option'
}));
If you're adding options from a collection of items, you can do the following:
var myOptions = {
val1 : 'Blue',
val2 : 'Orange'
};
var mySelect = $('#customer');
$.each(myOptions, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
You please provide the console.log(response);
Since I do not know your response I assumed that you have taken customer name in 'customer_name'.Please try the below code.
<script>
function get_customer() {
$("#customer").html('');
$("#customer").html('<option value="0">SELECT CUSTOMER</option>');
$.ajax({
url: '<?=base_url();?>Drop_downs/get_customer/',
type: 'POST',
dataType: 'json',
success: function(response) {
var i = 0;
while (i < data.length)
{
$('<option>').text(data[i].customer_name).appendTo('#customer');
i++;
}
}
});
}</script>
Related
I am having one select tag
<select id="pname">
<option>saome data</option>
</select>
After javascript function run i want to display only javascript values in select tag, i tried this as below
<script>
function xyz() {
$.ajax({
url: 'abc.php',
type: "get",
cache: false,
data: {
cat: $('#xyzn').val()
},
success: function(response) {
var myObject = JSON.parse(response);
$('#pname').val(myObject.details[3]);
}
})
}
</script>
like this i am using javascript for display only javascript value but its not working.
please help in this.
If myObject.details[3] is an array you can loop over it and append your values there.
var myObject = JSON.parse(response);
myObject.details[3].forEach(function (val) {
$('#pname').append($('<option>',
{
value: val,
text: val
}));
});
Else just append like the following.
$('#pname').append($('<option>', {
value: myObject.details[3],
text: myObject.details[3]
}));
you can append the option tags using jQuery.
try this
$('#pname').append("<option>"+myObject.details[3]+"</option>")
hope it works
I don't understand your questions completely but I think you want to make a option for data obtained from that file. And you want to remove other options. This can done by:
$('#pname').html("<option>" + myObject.details[3] + "</option>");
if you want to keep the existing data, use this:
$('#pname').append("<option>" + myObject.details[3] + "</option>");
I want to retrieve value from database based on dropdown value using the ajax.
Here I'm attaching the screenshot thats what exactly I need. Once we change the year the result should be changed.
So please help me to do this task. Thanks in Advance :)
<script type="text/javascript">
jQuery(document).ready(function(){
$("#district").change(function() {
var vdcID = {"district_id" : $('#district').val()};
$.ajax({
type: "POST",
data: vdcID,
url: "<?php echo base_url(); ?>admin/ajax/showVdcById",
dataType: 'json',
success: function(data){
$('#vdc').html("<option>Please Select VDC</option> ");
$.each(data, function(i, data){
$('#vdc').append("<option value='"+i+"'>"+data+"</option>");
});
}
});
});
});
this code might help you. it takes value from from a dropdown and updates value on another dropdown based on the id it sends to database
Add onchange event updateMonths() to year select tag
function updateMonths()
{
var selectedYear = $('#year').val();
if(selectedYear!= "")
{
$.ajax({
type: "POST",
data: { "year":selectedYear },
url: "<?php echo base_url(); ?>admin/ajax/getAllMonths",
dataType: 'json',
success: function(data){
$.each(data, function(i, data){
$('#month').append($('<option>', {
value: i,
text: data
}));
});
}
});
}
}
There are two ways to do it:
On drop down change you can reload the entire page with appending the year in url of the page and show your result on the basis of that url appended year value.
You can use ajax call on change of year drop down and load the specific content in a div.
ajax method:
var dropdownSelection = $('#dropdown_id').val();
$.ajax({
url : 'proccess.php',
method : 'get',
data :
{
selection : dropdownSelection,
},
success : function(response)
{
$('#div_result').html(response);
}
});
I have a problem with JQuery, I have a multiple select that i can populate in 2 ways, manually taking some value from another select with a add button, and dynamically, with parsing a json returned from a spring call.
I have no problem to take the value when I add it manually, but, when I populate dynamically the select, the JQuery code doesn't take any value although int the html code there're values in the select.
Here my code:
The empty html selects
<div id="enti_disp_box">
<label>Enti disponibili</label>
<select id="ente" multiple> </select>
<button class="btn" onclick="addEnteInBox();" type="button">Aggiungi</button>
</div>
<div id="enti_att_box">
<label>Enti attivi*</label>
<select id="entiAttivi" multiple></select>
<button class="btn" onclick="removeEnteInBox();" type="button">Rimuovi</button>
</div>
JQuery for populate the second select manually
function addEnteInBox(){
var selectedOptions = document.getElementById("ente");
for (var i = 0; i < selectedOptions.length; i++) {
var opt = selectedOptions[i];
if (opt.selected) {
document.getElementById("entiAttivi").appendChild(opt);
i--;
}
}
}
function removeEnteInBox(){
var x = document.getElementById("entiAttivi");
x.remove(x.selectedIndex);
}
JQuery for populate the second select dynamically
function getEntiByIdUtente(idutente) {
var action = "getEntiByidUtente";
var payload = {
"idUtente": idutente,
"action": action,
"token": token
};
$.ajax({
type: "POST",
url: '../service/rest/enti/management_utenti',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(payload),
resourceType: 'json',
success: function(obj, textstatus) {
obj = obj.trim();
var json = JSON.parse(obj);
//parse response
if (obj.stato == 'error') {
alert('Errore');
} else {
$('#entiAttivi').empty();
//fetch obj.data and populate table
$(json.data).each(function() {
$("#piva").val(this.piva);
$("#codiceipa").val(this.codiceipa);
$('#entiAttivi').append($('<option>', {
value: this.idente,
text: this.ragionesociale
}));
});
}
return json;
},
error: function(obj, textstatus) {
alert('Errore di comunicazione col server!');
}
});
}
JQuery for taking the value of the second select
var entiList = $("#entiAttivi").val();
This line seems to be wrong, it's not working for me
$('#entiAttivi').append($('<option>', {
value: this.idente,
text: this.ragionesociale
}));
would you try replacing by
$('#entiAttivi').append($('<option value="' + this.idente + '">' + this.regionesociale + '</option>');
The append, is trying to create an option with the json as parent, this is not working. please try my code.
I'm hoping someone can help, I'm a relative newbie to javascript and have the following issue. I have a select box with id "mySelect"
that is populated with the following code -
$(document).ready(function(artists){
$.ajax({
type: "GET",
url: "bookinglist.xml",
dataType: "xml",
success: function(artists_list) {
var select = $('#mySelect');
var artistsArr = [];
$(artists_list).find('vw_ADM_BookingListNull[strArtistName]').each(function(){
var artists = $(this).attr('strArtistName');
if ($.inArray(artists, artistsArr) == -1) {
select.append('<option value="'+artists+'">'+artists+'</option>');
artistsArr.push(artists);
}
});
select.children(":first").text("please make a selection").attr("selected",true);
}
});
});
I need to use the selected value as a variable to insert into another piece of code. How do I make a variable from this?
The variable will be used in place of
'vw_ADM_BookingListNull[strArtistName="James Zabiela"]'
in the following code which populates a table from an xml list.
$(document).ready(function(unavailable){
$.ajax({
type: "GET",
url: "bookinglist.xml",
dataType: "xml",
success:(function(unavail){
$(unavail).find('vw_ADM_BookingListNull[strArtistName="James Zabiela"]').each(function() {
var venue = $(this).attr('strVenueName');
var artist = $(this).attr('strArtistName');
var booking_date = $(this).attr('dteEventDate').substr(0,10); //subtr strips date down
if(!(booking_date >= $nowformat && booking_date <= $advformat)){
$('<tr style="display:none;"></tr>')
}
else {
$('<tr></tr>').html('<th>'+booking_date+'</th><td>'+artist+'</td>').appendTo('#unavail');
}
});
})
});
});
I need to handle the possible event that a value has not been selected and so the value of the select box will be "please make a selection", which is set as the default value.
So I guess I need to wrap some kind of if statement around the code that creates the table, so as to not display anything if nothing has yet been selected.
Any help would be massively appreciated as deadlines are looming.
Thanks again.
You appear to be using jQuery, so from the jQuery Documentation
var dropdownValue = $('#mySelect').val();
Anyone know why the following code doesn't seem to work? I'm trying to append whatever is in the textbox to the URL string.
$.ajax({
type: 'POST',
url: 'http://myurl.com/something.php?myname='+$('#myname').val(),
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20;
chart.series[0].addPoint(point[0], true, shift);
chart.series[1].addPoint(point[1], true, shift);
setTimeout(requestData, 5000);
},
cache: false
});
You did not let us know what is not working. $('#myname').val() should work if you really have a myname object.
However, I could not help noticing that you are requesting via POST, but at the same time you are building a query string. Try changing the type to GET and see how it goes.
May be the value of the element contains characters that can alter the meaning of query strings, e.g. if the value begins with &asdf, the url becomes http://myurl.com/something.php?myname=&asdf. If so, try this:
$.ajax({
type: 'POST',
url: 'http://myurl.com/something.php?myname=' + encodeURIComponent($('#myname').val()), // pass via GET
// I assume there is no data to pass -- uncomment otherwise
// data: {
// name1: value1,
// name2: value2,
// },
success:
.
.
.
I would recommend using a variable instead of doing it inline like so:
<script type="text/javascript>
$(document).ready(function(){
var name = $("#myname").val();
//any validation would occur here
var posturl = "http://myurl.com/something.php?myname" + name;
$.ajax({
type: 'POST',
url: posturl,
data: data,
success: success
dataType: dataType
});
});
</script>
<body>
<input id="myname" value="John Doe" />
</body>