In my program there is a table where a user can add customers and gets shown information about them. For this example the table consists of 3 rows with an input field. Adding those table rows, works.
In the first step, he should fill in the name of the customer and gets suggestions from jQuery UI Autocomplete. Works fine too.
Now the problem: When the name is filled in, an Ajax-Call gets data about the customer from a controller, the delievered data is correct. Now this data should be displayed in the input fields for that customer and that is where problem starts. I could only make it work for the next table row that directly follows, so in this case the ID is put in the right input field, but I have no Idea how to do that for the adress input field or later even more input fields and table rows.
Here is an example how it should work: First customer is John (ID: 1, Adress: Street 1) the table should look like this and work the following way:
Customer: John (via Autocomplete)
ID: 1 (Data from Ajax-Call and put in in this input field)
Adress: Street 1 (Data from Ajax-Call and put in in this input field)
Here is my HTML-Markup from the View:
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "")
<table id="customers">
<tr>
<td>Name of Customer:</td>
<td><input type="text" class="customername" id="customername-0" name="customername[0]" placeholder=""></td>
</tr>
<tr>
<td>ID of Customer:</td>
<td><input type="text" class="customerid" id="customerid-0" name="customerid[0]" placeholder=""></td>
</tr>
<tr>
<td>Adresss of Customer:</td>
<td><input type="text" class="customeradress" id="customeradress-0" name="customeradress[0]" placeholder=""></td>
</tr>
</table>
<button class="" type="button" id="add-customer" name="add-customer" onclick="add_customer()">Add another Customer</button>
</div>
}
JavaScript for adding table rows (not the most elegant way, I know):
<script>
// An array to store the ids of the customers
var customerIDArray = new Array();
customerIDArray.push("");
// An array to store the names of the customers
var customerNameArray = new Array();
customerNameArray.push("");
// An array to store the adresses of the customers
var customerAdressArray = new Array();
customerAdressArray.push("");
AutoCompleteCustomerName();
AutoCompleteCustomerID();
function add_customer() {
refresh_customerNameArray();
refresh_customerIDArray();
customerNameArray.push("");
customerIDArray.push("");
refresh_table();
}
function refresh_customerNameArray() {
for (i = 0; i < customerNameArray.length; ++i) {
customerNameArray[i] = $("#customername-" + i).val();
}
}
function refresh_customerIDArray() {
for (i = 0; i < customerIDArray.length; ++i) {
customerIDArray[i] = $("#customerid-" + i).val();
}
}
function refresh_customerAdressArray() {
for (i = 0; i < customerAdressArray.length; ++i) {
customerIDArray[i] = $("#customeradress-" + i).val();
}
}
function refresh_table() {
var htmlMarkup = '<table id="customers">'
if (customerNameArray.length == 1) {
htmlMarkup +=
'<tr>'+
'<td>Name of Customer:</td>'+
'<td><input type="text" class="customername" id="customername-0" name="customername[0]" placeholder="" value="' + customerNameArray[0] + '"></td>' +
'</tr>'+
'<tr>'+
'<td>ID of Customer:</td>'+
'<td><input type="text" class="customerid" id="customerid-0" name="customerid[0]" placeholder="" value="'+ customerIDArray[0] +'"></td>'+
'</tr>'+
'<tr>' +
'<td>Adresss of Customer:</td>' +
'<td><input type="text" class="customeradress" id="customeradress-0" name="customeradress[0]" placeholder=""></td>' +
'</tr>'
}
else {
for (var i = 0; i < customerNameArray.length; i++) {
htmlMarkup +=
'<tr>' +
'<td>Name of Customer:</td>' +
'<td><input type="text" class="customername" id="customername-' + i + '" name="customername['+ i +']" placeholder="" value="' + customerNameArray[i] + '"></td>' +
'</tr>'+
'<tr>' +
'<td>ID of Customer:</td>' +
'<td><input type="text" class="customerid" id="customerid-' + i +'" name="customerid['+ i +']" placeholder="" value="' + customerIDArray[i] + '"></td>' +
'</tr>'+
'<tr>'+
'<td>Adresss of Customer:</td>'+
'<td><input type="text" class="customeradress" id="customeradress-' + i + '" name="customeradress['+ i +']" placeholder=""></td>'+
'</tr>'
}
}
htmlMarkup +=
'</table>'
$("#customers").html(htmlMarkup);
AutoCompleteCustomerName();
AutoCompleteCustomerID();
}
</script>
My autocomplete-function:
<script>
function AutoCompleteCustomerName() {
$(".customername").autocomplete({
source: "/Home/AutoCompleteCustomerName",
select: function(event, ui) {
}
});
}
</script>
The Ajax-Call and the current solution for the next table row:
<script>
function AutoCompleteCustomerID()
{
$('.customername').on('focusout', function () {
var $id = $(this).closest("tr").next().find(".customerid");
var self = $(this);
$.ajax({
type: "GET",
url: "/Home/AutoCompleteCustomerID",
data: { name: $(self).closest("tr").find(".customername").val()},
contentType: "application/json",
dataType: "json",
success: function (result) {
$id.val(result.id);
}
})
});
}
</script>
So I would be thankful if you could give me an advice or a hint how this could be solved, Im pretty new to JavaScript and jQuery and still have to learn a lot.
