I had three drop down menus. Depending on items selected on two lists, the third list should be filled out (ajax post).
This is the html code:
Source Language:
<select name='source_lang' id='source_lang' $dis size='6'>
<option value='en'>EN</option>
<option value='sq'>SQ</option>
.....
</select>
Target Language:
<select name='targ_lang' id='targ_lang' $dis size='6'>
<option value='en'>EN</option>
<option value='sq'>SQ</option>
.....
</select>
Supplier:
<select name='supplier_id' id='supplier_id'>
<option value='1'>Supplier 1</option>
<option value='2'>Supplier 2</option>
</select>
On target and source language change, the supplier select list should be filled out.
Anybody can help me with the jquery? I need to ajax post the source, target language values and as response fill out the supplier select list with the data.
Is this something you're looking for?
$('#targ_lang, #source_lang').change(function(){
$.ajax({
url : '',
method : 'post',
type : 'json',
data : {
select1 : $('#targ_lang').val(),
select2 : $('#source_lang').val()
},
complete : function(result){
var options = $.parseJSON(result);
$('#supplier_id').html("");
for(i=0; i < options.length; i++) {
$('#supplier_id').append(
'<option value="'+ options[i] + '">' + 'Supplier' + options[i] + '</option>'
);
}
});
});
});
On the PHP side you need to send your result like this:
$array = new Array(1,2,3,4); // supplier IDs
echo json_encode($array);
Example using jQuery's .post() method:
$('#targ_lang, #source_lang').change(function(){
$.post("test.php", { source: $('#source_lang').val(), target: $('#targ_lang').val()},
function(data) {
//Change the data of the 3rd select
});
});
Related
I am having an issue with an ajax function populating a list box with null options. I am fairly new to this and must be overlooking something. The DB connection is done through Sugarcrm and works, as I am using it for an auto complete function as well. I just can't seem to get the options to populate anything besides empty.
index.php
<script>
$(document).ready(function(){
$.ajax({
url: 'search.php',
type: 'json',
success:function(response){
var len = response.length;
$("#sel1").empty();
for( var i = 0; i<len; i++){
$("#sel1").append("<option value='"+name+"'></option>");
}
}
});
});
</script>
<select id="sel1" multiple size="6">
<option value="0">- Select -</option>
</select>
search.php
<?php
global $db;
$rolelistQry = "SELECT distinct name from acl_roles";
$rolelistData = $db->query($rolelistQry);
$name_array = array();
while( $row = $rolelistData->fetch_assoc()){
$name = $row['name'];
$name_array[] = array("name" => $name);
}
echo json_encode($name_array);
?>
$("#sel1").append("<option value='"+name+"'></option>");
name variable doesn't exists. Try changing it to response.name
$("#sel1").append("<option value='"+response.name+"'>"+response.name+"</option>");
I'm guessing you're getting a bunch of blank options?
<option value="0">- Select -</option>
Is the right syntax: the option's value (when selected) will be 0, and it'll display Select.
So when you append new items in the ajax callback you'll want to have the options show something:
<option value='name'>NAME</option>
You're trying to access response as an array, right?
You'll need to do something like
$("#sel1").append("<option value='"+response[i].name+"'>"+response[i].name+"</option>");
to get the items out of the response array. (modified from majorlogic's answer)
In fact your are not looping through the array name,
This should work :
<script>
$(document).ready(function(){
$.ajax({
url: 'search.php',
type: 'json',
success:function(response){
var result = $.parseJSON(response);
var len = result.length;
$("#sel1").empty();
for( var i = 0; i<len; i++){
$("#sel1").append("<option value='"+ result[i]['name'] +"'></option>");
}
}
});
});
</script>
<select id="sel1" multiple size="6">
<option value="0">- Select -</option>
</select>
I am trying to get the values for the next drop-down from a database, which will be dependent on two previous drop-downs. The values for first two drop-downs are listed in the file itself. I want the second drop-down to be enable after selecting values from first, and similarly for third after second. Kindly help.
HTML code below:
<form>
<select id="branch" name="branch" class="form-control" onchange="showUser(this.value)">
<option value="">Select</option>
<option value="1">Civil</option>
<option value="2">Computer</option>
<option value="3">Mechanical</option>
<option value="4">Electronics and Telecommunications</option>
<option value="5">Electrical and Electronics</option>
<option value="6">Information Technology</option>
</select>
<select id="semester" name="semester" class="form-control" disabled>
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5">V</option>
<option value="6">VI</option>
<option value="7">VII</option>
<option value="8">VII</option>
</select>
</form>
jquery is:
<script>
$(document).ready(function(){
document.cookie = "s =hello" ;
console.log('hello');
$("#semester").attr("disabled", true);
$("#branch").change(function(){
$("#semester").attr("disabled", false);
$b = $('#branch').val();
$("#semester").change(function(){
$s = $('#semester').val();
$("#sub_code").attr("disabled", false);
console.log($s);
if($s!=1||$s!=2)
$s = $b+$s;
<?php
$s= $_COOKIE['s'];
$sql = "SELECT * FROM subjects WHERE sem_code=`$s`";
?>
});
});
});
</script>
I did not run the query since it is not assigned properly yet.
You can't include php code in javascript , the first is executed on the server side, the second is executed on the client side which means that you can't re-execute only if you resend a request to the server, obviously this is usually done by submitting forms, BUT sometimes -like in your case- we don't want to reload the whole page for each request ! and for this purpose we use AJAX
ajax sends post/get request to a specified php page which does the desired server-side tasks (updating data in the database, selecting some results from database, dealing with sessions maybe, etc...)
try something like this:
var pathurl='/path/to/your/php/file';
var params={}; //the parameters you want to send
params['semester']=$s;
var requestData= $.ajax({
type: 'POST',
url: pathurl,
cache: 'false',
data: params,
dataType: "json",
beforeSend: function () {
//here you can begin an animation or anything...
},
complete: function () {
//here you can stop animations ...
},
success: function (response) {
console.log(response); //check your console to verify the response
//loop other elements inside response
$.each(response, function (index, resultArray) {
//do something : in your case append to dropdown a new option
});
}
});
requestData.error(function () {
alert("error");
});
you should create a php file with the path specified in the above code, and there you can extract what you need from the database table, store values in an array and finally use:
echo json_encode($resultArray);
hope this was helpful
I am having trouble with populating chosen plugin multiple get with data from an ajax call. I tired following the below posts,
Jquery Chosen plugin - dynamically populate list by Ajax
Multiple Select - Chosen jQuery
Jquery chosen ajax call populate multiselelect not working
But did not help. The data just doesn't get filled :( my ajax request is as follows,
<script type="text/javascript" lang="javascript">
function doGetTag() {
alert('here');
$.ajax({
url: 'index.php/rest/resource/qtag',
//data: data,
success: function(data) {
var jsonObj = JSON.parse(data);
var tags = "";
var curVal = document.getElementById('tags').innerHTML;
for(var i = 0; i < jsonObj.length; i++) {
var tagObj = jsonObj[i];
//document.write("<option>" + tagObj.tagName + "</option>");
var tagHtml = "<option>" + tagObj.tagName + "</option></br>";
tags = tags + tagHtml ;
}
tagTotal = curVal + tags;
document.getElementById('tags').innerHTML = tagTotal;
alert( document.getElementById('tags').innerHTML);
},
type: "get"
});
}
</script>
which returns a json string. the data gets properly displayed over here if I alert it out on a message box. But the issue is how to populate the multiple get plugin? following is my html,
<select data-placeholder="Tag your question here" style="width:350px;height:50px;" multiple class="chosen-select" id="tags">
<option value="" ></option>
</select>
I am very new to this plugin and would very much appreciate your help :)
FYI
I did it using direct php as follows,
<select data-placeholder="Tag your question here" style="width:350px;height:50px;" multiple class="chosen-select" id="tags">
<option value="" ></option>
<?php
$con=mysqli_connect("localhost","user","pass","db");
$result = mysqli_query($con,"SELECT * FROM tags");
while($row = mysqli_fetch_array($result))
{
echo"<option>".$row['tagName']."</option>";
echo"</br>";
}
?>
</select>
and it properly displays the data, but the project requirement states it is a MUST to use AJAX request to populate data. Thank you very much :) your expert advice is very much appreciated :)
Fist of all check your url: 'index.php/rest/resource/qtag',
This may work :
success: function(data) {
$("#tags").html(data).trigger('liszt:updated');
}
where data = (echo from sourse)
<option value=0> </option>
<option value=1> Option 1 </option>
<option value=2> Option 2 </option>
I have category drop-down list in my project e.g
<select name="salescategory_id" id="salescategory_id">
<option value="">Sales Category</option>
<option value="1">HPC</option>
<option value="2">BTY</option>
<option value="3">GRO</option>
<option value="4">OTH</option>
</select>
I have to edit this list with json. I am using the following approach to edit this list and other form fields:
function editamazonresearch(id)
{
$.ajax({
type: "GET",
url: '<?php echo SITE_URL;?>products/list/' + id,
success: function(data){
$("#title").val(json_data_object.data.amazontitle);
options = '<option value="' + json_data_object.Salecategory.id + '">' + json_data_object.Salecategory.salescategory + '</option>';
$("select#salescategory_id").html(options);
$("#usercomment").val(json_data_object.data.usercomment);
}
});
}
But this line of code doesn't give me the desire out put as it removes other option values while editing.
From your javascript it doesn't appear that you are looping over a list of products and adding anything.
You are just replacing the content of the select#salescategory_id with the options string
From your question I would expect something more like
$.each(data, function(k, v) {
option = '<option value="' + v.Salecategory.id + '">' + v.Salecategory.salescategory + '</option>';
$("select#salescategory_id").append(option);
});
in your success method
But without knowing the data structure of the response to your ajax call, its very hard to guess at what you are trying to do
Hi guys i have a combobox with jquery - but i cant make the second one populated when the first select coming selected alredy. im try to get the value without change the select.
<form>
<select name="tipo" id="Tipo_Id" class="buscaTiposVeiculos">
<option value="1" selected="selected">teste1</option>
<option value="2">teste2</option>
<option value="3">teste3</option>
<option value="4">teste4</option>
</select>
<select name="marca" class="recebeMarcas">
<option value="">--- Select ---</option>
</select>
</form>
jquery
$('select.buscaTiposVeiculos').change(function () {
$("select.recebeMarcas").html('<option value="">Carregando...</option>');
// var opt = $("select.buscaTiposVeiculos"); tried like this
// var val = $(this).val(); tried like this
// var val = $(this).find('option:selected').val(); not works
$('select.recebeMarcas >option').remove();
$.post('/inc/geraCidades.php', {
tipov: $(this).val(),
tipo: "tipo"
}, function (data) {
$('select.recebeMarcas').html('<option value="">Selecione a Marca</option>' + data);
});
});
your selected value is
$("#Tipo_Id option:selected").val();
To trigger change event on page load and populate second select automatically. Some commented code can be removed
/* create the change handler use ID is better selector for efficiancy*/
$('#Tipo_Id').change(function() {
/* this populates second select with one option*/
$("select.recebeMarcas").html('<option value="">Carregando...</option>');
/* this removes option populated in line above*/
$('select.recebeMarcas >option').remove();
$.post('/inc/geraCidades.php', {tipov: $(this).val(), tipo : "tipo"}, function(data) {
$('select.recebeMarcas').html('<option value="">Selecione a Marca</option>'+data);
});
/* trigger the change event on page load*/
}).change();