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
Related
I have parent directories in <select id="cat1">
I'm trying to get it to populate <select id="cat2"> with children directories
My JQuery looks as follows:
$(function(){
$("#cat1").change(function () {
var thisID = this.value;
$.getJSON("find-child-dirs.php?parent=" + thisID, function(data) {
$("#cat2 option").remove();
$.each(data, function(i, val){
$("#cat2").append('<option value="' + val.id + '">' + val.name + ' </option>');
});
});
});
});
Upon sending the parent ID to my php it returns:
([{"name":"Child Name","id":"8"}])
But nothing is populating the #cat2 select. I've been trying many variations but believe this is closest to clean and simple as I can get. Any suggestions?
I copied and ran most of what you have there and it all works just fine - any chance you're missing the end select tags? ('</select>') (You 'change' a dropdown value of select #cat1 and it does add the options to select #cat2.) I can't test the php request but everything else there works fine. I'm guessing that maybe you're missing '</select>' in two places?
I have a form saving to PHP, which includes the following select input:
<label for="category">
<span>Event Type :</span>
<select name="category" id="category">
<option value="1"> Meeting</option>
<option value="2"> Clean Up</option>
<option value="3"> High Priority</option>
<option value="4"> Special Projects</option>
</select>
</label>
The saved that is then displayed on another page, but instead of displaying the option value, I want it to display the text value - ie. "Meeting", instead of "1"
The script that gets the data from the DB is:
// Get markers from XML - (event_data.php)
$.get("./php/event_data.php", function (data) {
$(data).find("marker").each(function () {
var name = $(this).attr('name');
var description = '<p>'+ $(this).attr('description') +'</p>';
var type = $(this).attr('category');
var edate = $(this).attr('edate');
var point = new google.maps.LatLng(parseFloat($(this).attr('lat')),parseFloat($(this).attr('lon')));
create_marker(point, name, description, edate, type, false, false, false, '');
});
});
And is displayed with this:
var eventContent = $('<div class="event-details">' +
'<h3>Event Details</h3><table class="table">' +
'<tr><th>Event Name: </th><td>' + eName + '</td></tr>' +
'<tr><th>Event Date: </th><td>' + eDate + '</td></tr>' +
'<tr><th>Event Type: </th><td>' + type + '</td></tr>' +
'<tr><th>Event Details: </th><td>' + eForm + '</td></tr>' +
'</table></div>'
);
The simplest solution is to make an php array - the key of the array can be the option value(eg. 1, 2, 3...) and the value can be the text that you want to show.
$categories = [1=>"Meeting", 2=>"Clean up"];
echo ($categories[$_GET['category']]);
Depending of the case it can be much better to have your categories into a database. The value of the options to be the id of the category. Using that approach when you need to show the name of the category you can get it from the database by the id.
Note: If you have relations between categories and something else in the database It is better to make One to Many or Many to Many database relations. And then you can use SQL JOIN syntax to select combined rows from different tables.
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>
Normally when creating dynamically populated drop-downs I'd use a simple foreach loop as below to get the data:
<select name="region" id="region" tabindex="1">
<option value="">Select a Course</option>
<?php foreach ( $courses as $course ) : ?>
<option value="<?php echo $course->coursename; ?>"><?php echo $course->coursename; ?></option>
<?php endforeach; ?>
</select>
*where $courses = select("SELECT * FROM courses");
etc etc
What I'm not sure is possible is to use this in anything like its current form inside a javascript function such as the one below that I've been using on some forms to append additional input fields per the requirements of the user. This works fine for a text input, for example (and as below I can use it if I type out each input option manually) but I'm not at all sure as to the best way to recreate the PHP/mySQL example above where javascript doesn't get in the way. I've tried to look into whether this could easily be done with AJAX but have not been able to find any examples of what I'm trying to do.
<script type="text/javascript">
var count = 0;
$(function(){
$('p#add_field').click(function(){
count += 1;
$('#container').append(
'<h4>Link #' + count + '</h4> '
+'<select id="field_' + count + '" name="fields[]">' + '<option>Select a Course</option>'+'</select>');
});
});
</script>
Many thanks for any advice about the best way to do this.
Update - I eventually managed to answer my own question - solution as per the code below.
<script type="text/javascript">
var count = 0;
$(function(){
$('p#add_field').click(function(){
count += 1;
$('#container2').append(
'<strong>Golf Course ' + count + '</strong>   '
+'<select id="field_' + count + '" name="fields[]">' + "<?php foreach ( $courses as $course ) { $name = $course->coursename; ?>"+"<?php echo '<option value=\''.htmlspecialchars($name).'\'>'.$name.'</option>'; ?>"+"<?php } ?>"+'</select><br />')
});
});
</script>
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
});
});