hi I am creating dynamic forms using jquery like this
function testagenda(id){
$("#AppendAgendaForm").append(' <form method="POST" id=+'id'+"
enctype="multipart/form-data" >\n' +
'{% csrf_token %}\n' +
'<!--date field-->\n' +'<div class="row mb-3 mt-3">\n' +
'<div class="col-md-1"></div>\n' +
'<div class="col-md-2">\n' +
'<h5 style="margin-top:32px;">Date</h5>\n' +
'</div>\n' +
'<div class="col-md-3">\n' +
'<label>From</label>\n' +
'<input autocomplete="off" name="startDate" type="text" id="dt1" class="form-control" placeholder="from" required>\n' +
'{#<!-- <input type="date" class="form-control" value="{{ finalizedDate.startDate|date:\'Y-m-d\' }}" id="fromvalidity" name="fromvalidity" required/>-->#}\n' +
'</div>\n' +
'<div class="col-md-3">\n' +
' <label>To</label>\n' +
'<input autocomplete="off" name="endDate" type="text" id="dt2" class="form-control" placeholder="To" required>\n' +
'{#<!--<input type="date" class="form-control" value="{{ finalizedDate.endData|date:\'Y-m-d\' }}" id="tovalidity" name="tovalidity" required/>-->#}\n' +
'</div>\n' +
'<div class="col-md-3"></div>\n' +
'</div>\n' +
'</form>\n' +
'\n');
}
as I have diff Id for every form . And Use can create even more then 100 forms . Now How I Can submit every form Independently using max 1 function etc ?
best way in case was getting ID first using document.getElementbyID on Click . then form(FormID).submit()
Related
Good day. I have a form in which I can dynamically add groups on input elements. I have select elements among them.
In my controller, I returned the data to populate the select element to the blade file.
After this, I then append the data to the select element using Jquery.
The problem is that, this works for the initial form group (elements), but it does not work for the dynamically generated one.
What could be the cause please? Or is there a better way of doing this?
This are my blade (html) and jquery codes
Blade file
<button id="add_counsel_button" type="button">Add</button>
<h5>Step 3: Case Counsels</h5>
<div id="dynamic_wrapper">
<div class="field_wrapper" id="row1">
<input type="text" style="width:50%!important;display: inline!important;"
name="counsels[]" id="name1" data-number=1 class="form-control counsel-name">
<input type="hidden" name="counsel_id[]" id="id1">
<div class="counsel-list" id="counsel-list1"></div>
<select name="roles[]" style="width:21%!important;display: inline!important;"
class="form-control roles-list">
<option value="#">Select Role</option>
</select>
<select name="representations[]"
style="width:21%!important;display: inline!important;"
class="form-control reps-list">
<option value="#">Select Representation</option>
</select>
</div>
</div>
Jquery:
$(document).ready(function() {
//Setting the value from the controller
var roles = {!! json_encode($roles->toArray()) !!};
var reps = {!! json_encode($representations->toArray()) !!};
$.each(roles, function(i, item) {
$('.roles-list').append($('<option>', {
value: item.id,
text: item.role
}));
}); //want this to be appended to all 'roles-list' classes
$.each(reps, function(i, item) {
$('.reps-list').append($ '<option>', {
value: item.id,
text: item.type
});
});
$(document).on('click', '#add_counsel_button', function() {
i++;
$('#dynamic_wrapper').append('<div class="field_wrapper" id="row' + i +
'"><input type="text" id="name' + i + '" data-number="' + i +
'" style="width:50%!important;display: inline!important;" name="counsels[]" class="form-control counsel-name"><input type="hidden" name="counsel_id[]" id="id' +
i + '"><div class="counsel-list" id="counsel-list' +
i +
'"></div> <select name="roles[]" style="width:21%!important;display: inline!important;" class="form-control roles-list"> <option value="#">Select Role</option></select><select name="representations[]" style="width:21%!important;display: inline!important;"class="form-control reps-list"><option value="#">Select Representation</option></select><a href="javascript:void(0);" class="remove_button" id="' +
i +
'" style="display: inline!important;"title="Remove field"> <span class="fa fa-trash"></span></a></div>'
);
});
});
You are appending the options before appending the select tag. Change the code like below
$(document).ready(function() {
//Setting the value from the controller
var roles = {!! json_encode($roles->toArray()) !!};
var reps = {!! json_encode($representations->toArray()) !!};
roles_str = '';
reps_str = '';
$.each(roles, function(i, item) {
roles_str += '<option value="'+item.id+'">'+item.role+'</option>';
}); //want this to be appended to all 'roles-list' classes
$.each(reps, function(i, item) {
reps_str += '<option value="'+item.id+'">'+item.type+'</option>';
});
$(document).on('click', '#add_counsel_button', function() {
i++;
$('#dynamic_wrapper').append('<div class="field_wrapper" id="row' + i +
'"><input type="text" id="name' + i + '" data-number="' + i +
'" style="width:50%!important;display: inline!important;" name="counsels[]" class="form-control counsel-name"><input type="hidden" name="counsel_id[]" id="id' +
i + '"><div class="counsel-list" id="counsel-list' +
i +
'"></div> <select name="roles[]" style="width:21%!important;display: inline!important;" class="form-control roles-list"> <option value="#">Select Role</option>'+roles_str+'</select><select name="representations[]" style="width:21%!important;display: inline!important;"class="form-control reps-list"><option value="#">Select Representation</option>'+reps_str+'</select><a href="javascript:void(0);" class="remove_button" id="' +
i +
'" style="display: inline!important;"title="Remove field"> <span class="fa fa-trash"></span></a></div>'
);
});
});
I struggled for two days but not quite solution I found. Here is the scenario:
I have .NET MVC project and in current view user can add multiple rows by clicking "Add new Row". Each row contains 4 input type="text" and 1 input type="file". it is working absolutely fine.
Problem is happening when I post this form to my MVC controller. I am receiving all data at my MVC controller except Files that are uploaded in each row. This is how I am doing it.
View:
<div class="row p-t-20">
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Transaction Date</label>
<input type="text" name="TransactionDate1" id="mdate1" class="form-control tdate01" value="" required />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Description</label>
<textarea name="Description1" id="Description1" class="form-control descr01" cols="2" rows="2"></textarea>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label">Amount</label>
<input type="text" name="Amount1" id="Amount1" class="form-control amt01" required />
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label">Invoice #</label>
<input type="text" name="InvoiceNo1" id="InvoiceNo1" class="form-control inv01" required />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Comments</label>
<textarea name="Comments1" id="Comments1" class="form-control comm01" cols="1" rows="2"></textarea>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Upload Invoice</label>
<input type="file" name="postedFile1" id="postedFile1" class="form-control file01" required />
<input type="hidden" name="hiddenfile1" id="hiddenfile1" value=""/>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<br />
<input type="button" id="btnAdd" value="+ Row" class="btn btn-dark" />
</div>
</div>
</div>
<div class="form-actions m-t-40">
**<button type="button" id="btnSubmit" class="btn btn-success"> <i class="fa fa-check"></i> Save</button>**
</div>
jQuery Code
var rowCount; var transactionDetailVM = []; var ClaimTransactionVM = {}; var reimFiles = []; var fileString = ''; var reader;
$(document).ready(function () {
debugger;
rowCount = 1;
$(document).on("click", "#btnAdd", function () { //
// var rowCount = $('.data-contact-person').length + 1;
//Generating base64 string for previously uploaded file.
//var filelogoUpload = $('#postedFile' + rowCount).get(0);
//var files = filelogoUpload.files;
//var file = files[0]; getBase64(file, rowCount);
rowCount++;
//Validations will run before adding a new row.
var rowdiv = '<div class="row p-t-20">'
+ '<div class="col-md-2"> '
+ ' <div class="form-group"> '
+ ' <label class="control-label">Transaction Date</label>'
+ ' <input type="text" name="TransactionDate' + rowCount + '" id="mdate' + rowCount +'" class="form-control tdate01" value="" required />'
+ ' </div>'
+ ' </div>'
+ '<div class="col-md-2" >'
+ ' <div class="form-group">'
+ ' <label class="control-label">Description</label>'
+ '<textarea name="Description' + rowCount +'" id="Description' + rowCount +'" class="form-control descr01" cols="2" rows="2"></textarea>'
+ '</div>'
+ '</div>'
+ '<div class="col-md-1">'
+ '<div class="form-group">'
+ '<label class="control-label">Amount</label>'
+ ' <input type="text" name="Amount' + rowCount + '" id="Amount' + rowCount +'" class="form-control amt01" />'
+ '</div>'
+ '</div>'
+ '<div class="col-md-1" >'
+ '<div class="form-group">'
+ '<label class="control-label">Invoice #</label>'
+ '<input type="text" name="InvoiceNo' + rowCount + '" id="InvoiceNo' + rowCount +'" class="form-control inv01" />'
+ '</div>'
+ '</div>'
+ '<div class="col-md-2" >'
+ '<div class="form-group">'
+ '<label class="control-label">Comments</label>'
+ '<textarea name="Comments' + rowCount +'" id="Comments' + rowCount +'" class="form-control comm01" cols="1" rows="2"></textarea>'
+ ' </div></div>'
+ '<div class="col-md-2">'
+ '<div class="form-group">'
+ ' <label>Upload Invoice</label>'
+ '<input type="file" name="postedFile' + rowCount + '" id="postedFile' + rowCount + '" class="form-control file01" />'
//+ '<input type="hidden" name="hiddenfile' + rowCount + '" id="hiddenfile' + rowCount+'"/>'
+ '</div>'
+ '</div>'
+ '<div class="col-md-2">'
+'<div class="form-group">'
+ '<input type="button" id="btnAdd" value="+ Row" class="btn btn-dark" />'
+ '<input type = "button" id ="btnRemove" value="- Row" class="btn btn-danger" />'
+'</div>'
+'</div>'
+'</div>';
$('#newClaimForm').append(rowdiv);
debugger;
//$("input[name*='TransactionDate']").css("background-color", "yellow");
// Adding these controls to Main table class
});
});
$(document).on("click", "#btnRemove", function () {
$(this).closest("div[class='row p-t-20']").remove();
});
function getAllData() {
console.log('getalldata called');
var claimTitle = $('#TransactionName').val();
var claimType = $('#ClaimTypes').val();
//Transaction Details
for (var i = 1; i <= rowCount; i++) {
//file operation
var filelogoUpload = $('#postedFile' + i).get(0);
var files = filelogoUpload.files;
var file = files[0]; //getBase64(file);
//reader = new FileReader();
//reader.onload = function () {
// //console.log(reader.result);
// fileString = reader.result;
//};
//reader.readAsDataURL(file);
//end file operation
var trandate = $('#mdate' + i).val();
var descr = $('#Description' + i).val();
var amt = $('#Amount' + i).val();
var invno = $('#InvoiceNo'+i).val();
var comm = $('#Comments' + i).val();
//var baseFileString = $('#hiddenFile' + i).val();
debugger;
console.log(trandate);
console.log(descr);
console.log(amt);
console.log(invno);
console.log(comm);
console.log(file);
var transactionDetails = {
TransactionDate: trandate,
Description: descr,
Amount: amt,
InvoiceNumber: invno,
Comments: comm,
baseFile: file
}
//console.log('Transaction Object:' + transactionDetails);
//filled transaction Detail array
transactionDetailVM.push(transactionDetails);
console.log(transactionDetailVM);
//reimFiles.push(file);
}
//filled model
ClaimTransactionVM = {
TransactionName: claimTitle,
ClaimType: claimType,
TransactionDetails: transactionDetailVM
};
// console.log('Model:'+ClaimTransactionVM);
}
$("#btnSubmit").click(function SaveReimbursements() {
//Validations will run
console.log('Save button called');
debugger;
getAllData();
if (ClaimTransactionVM !== null) {
var FormClaims = new FormData();
FormClaims.append('currentClaim', JSON.stringify(ClaimTransactionVM));
//FormClaims.append()
//console.log(ClaimTransactionVM);
//var data = {
// currentClaim: ClaimTransactionVM,
// files: reimFiles
//}
$.ajax({
url: '/ClaimProcess/CreateClaim',
type: 'POST',
processData: false,
contentType: 'application/json',
data: FormClaims,//JSON.stringify(ClaimTransactionVM),
success: function (response) {
if (response === true) {
console.log('Success: IsSuccess True called');
swal({
title: 'success',
text: "Claim Added Successfully.",
type: "success",
confirmButtonColor: "#007AFF"
});
}
else if (response === false) {
console.log('Success: IsSuccess False called');
swal({
title: "Error!",
text: '',
type: "warning",
confirmButtonColor: "#DD6B55",
confirmButtonText: "Ok"
});
}
}
});
}
else
console.log('Model is empty.')
});
my final JSON object which needs to be passed is 'ClaimTransactionVM' which carries LIST of transaction details (each row that is added dynamically) and some other parameters.
I have tried following things already:
Used var reader = new FileReader(); and convert the file into base64 string and pass it in Json object. it works great in debug mode but in real-time reader.result doesn't get passed. no idea why. tried almost everything like recurring function to add delay to asynchronous code till my object gets filled. but no go.
Form data: used JSON.stringify to convertt the final Json object, it does pass but File doesn't get converted to HTTPPostedFileBase object. it skips the file while other params are received.
I would like to know how to send multiple Files and this JSON object together in my POST call.
I ran your code, fixed some errors noticed and also fixed the upload, it uploads a base64 string now. At your .NET MVC, you change handle the base64 string and save it as a file.
Updated Code:
var rowCount; var transactionDetailVM = []; var ClaimTransactionVM = {}; var reimFiles = []; var fileString = ''; var reader; var preview = '';
$(document).ready(function () {
rowCount = 1;
$("#btnAdd").click(function () { //
rowCount++;
//Validations will run before adding a new row.
var rowdiv = '<div class="row p-t-20">'
+ '<div class="col-md-2"> '
+ ' <div class="form-group"> '
+ ' <label class="control-label">Transaction Date</label>'
+ ' <input type="text" name="TransactionDate' + rowCount + '" id="mdate' + rowCount +'" class="form-control tdate01" value="" required />'
+ ' </div>'
+ ' </div>'
+ '<div class="col-md-2" >'
+ ' <div class="form-group">'
+ ' <label class="control-label">Description</label>'
+ '<textarea name="Description' + rowCount +'" id="Description' + rowCount +'" class="form-control descr01" cols="2" rows="2"></textarea>'
+ '</div>'
+ '</div>'
+ '<div class="col-md-1">'
+ '<div class="form-group">'
+ '<label class="control-label">Amount</label>'
+ ' <input type="text" name="Amount' + rowCount + '" id="Amount' + rowCount +'" class="form-control amt01" />'
+ '</div>'
+ '</div>'
+ '<div class="col-md-1" >'
+ '<div class="form-group">'
+ '<label class="control-label">Invoice #</label>'
+ '<input type="text" name="InvoiceNo' + rowCount + '" id="InvoiceNo' + rowCount +'" class="form-control inv01" />'
+ '</div>'
+ '</div>'
+ '<div class="col-md-2" >'
+ '<div class="form-group">'
+ '<label class="control-label">Comments</label>'
+ '<textarea name="Comments' + rowCount +'" id="Comments' + rowCount +'" class="form-control comm01" cols="1" rows="2"></textarea>'
+ ' </div></div>'
+ '<div class="col-md-2">'
+ '<div class="form-group">'
+ ' <label>Upload Invoice</label>'
+ '<input type="file" onChange="startRead2(\'' + rowCount + '\')" name="postedFile' + rowCount + '" id="postedFile' + rowCount + '" class="form-control file01" />'
+ '<input type="hidden" name="hiddenfile' + rowCount + '" id="hiddenfile' + rowCount+'"/>'
+ '</div>'
+ '</div>'
+ '<div class="col-md-2">'
+'<div class="form-group">'
+ '<input type = "button" id ="btnRemove" value="- Row" class="btn btn-danger" />'
+'</div>'
+'</div>'
+'</div>';
$('#newClaimForm').append(rowdiv);
// debugger;
//$("input[name*='TransactionDate']").css("background-color", "yellow");
// Adding these controls to Main table class
});
});
$(document).on("click", "#btnRemove", function () {
$(this).closest("div[class='row p-t-20']").remove();
});
function startRead2(id) {
var file2 = document.getElementById('postedFile'+id);
preview = id;
if (!file2.files[0]) {
return;
}
//add data type for upload validation
if ((file2.files[0].type != 'image/jpeg') && (file2.files[0].type != 'image/jpg') && (file2.files[0].type != 'image/png')) {
alert('File Type not Supported. File must be jpeg or png');
file2.value = '';
return;
}
let filex = file2.files[0];
var reader2 = new FileReader();
var reader_data2 = reader2.readAsDataURL(filex);
reader2.onload = this.addImage2;
}
function addImage2(imgsrcs) {
let hidden_bin = document.getElementById('hiddenfile'+preview);
hidden_bin.value = imgsrcs.target.result;
}
function getAllData() {
console.log('getalldata called');
var claimTitle = $('#TransactionName').val();
var claimType = $('#ClaimTypes').val();
//Transaction Details
for (var i = 1; i <= rowCount; i++) {
var trandate = $('#mdate' + i).val();
var descr = $('#Description' + i).val();
var amt = $('#Amount' + i).val();
var invno = $('#InvoiceNo'+i).val();
var comm = $('#Comments' + i).val();
var transactionDetails = {
TransactionDate: trandate,
Description: descr,
Amount: amt,
InvoiceNumber: invno,
Comments: comm,
baseFile: base64_file
}
transactionDetailVM.push(transactionDetails);
console.log(transactionDetailVM);
}
//filled model
ClaimTransactionVM = {
TransactionName: claimTitle,
ClaimType: claimType,
TransactionDetails: transactionDetailVM
};
}
$("#btnSubmit").click(function SaveReimbursements() {
//Validations will run
console.log('Save button called');
// debugger;
getAllData();
if (ClaimTransactionVM !== null) {
var FormClaims = new FormData();
FormClaims.append('currentClaim', JSON.stringify(ClaimTransactionVM));
$.ajax({
url: '/ClaimProcess/CreateClaim',
type: 'POST',
processData: false,
contentType: 'application/json',
data: FormClaims,//JSON.stringify(ClaimTransactionVM),
success: function (response) {
if (response === true) {
console.log('Success: IsSuccess True called');
swal({
title: 'success',
text: "Claim Added Successfully.",
type: "success",
confirmButtonColor: "#007AFF"
});
}
else if (response === false) {
console.log('Success: IsSuccess False called');
swal({
title: "Error!",
text: '',
type: "warning",
confirmButtonColor: "#DD6B55",
confirmButtonText: "Ok"
});
}
}
});
}
else
console.log('Model is empty.')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row p-t-20">
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Transaction Date</label>
<input type="text" name="TransactionDate1" id="mdate1" class="form-control tdate01" value="" required />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Description</label>
<textarea name="Description1" id="Description1" class="form-control descr01" cols="2" rows="2"></textarea>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label">Amount</label>
<input type="text" name="Amount1" id="Amount1" class="form-control amt01" required />
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label">Invoice #</label>
<input type="text" name="InvoiceNo1" id="InvoiceNo1" class="form-control inv01" required />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Comments</label>
<textarea name="Comments1" id="Comments1" class="form-control comm01" cols="1" rows="2"></textarea>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Upload Invoice</label>
<input type="file" name="postedFile1" onChange="startRead2('1')" id="postedFile1" class="form-control file01" required />
<input type="hidden" name="hiddenfile1" id="hiddenfile1" value=""/>
</div>
</div>
<div id="newClaimForm"></div>
<div class="col-md-2">
<div class="form-group">
<br />
<input type="button" id="btnAdd" value="+ Row" class="btn btn-dark" />
</div>
</div>
</div>
<div class="form-actions m-t-40">
**<button type="button" id="btnSubmit" class="btn btn-success"> <i class="fa fa-check"></i> Save</button>**
</div>
Why i can't getElementByName?
<form class="form" action="#">
<p class="EmptySlot" hidden>
<input name="characters" type="radio" id="empty" disabled="disabled"/>
<label for="empty">Пустой слот</label>
</p>
</form>
Then:
$(".form").append('\
<p>\
<input name="character" type="radio" id="' + notformatname + '" value="' + notformatname + '"/>\
<label for="' + notformatname + '" id="charlabel">' + formatname + '</label>\
</p>');
And it's don't work:
var radios = document.getElementsByName('character');
The method will return a collection, not a single Element. You may try...
$(".form")[0].append('\
<p>\
<input name="character" type="radio" id="' + notformatname + '" value="' + notformatname + '"/>\
<label for="' + notformatname + '" id="charlabel">' + formatname + '</label>\
</p>');
Should get the first form that belongs to the "form" class.
The second should work, but remember that "radios" will be a collection too.
.getElementsByName might return more than one element if multiple elements have the name of 'character'.
To get the first item in the list of returned elements, try:
var radios = document.getElementsByName('character')[0];
I'm working on a plugin and need to load the preset and fill out a form with this data. While trying to write the code as short as possible and to my knowledge, I ended up with creating a "template" variable as this:
var Fields =
'<div class="Container">' +
'<div class="Fields">' +
'<input type="text" name="Title" placeholder="Title" />' +
'<input type="text" name="Address" placeholder="Address" />' +
'<input type="text" name="Latitude" placeholder="Latitude" />' +
'<input type="text" name="Longitude" placeholder="Longitude" />' +
'<input type="text" name="Description" placeholder="Description" />' +
'<input type="text" name="URL" placeholder="URL" />' +
'<div class="Image"></div>' +
'</div>' +
'</div>';
And append it like so:
$('.results').append($(Fields))
.find('.Title').text(temp[0]).end()
.find('input[name="Title"]').val(temp[0]).end()
.find('input[name="Address"]').val(temp[1]).end()
.find('input[name="Latitude"]').val(temp[2]).end()
.find('input[name="Longitude"]').val(temp[3]).end()
.find('input[name="Description"]').val(temp[4]).end()
.find('input[name="URL"]').val(temp[5]).end()
.find('.Image')
.addClass('added-image')
.append('<img src="' + temp[6] + '" />').end();
The problem I'm facing is that all the data (except the image), is the same. When I console.log it shows two sets of data, but still title and so on is the same. Here is my entire function for setting preset:
function preset() {
var str = 'Stackoverflow&%1600 Penn&%10.2342342&%2.2532452&%Need help with this&%http://www.stackoverflow.com&%http://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg;Google&%Silicon Valley 1&%80.435234523&%14.0065592&%This is Google&%http://www.google.com&%http://resources.news.com.au/files/2012/01/13/1226243/386315-harp-seal-1.jpg;',
arr = {},
temp = {},
Fields =
'<div class="Container">' +
'<div class="Fields">' +
'<input type="text" name="Title" placeholder="Title" />' +
'<input type="text" name="Address" placeholder="Address" />' +
'<input type="text" name="Latitude" placeholder="Latitude" />' +
'<input type="text" name="Longitude" placeholder="Longitude" />' +
'<input type="text" name="Description" placeholder="Description" />' +
'<input type="text" name="URL" placeholder="URL" />' +
'<div class="Image"></div>' +
'</div>' +
'</div>';
arr = str.split(";");
$.each(arr,function(i,val){
temp = arr[i].split("&%");
if(temp.length >= 2) {
if(temp[6] !== 'undefined') {
$('.results').append($(Fields))
.find('.Title').text(temp[0]).end()
.find('input[name="Title"]').val(temp[0]).end()
.find('input[name="Address"]').val(temp[1]).end()
.find('input[name="Latitude"]').val(temp[2]).end()
.find('input[name="Longitude"]').val(temp[3]).end()
.find('input[name="Description"]').val(temp[4]).end()
.find('input[name="URL"]').val(temp[5]).end()
.find('.Image')
.addClass('added-image')
.append('<img src="' + temp[6] + '" />').end();
} else {
$('.results').append($(Fields))
.find('.Title').text(temp[0]).end()
.find('input[name="Title"]').val(temp[0]).end()
.find('input[name="Address"]').val(temp[1]).end()
.find('input[name="Latitude"]').val(temp[2]).end()
.find('input[name="Longitude"]').val(temp[3]).end()
.find('input[name="Description"]').val(temp[4]).end()
.find('input[name="URL"]').val(temp[5]).end();
}
} else {
$('.results').append(Fields);
}
});
}
I have created a JSFiddle for those who wants to see the result up close, and easier giving me some pointers. http://jsfiddle.net/p7r2n18k/1/
The apppend function appends your fields and returns the element which data was appended to, so it ends up changing all of the fields including older ones.
Seperate the append function from the data update:
var fields = $(Fields);
$('.results').append(fields);
fields
.find('.Title').text(temp[0]).end()
...
Check this fiddle
I had written code for dynamic generated layout in jquery mobile
<input id=' + questions[i].Question.DataType + '-' + questions[i].Question.QuestionId + '-' +
QuesDesc + '-' + controlTypevalue + ' name="element_2_2" class="qty form-control required"
width="100%" height ="50" maxlength="20" style="width:80%" value="" type="text"
onfocusout=$.GetID(this.id);>');
I am using
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
these libraries but I dont know why it is throwing error in first line of html page for this function
Please suggest how to proceed in this case
layout_input += '<input id="' + questions[i].Question.DataType + '-' + questions[i].Question.QuestionId + '-' + QuesDesc + '-' + controlTypevalue + '" name="element_2_2" class="qty form-control required" width="100%" height ="50" maxlength="20" style="width:80%" value="" type="text">';
$('#layout_input').append(layout_input);
$('.qty').blur(function(){
alert(this.id)
})