Here am getting the result as follows
Now i want to show that content inside a select box with option values so how can we do that..
Here i have written like this
var data = data.user_contacts
var formoption = "";
$.each(data, function(v) {
var val = data[v]
formoption += "<option value='" + val + "'>" + val + "</option>";
});
$('#user_contacts').html(formoption);
but am getting value as undefined
You need to use keyname to get required values i.e : ContactID ,UserID..etc .
Demo Code :
var data = {
"user_contacts": [{
"ContactID": 1,
"UserID": 12,
"EmailAddress": "A#gmail.com"
}, {
"ContactID": 2,
"UserID": 122,
"EmailAddress": "A2#gmail.com"
}]
}
var datas = data.user_contacts
var formoption = "";
$.each(datas, function(v) {
var val = datas[v]
//use key to get value
formoption += "<option value='" + val.ContactID + "'>" + val.EmailAddress + "</option>";
});
$('#user_contacts').html(formoption);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="user_contacts">
</select>
Hope this will get the val.
var data = data.user_contacts
var formoption = "";
$.each(data, function(index,val) {
formoption += "<option value='" + val + "'>" + val + "</option>";
});
$('#user_contacts').html(formoption);
Related
I have a Jquery function that is using getJson. I am trying to form something like www.mysite.com/?state=oregon. According to Jquery ("Data that is sent to the server is appended to the URL as a query string..."), but I get all the values in the json data. What I am doing wrong.
Here is my code
function changeLine(line){
$('#table_lines').html('');
$.getJSON("../index.php", {, line}, function(data){
var line_data = '';
$.each(data, function(key, value){
line_data += '<tr id="' +value.line_id+'">';
line_data += '<td>' + otherValueTime(value.MatchTime)+'</td>';
line_data += '<td>' + value.home+'</td>';
line_data += '<td>' + value.away+'</td>';
for(i=0; i < value.Cases.length; i++){
console.log(value.Cases[i].CaseType + ' ' + value.Cases[i].CaseAway + ' ' + value.Cases[i].CaseHome);
if(value.Cases[i].CaseType === "Game"){
line_data += '<td>' + value.Cases[i].CaseAway +'</td>';
line_data += '<td>' + value.Cases[i].Total +'</td>';
line_data += '<td>' + value.Cases[i].Over +'</td>';
}
}
});
$('#table_lines').append(line_data);
});
}
On the line with this code "{, line}", I tried putting the key value from the json array, like {id: line}. What I want to do is to get a group of cases according to the key.
I would like to know how you do that. I want to change it according to the option value. I do get data from the server, but I get all the data. Here is how I call that function
$( "select" )
.change(function () {
var str = "";
$( "select option:selected" ).each(function() {
str = $( this ).val();
$.ajax({
method: "POST",
url: "../index.php",
data: { 'id' : str }
})
});
changeLinea(str);
})
.change();
I don't know why but I have a piece of code which works on my system but is not working on WAMP or Shared server.
Below is my piece of code :-
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
(function($) {
$.ajax({
url:"select2.json",
type:"GET",
dataType:"json",
success:function(data){
var selectedDepartment, selectedSubproj;
$.fn.changeType = function() {
var options_projname = '<option>Select<\/option>';
$.each(data, function(i, d) {
options_projname += '<option value="' + d.projname + '">' + d.projname + '<\/option>';
});
$("select#projname", this).html(options_projname);
$("select#projname").change(function() {
var index = $(this).get(0).selectedIndex;
var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option
selectedDepartment = d;
var options = '';
if (index > 0) {
options += '<option>Select<\/option>';
$.each(d.subproj, function(i, j) {
options += '<option value="' + j.title + '">' + j.title + '<\/option>';
});
} else {
options += '<option>Select<\/option>';
}
$("select#subproj").html(options);
});
$("select#subproj").change(function() {
var index = $(this).get(0).selectedIndex;
selectedSubproj = selectedDepartment.subproj[index -1];
var options = '';
if (index > 0) {
$.each(selectedSubproj.unit, function(i, b) {
//options += '<option value="' + b.name + '">' + b.name + '<\/option>';
options += '<input type="checkbox" name="' + b.name + '" value="' + b.name + '">' + b.name + '<br/>';
});
} else {
options += '<option>Select<\/option>';
}
$("#unit").html(options);
});
};
}
});
})(jQuery);
$(document).ready(function() {
$("form#search").changeType();
});
</script>
<form id="search" action="" name="search">
<select name="projname" id="projname">
<option>Select</option>
</select>
<select name="subproj" id="subproj">
<option>Select</option>
</select>
<div name="unit" id="unit">
</div>
</form>
</body>
</html>
I am getting the following error when I run in WAMP or Shared Server.
http://s8.postimg.org/vj19w76v9/error.png
But it runs fine if I run it like a normal html file on my pc.
My JSON is also rendering very well so I know that there is no issue with it.
I tried clearing cache and all the good stuff but its eating my brain off...
Would be glad if someone could help.
Thanks in advance... Cheers...
The problem is that you are defining your changeType plugin in your success callback of the ajax call. Thus, at the time the document is ready, when you call that plugin, it will be undefined. You will need to define the plugin first and think of a way to pass the data variable you get from the ajax call by parameter. I believe something rough like this should work:
(function ($) {
$.fn.changeType = function (data) {
var selectedDepartment, selectedSubproj;
var options_projname = '<option>Select<\/option>';
$.each(data, function (i, d) {
options_projname += '<option value="' + d.projname + '">' + d.projname + '<\/option>';
});
$("select#projname", this).html(options_projname);
$("select#projname").change(function () {
var index = $(this).get(0).selectedIndex;
var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option
selectedDepartment = d;
var options = '';
if (index > 0) {
options += '<option>Select<\/option>';
$.each(d.subproj, function (i, j) {
options += '<option value="' + j.title + '">' + j.title + '<\/option>';
});
} else {
options += '<option>Select<\/option>';
}
$("select#subproj").html(options);
});
$("select#subproj").change(function () {
var index = $(this).get(0).selectedIndex;
selectedSubproj = selectedDepartment.subproj[index - 1];
var options = '';
if (index > 0) {
$.each(selectedSubproj.unit, function (i, b) {
//options += '<option value="' + b.name + '">' + b.name + '<\/option>';
options += '<input type="checkbox" name="' + b.name + '" value="' + b.name + '">' + b.name + '<br/>';
});
} else {
options += '<option>Select<\/option>';
}
$("#unit").html(options);
});
};
})(jQuery);
$(document).ready(function () {
$.ajax({
url: "select2.json",
type: "GET",
dataType: "json",
success: function (data) {
$("form#search").changeType(data);
}
});
});
Good day every one. I want to insert my php code in my jquery. I want to show my data in database using PHP and I want to put it in a option box. I used var in jquery plus the code of my php but isn't working. Please help me.
Shows the data:
<?php
$res2 = mysql_query("SELECT * FROM expense_maintenance ORDER BY name Asc");
while ($result2 = mysql_fetch_assoc($res)){
$name = $result2["name"];
?>
jquery code(dynamic adding text box)
var nitem =0;
var ntotal = 0;
var option = <?php echo" <option value='$name'>$name</option>";} ?>;
function totalItemExpence(){
ntotal = 0;
$('.expense_cost').each(function(){
if($(this).val() != ""){
ntotal += parseFloat($(this).val());
}
});
//$('#total').val(ntotal);
}
$(document).on('change keyup paste', '.expense_cost', function() {
totalItemExpence();
mytotal();
});
$('.btn').click(function() {
nitem++;
$('#wrapper').append('<div id="div' + nitem + '" class="inputwrap">' +
'<select class="expense_name" id="' + nitem '">"'+ option +'"</select>' +
'<input class="expense_desc" placeholder="Expense Description" id="' + nitem + '" required/>' +
'<input class="expense_cost" onkeypress="return isNumber(event)" placeholder="Expense Cost" id="' + nitem + '" required/> ' +
'<br><br></div>');
});
$('.btn2').click(function() {
ntotal = $('#total').val();
$("#div" + nitem + " .expense_cost").each(function(){
if($(this).val() != ""){
ntotal -= parseFloat($(this).val());
}
});
$("#div" + nitem ).remove();
nitem--;
$('#total').val(ntotal); });
Try this for while loop :
<?php
$res2 = mysql_query("SELECT * FROM expense_maintenance ORDER BY name Asc");
$options = '';
while ($result2 = mysql_fetch_assoc($res)){
$options .= "<option value='{$result2["name"]}'>{$result2["name"]}</option>";
}
?>
And JS part :
...
var option = "<?php echo $options; ?>";
...
This line:
var option = "<?php echo "<option value='$name'>$name</option>"; ?>";
must be in your .php file, because php code won't be executed in a .js file (that's why it's called .php)...
You can wrap that line in a <style> tag in your .php file
Also, don't forget to add these things --> "
And to remove this one --> }
I am trying to get json data from php and when by using jquery json it show me undefined object. I don't know where is problem in my code. can any one help ?
Here is json code :
$("document").ready(function() {
$("body").css("background", "#ccc");
$(".sitebuttons").click(function() {
$("#subcat").html("");
$.getJSON("subcat.php", {catid: $(this).attr("id")}, function(data){
$.each(data, function(index, array) {
$("#subcat").append("<input type='button' class='subcat' id='" + data.subcat_id + "' value='"
+ data.subcat_name + "'></p>");
});
});
});
});
and Here is PHP Code
$select_subcat = mysql_query("SELECT * FROM wp_leadsubcat WHERE cat_id=" . $_GET['catid']);
$rows = array();
while ($result2 = mysql_fetch_assoc($select_subcat)) {
$rows[] = $result2;
}
echo json_encode($rows);
Please check screenshot here : http://imageshack.us/photo/my-images/560/screenshotqvl.png/
read documentation about jquery each.
in short jQuery.each( collection, callback(indexInArray, valueOfElement) )
index means index and valueOfElement means the current element from the collection. In your case row.
here is a fix.
$("document").ready(function() {
$("body").css("background", "#ccc");
$(".sitebuttons").click(function() {
$("#subcat").html("");
$.getJSON("subcat.php", {catid: $(this).attr("id")}, function(data){
$.each(data, function(index, row) {
$("#subcat").append(
"<input type='button' class='subcat' id='" + row.subcat_id + "' value='"+ row.subcat_name + "'>"
);
});
});
});
and the append part could be optimized like this (it's more readable as you can see)
$("#subcat").append($(
"<input/>"
, {
cssClass: 'subcat'
, id: row.subcat_id
, value: row.subcat_name
}
));
i think an index would solve the problem
$("#subcat").append("<input type='button' class='subcat' id='" + data[index].subcat_id + "' value='"
+ data[index].subcat_name + "'></p>");
I'm creating a pricing array jQuery and for this project the amount of different products I need is going to be +200 so the easiest option I could research would be listing from a SQL table.
This is what I have so far:
$(document).ready(function() {
/*** CONSTANTS ***/
var KEY = 0;
var VALUE = 1;
/*** DEFINE DATA SETS ***/
var POINTS = [ ["250", 46.5 ], ["500", 53.5], ["1000", 67], ["2500", 107.5], ["5000", 175], ["10000", 310] ];
var SHIPPING_COSTS = [ ["Pickup", 0], ["Next Day Delivery", 30], ["Same Day Print/Same Day Delivery", 65] ];
for (var i = 0; i < POINTS.length; i++) {
$("#quantity").append("<option value='" + POINTS[i][VALUE] + "'>" + POINTS[i][KEY] + "</option>");
}
for (var i = 0; i < SHIPPING_COSTS.length; i++) {
$("#shipping").append("<option value='" + SHIPPING_COSTS[i][VALUE] + "'>" + SHIPPING_COSTS[i][KEY] + "</option>");
}
$("select.autoUpdatePrice, input.autoUpdatePrice").bind("mousedown click change", function(event) {
Calculate();
});
Calculate();
});
function Calculate() {
var net = parseFloat($("#quantity").val());
/* Calculate the magical # by adding the form fields*/
var designFee = $("#abcDesignFee").attr("checked") ? $("#abcDesignFee").val() : 0.0;
var proofFee = $("#abcProofFee").attr("checked") ? $("#abcProofFee").val() : 0.0;
var MyPrice;
MyPrice = parseFloat( parseFloat(proofFee) + parseFloat(designFee) + net + parseFloat($("#shipping").val()));
$("#DumpHere").html("Your Price: $" + formatNumber(MyPrice));
$("#abcName").val($("#quantity").find(":selected").text() + " " + ProductNamePlural);
$("#abcPrice").val(MyPrice);
}
Create a PHP file and read the data from SQL into an array. Print that array after json_encode(). Then use jQuery.getJSON() on document ready to fetch it and process it.