We Keep Coding

update select option element with Ajax result

i have two select option list with values retrieved from db .
<select id="userid" onchange="selSuj()">
<option value="1" selected="selected">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select>
<select id="subject">
<div id="determineSubj">
<option value="1" selected="selected">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</div>
</select>
<script>
function selSuj(){
var x = $('#userid').val();
$.ajax({
type:'POST',
url:'same page url',
data:{
'userid':x
},
success: function(result){
document.getElementById("determineSubj").innerHTML = result;
}
})
;
}
the first select option(userid),when option selected, should populate the corresponding values in the second select option(subject), using the user option value(eg 1,2,3) as search p.key to the subject db.
I have tried using ajax, it worked out well on alert(result), but does not update the second select option values. please help.

A select should not contain a <div>.
As we can see from this brief demo, doing so makes the div inaccessible to JavaScript, because it doesn't consider it to be a valid part of the DOM:
document.addEventListener("DOMContentLoaded", function() {
console.log(document.getElementById("determineSubj"));
});
<select id="subject">
<div id="determineSubj">
<option value="1" selected="selected">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</div>
</select>
In any case, even if it was valid, it's entirely unnecessary for your purpose. You can just update the HTML of the select element directly.
Change the HTML to:
<select id="subject">
<option value="1" selected="selected">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select>
And the "success" callback to:
success: function(result) {
document.getElementById("subject").innerHTML = result;
}
and there shouldn't be any problem.

Select2 can not select option

I am using select2 4.0.6 in my java project. use JSON API for source data. Its shown dropdown items but can not select single item by typing. But selecting by mouse its works fine.
Here is my JSFiddle link
And my sample code as follows-
function loadMedicines(manufacturerId) {
$("[id $= '.medicine']").select2({
ajax: {
url: url+'?id='+manufacturerId,
dataType: 'json',
processResults: function (jsonData) {
return {
results: $.map(jsonData.data, function (item) {
return {
id: item.id,
text: item.brandName
}
})
};
}
}
});
}
<label>Manufacturer</label>
<select id="manufacturer" name="manufacturer" onchange="loadMedicines(this.value);">
<option value="0">Please Select</option>
<option value="2">ACI</option>
<option value="1">Beximco</option>
<option value="3">Square</option>
</select>
<label>Medicines</label>
<select id="lists0.medicine" name="lists[0].medicine" class="reqDetMed">
<option value="">Please Select</option>
</select>
<select id="lists1.medicine" name="lists[1].medicine" class="reqDetMed">
<option value="">Please Select</option>
</select>

Dropdown child menu not displaying any data?

I have this simple dropdown menu in my codeigniter form. When clicking dzongkhag(district) it should display the list of geogs(towns), but, instead it do not do so. The drop down menu that I have is not the best one but that is what I could come up with after trying (for many weeks) many times unsuccessfully. I will be grateful if someone could help me out/solve/advice on this.
Here are the snippets.
view.php
<label >Dzongkhag: </label>
<select id="user_dzongkhag" name="dzongkhag" >
<option>Select Dzongkhag</option>
<option value="Bumthang">Bumtang</option>
<option value="Chhukha">Chhukha</option>
<option value="Dagana">Dagana</option>
<option value="Gasa">Gasa</option>
<option value="Haa">Haa</option>
<option value="Lhuentse">Lhuntse</option>
<option value="Monggar">Monggar</option>
<option value="Paro">Paro</option>
<option value="Pema Gatshel">Pema Gatshel</option>
<option value="Punakha">Punakha</option>
<option value="Samdrup Jongkhar">Samdrup Jongkhar</option>
<option value="Samtse">Samtse</option>
<option value="Sarpang">Sarpang</option>
<option value="Thimphu">Thimphu</option>
<option value="Trashigang">Trashigang</option>
<option value="Trashi Yangtse">Trashi Yangtse</option>
<option value="Trongsa">Trongsa</option>
<option value="Tsirang">Tsirang</option>
<option value="Wangdue Phodrang">Wangdue Phodrang</option>
<option value="Zhemgang">Zhemgang</option>
</select>
<label >Geog:</label>
<select id="user_geog" name="geog" >
<option> select geog</option>
</select>
javascript (which I implement it in the view.php instead of js folder)
$(document).ready(function(){
$('#user_dzongkhag').change(function(){
$('#user_geog').html('<option> Fetching...</option>');
var user_dzongkhag =$('#user_dzongkhag').val();
//alert(new_div);
$.ajax({
type:"post",
data:"user_dzongkhag="+user_dzongkhag,
url:"<?php echo site_url('ajax/select_auth_geog/'); ?>",
cache:false,
success:function(resp){
//alert(resp);
$('#user_geog').html(resp);
}
});
});
});
controller.php
public function select_auth_geog(){
$user_dzongkhag= $this->input->post('user_dzongkhag');
$returnGeog=$this->ajax_model->select_auth_geog($user_dzongkhag);
foreach ($returnGeog as $key) {
echo '<option value="'.$key['name'].'">'.$key['name'].' </option>';
}
}
model.php
public function select_auth_geog($user_dzongkhag){
if($user_dzongkhag=='Bumtang'){
$user_dzongkhag=1;
}elseif($user_dzongkhag=='Chhukha'){
$user_dzongkhag=2;
}elseif($user_dzongkhag=='Dagana'){
$user_dzongkhag=3;
}elseif($user_dzongkhag=='Gasa'){
$user_dzongkhag=4;
}elseif($user_dzongkhag=='Haa'){
$user_dzongkhag=5;
}elseif($user_dzongkhag=='Lhuntse'){
$user_dzongkhag=6;
}elseif($user_dzongkhag=='Monggar'){
......
........

Try switching these two lines, you may be deleting the select box value before it is stored in user_dzongkhag.
$(document).ready(function(){
$('#user_dzongkhag').change(function(){
$('#user_geog').html('<option> Fetching...</option>'); <-------------
var user_dzongkhag =$('#user_dzongkhag').val(); <-------------
//alert(new_div);
$.ajax({
type:"post",
data:"user_dzongkhag="+user_dzongkhag,
url:"<?php echo site_url('ajax/select_auth_geog/'); ?>",
cache:false,
success:function(resp){
//alert(resp);
$('#user_geog').html(resp);
}
});
});
});

e.preventDefault not stopping redirect on form

I realise this has been asked a myriad of times in the past - though I have looked through 4 or 5 of these threads and for the life of me I cannot figure out what is causing my form to redirect! Please help!
Here is my form submission function:
Every time I select an option from my element, the form fires off and (successfully) posts to form.php, though it also redirects even though I've included event.preventDefault(); Can you spot anything that may be blocking this?
<script type="text/javascript">
$(document).ready(function(){
$('#quote_form').submit(function(e) {
e.preventDefault();
select();
});
});
function select(){
error(0);
$.ajax({
type: "POST",
url: "form.php",
data: $('#quote_form').serialize(),
dataType: "json",
cache: false,
success: function(data)
{
$("#graph_var_1").html(data.message1);
$("#graph_var_2").html(data.message2);
$("#graph_var_3").html(data.message3);
$("#graph_var_4").html(data.message4);
}
});
}
function result(act,txt)
{
if(txt) $('#subcategory').html(txt);
}
</script>
EDIT: I was mucking around with it before posting (trying to get it to work) and must have missed the (e) (event) inconsistency - though I have changed it back and still no luck. Any ideas?
HTML:
<form id="quote_form" name="quote_form" method="post" action="form.php">
<label>Quarterly Power Bill Value</label>
<select name="bill_value" id="bill_value" size='1' onChange='this.form.submit();'>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="450">450</option>
<option value="500">500</option>
<option value="550">550</option>
<option value="600">600</option>
<option value="650">650</option>
<option value="700">700</option>
<option value="750">750</option>
<option value="800">800</option>
<option value="850">850</option>
<option value="900">900</option>
<option value="950">950</option>
<option value="1000">1000</option>
<option value="1050">1050</option>
<option value="1100">1100</option>
<option value="1150">1150</option>
<option value="1200">1200</option>
<option value="1250">1250</option>
<option value="1300">1300</option>
<option value="1350">1350</option>
<option value="1400">1400</option>
<option value="1450">1450</option>
<option value="1500">1500</option>
<option value="1550">1550</option>
<option value="1600">1600</option>
<option value="1650">1650</option>
<option value="1700">1700</option>
<option value="1750">1750</option>
<option value="1800">1800</option>
<option value="1850">1850</option>
<option value="1900">1900</option>
<option value="1950">1950</option>
<option value="2000">2000</option>
<option value="2050">2050</option>
<option value="2100">2100</option>
<option value="2150">2150</option>
<option value="2200">2200</option>
<option value="2250">2250</option>
<option value="2300">2300</option>
<option value="2350">2350</option>
<option value="2400">2400</option>
<option value="2450">2450</option>
<option value="2500">2500</option>
<option value="2550">2550</option>
<option value="2600">2600</option>
<option value="2650">2650</option>
<option value="2700">2700</option>
<option value="2750">2750</option>
<option value="2800">2800</option>
<option value="2850">2850</option>
<option value="2900">2900</option>
<option value="2950">2950</option>
<option value="3000">3000</option>
</select><br />
<label>Approx Power Usage between 8am to 4pm</label>
<select name="peak_usage" id="peak_usage" size='1' onChange='this.form.submit();'>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select><br />
</form>
Console: only shows a couple of missing image errors, nothing else.
SOLUTION: Turns out this was being caused by the way my form was submitting. I replaced the OnClick calls with a submit button - and it worked.

here is the mistake, your parameter name is e while you are using event when calling preventDefault():
$('#quote_form').submit(function(e) {
-----> event.preventDefault(); ^
|
|
change it to match the parameter name:
$('#quote_form').submit(function(event) {
event.preventDefault();
or:
$('#quote_form').submit(function(e) {
e.preventDefault();
or another way:
$('#quote_form').submit(function() {
select();
return false;
});

Try this:
$('#quote_form').submit(function(e) {
e.preventDefault();
select();
});
instead of:
$('#quote_form').submit(function(e) {
event.preventDefault();//error event is undefinded
select();
});
Update
If you add onlick="this.form.submit()" its submitting form and firing jquery submit event. I found a solution:
remove onclick from select and add click event in document.ready, also remove error(0) its giving error error not defined.
$("#peak_usage").change(function(){
$('#quote_form').submit();
});
You can also set:
<select name="peak_usage" id="peak_usage" size='1' onchange="$('#quote_form').submit();">
^^^^^^^^^^^^^^^^^^^^^^^^
Reason: Because this.form will give you the form of the form element.
and $('#quote_form') gives you form object.
DEMO

Either try to change the event to e
$('#quote_form').submit(function(e) {
e.preventDefault();
select();
}
Or change the button type of quote_form to button from submit and give click event on that like
$('#quote_form').click(function() {
select();
}

You have parameter variable e and using event inside function. So change parameter variable to event or make e.preventDefault()
$(document).ready(function(){
$('#quote_form').submit(function(event) {// (e) change to (event)
event.preventDefault();
select();
});

Javascript Conditional Fields (Zendesk Lotus)

I am trying to configure some javascript code to make a conditional field app in Zendesk Lotus. Below is the javascipt template and my current html. Could someone give me an example of how I would change the java template to suit my html? I would like to only show the second drop down form field (ticket_fields_21552756) when the option 'qa' is selected from the first drop down list (ticket_fields_21013678). Once someone shows me how to do this I will be able to do the rest myself :)
PS, the javascript must stay in the below format.
Thanks in advance for the help!
Javascript:
(function(){
var projectRequest = ['280865'],
otherHelpesk = ['279466'],
hideAll = [].concat(projectRequest, otherHelpesk),
moodFieldMap = {
cat:[].concat(projectRequest),
dog:[].concat(otherHelpesk),
dolphin: [].concat(projectRequest, otherHelpesk)
};
return {
appID: 'https://github.com/zendesk/widgets/tree/master/ConditionalFieldsApp',
defaultState: 'loading',
type2thing: '',
events: {
'app.activated': 'setValue',
'ticket.custom_field_21631456.changed': 'typeII'
}, //end events
typeII: function(){
this.hide(hideAll);
this.type2thing = this.ticket().customField('custom_field_21631456');
//console.log('control field value: ' + this.type2thing);
if (this.type2thing != null) {
this.show(moodFieldMap[this.type2thing]);
}
},
setValue: function() {
//console.log('activated', arguments);
this.typeII();
},
hide: function(fields){
fields.forEach(function(field) {
this.ticketFields('custom_field_' + field).hide();
}, this);
},
show: function(fields) {
fields.forEach(function(field) {
this.ticketFields('custom_field_' + field).show();
}, this);
}
};
}());
My HTML:
<select id="ticket_fields_21013678" name="ticket[fields][21013678]" tabindex="8"><option value="">-</option>
<option value="depreqaccount_management">Account Management</option>
<option value="ce_vp">CE/VP</option>
<option value="city_management">City Management</option>
<option value="city_planning">City Planning</option>
<option value="customer_service">Customer Service</option>
<option value="depreq_images">Images</option>
<option value="partner_management">Partner Management</option>
<option value="production">Production</option>
<option value="qa">QA</option>
<option value="senior_management">Senior Management</option>
<option value="depreq_writers">Writers</option>
<option value="depreq_bdm">BDM</option></select>
<select id="ticket_fields_21552756" name="ticket[fields][21552756]" tabindex="9"><option value="">-</option>
<option value="responsibility_account_manager">Account Manager</option>
<option value="responsibility_bdm">BDM</option>
<option value="responsibility_ce_vp">CE/VP</option>
<option value="responsibility_city_manager">City Manager</option>
<option value="responsibility_city_planner">City Planner</option>
<option value="responsibility_customer_service">Customer Service</option>
<option value="responsibility_image_designer">Images</option>
<option value="responsibility_merchant">Merchant</option>
<option value="responsibility_partner_manager">Partner Manager</option>
<option value="responsibility_producer">Producer</option>
<option value="responsibility_qa">QA</option>
<option value="responsibility_writer">Writer</option></select>

You can see the latest version of the new Zendesk agent interface at https://github.com/zendesklabs/conditional_fields_app