Develop Reference

How to add multiple variables in .val() jquery function

I am adding data using AJAX then appending that data in dropdown, after that I am using .val().trigger() jQuery function to get that newly added data on the top of drop down by passing multiple variables in .val() function; val function is accepting one variable and working fine but I want to add multiple variables in val() function.
JS CODE
success: function(data) {
toastr['success']("<?php echo lang('add'); ?>", "Customer Device Added");
setTimeout(function() {
const obj = JSON.parse(data);
// console.log(data)
// console.log(obj)
jQuery('#customer_device').append('<option value="' + obj[0].device_brand + ' ' + obj[0].device_model + ' ' + obj[0].device_imei + '">' + obj[0].device_brand + ' ' + obj[0].device_model + ' ' + obj[0].device_imei + '</option>');
jQuery('#customer_device').val(obj[0].device_brand).trigger("change");
$('#customer_device_modal').modal('hide');
}, 500);
}
Here I am appending these data:
obj[0].device_brand, obj[0].device_model, obj[0].device_imei
I want to trigger these all variables in .val() function to get these in dropdown at top; as I am getting one variable in val function. Thank you

Fix Ajax call not binding the result to a HTML id

I am writing some jQuery and Java code that sends an ajax call to my Java backend to do a procedure and then sends the results back to my jQuery. However, when I run a debug I notice that the information is being sent from Java to jQuery successfully, the issue is the jQuery is cutting off the remaing words after the first space. Below is my code and the result.
Jquery:
function fillInGPData() {
$.ajax({
type : "POST",
contentType : 'application/json; charset=utf-8',
dataType : 'json',
url : "/ajax/getGPdata",
data : JSON.stringify(""),
success : function(result) {
console.log("Result Selector: " + result);
console.log(result == null);
$.each(result, function(i, obj) {
console.log("Object: " + obj);
console.log("Tier: " + obj.tier);
console.log( "Selname: " + obj.selname);
console.log("Query: " + obj.query);
console.log("Description: " + obj.description);
console.log("Comment: " + obj.comments);
$(".tableBody1").append(
"<tr id=" + obj.selname + ">"
+ "<td class='sm-width-td'>"
+ obj.selname + "</td>" + "</tr>");
});
},
error : function(err) {
console.log(err);
}
});
}
Result:
<tr id="Windows" file="" share=""><td class="sm-width-td">Windows File Share</td></tr>
So its the obj.selname that is giving the issue. For example, if I pass Windows File Server, it will only show Windows for the ID. That where the problem is. I just need help figuring out why that is the case.

How to iterate multiple json data in jquery response

I am getting multiple data from my JSON response like below.
WellNames […]
0 {…}
id 56
well_name AL HALL
api 34005205550000
1 {…}
id 498
well_name BONTRAGER
api 34005233850000
2 {…}
id 499
well_name BONTRAGER
api 34005233860000
I just want to iterate all data and append in select box having id result
i tried below code but getting undefined value in select tags.Please help me to display this values in my select tag.
Below is my jquery code
<script type="text/javascript">
$("#clientname").on('change', function() {
ajaxRequest = $.ajax({
url: '<?= Router::url(['controller' => 'Orders', 'action' => 'getWelldetails']) ?>',
type: 'POST',
data: {clientId: $("#clientname").val()},
dataType: "json",
success: function(response) {
$(response).each(function () {
$("<option value='" + response['id'] + "'>" + response['well_name'] + "</option>").appendTo('#result');
});
},
error: function(response) {
}
});
});
</script>

You need to loop through the WellNames property of your result, not on your result itself.
Also, you're not using jQuery each properly. Either use $.each or use a for loop:
for(let item of response.WellNames) {
$("<option value='" + item.id + "'>" + item.well_name + "</option>").appendTo('#result');
}

Yes its done from below changes which i forgot to write
$(response.WellNames).each(function (i,value) {
$("<option value='" + value['id'] + "'>" + value['well_name'] + " - " + value['api'] + "</option>").appendTo('#result');
});

You need iterate on *WellNames* property of your response.
Use hasOwnProperty so that you don't iterate on undefined property.
I will not suggest to add elements directly to control in a loop. So create an array containing html of and then add it to the control.
var arrHtml = [];
for (var item of response.WellNames) {
if (response.WellNames.hasOwnProperty(item)) {
arrHtml.push("<option value='" + item.id + "'>" + item.well_name + "</option>");
}
}
$('#result').innerHtml = arrHtml.join();

Update: How do I dynamically populate a list with data from a JSON file?

I want to dynamically populate a list with elements from a JSON file. The idea is to switch the test_ID in the list with the actual object from the JSON file. How do I do this?
JSON file
[
{
"id": "a",
"test": "Java",
"testDate": "2016-08-01"
},
{
"id": "b",
"test":"JavaScript",
"testDate": "2016-08-01"
}
]
jQuery
$(function(){
$.ajax({
type : 'GET',
url : 'json/data.json',
async : false,
beforeSend : function(){/*loading*/},
dataType : 'json',
success : function(result) {
});
$("#test_ID").empty(); //emtpy the UL before starting
$.each(arr_json, function(i, v, d) {
$("#test_ID").append("<li id='" + v.id +'" + v.test +"' >" + v.testDate + "<li>");
});
}
});
});
HTML
<li id="test_ID"></li>
I do receive a couple of errors. The Line:
$("#test_ID").append("<li id='" + v.id +'" + v.test +"' >" + v.testDate + "<li>");
gives the following error: invalid number of arguments and unclosed String literal.
I am also unsure of how to identify to specific elements in the JSON file.
Update
I would like if the list element was in this format "Java 2016-08-01" and "JavaScript 2016-08-01". Thank you!

You have a couple of errors in your javascript. See the corrected version below:
$(function(){
$.ajax({
type : 'GET',
url : 'json/data.json',
async : false,
beforeSend : function(){/*loading*/},
dataType : 'json',
success : function(result) {
$("#test_ID").empty(); //emtpy the UL before starting
// **************** correction made to the line below ***********************
$.each(result, function(i, v, d) {
// **************** correction made to the line below ***********************
$("#test_ID").append('<li id="' + v.id + '">' + v.test + ' ' + v.testDate + '</li>'); // correction made here
});
}
});
});

I did a quick fiddle. I don't quite understand what you're doing with v.test being unmarked inside the HTML tags so I did not include it. I used minimal JQuery to avoid complexity.
https://jsfiddle.net/ndx5da97/
for (record in data) {
$("#test_ID").append('<li id="' + data[record].id + '">' + data[record].testDate + '</li>');
}
Hope this helps!

Uncaught Type Error: Object `function()` has no method 'call'?

I have an AJAX request that utilizes beforeSend, success, and failure, yet when the beforeSend gets hit it treats it as an object instead of a method call.
Here's the AJAX:
$.ajax({
url: "#Url.Action("DeleteUser", "DataFeeds")/" + id,
method: 'post',
beforeSend: "deleting('" + id + "')",
success: "deleted('" + full + "','" + id + "')",
failure: "failed('" + id + "')"
});
Just for kicks, here's the deleting() method:
function deleting(id) {
$('#btnDelete-' + id + ' span').html('Deleting...');
$('#btnDelete-' + id + ' span').prop('disabled', 'disabled');
}
It's pretty simple stuff, but I can't figure out why it's treating my function as an object.
Halp!

You need to pass an extra anonymous function there, otherwise you're just assigning a string:
beforeSend: function(){ deleting(id) },
// same with the other methods...

I could be mistaken, but I don't think you're allowed to give JQuery a string there. You can give it a function instead by currying deleting:
function deleting(id) {
return function() {
$('#btnDelete-' + id + ' span').html('Deleting...');
$('#btnDelete-' + id + ' span').prop('disabled', 'disabled');
}
}
And:
beforeSend: deleting(id),