I have to dynamically create buttons in an Ajax success function. There isn't a fixed number of buttons and
each time the number is different.
I can do it, but not knowing the exact number of elements that will be created, I don't know how to add the correct number of button listener.
AJAX:
success : function(data, status, xhr) {
$("#risultatoLibriCercati").empty();
var divContent = "";
for (var i = 0; i < data.length; i++) {
divContent +=
"<div class='col-sm-2 mt-4'><a data-toggle='modal' data-target='#bookPage" +
[i] +
"'><div class='card shadow-sm'><img style='height:250px' src='" +
data[i].imgLink +
"' class='img-thumbnail rounded'></div></a></div><div class='modal fade' id='bookPage" +
[i] +
"'><div class='modal-dialog'><div class='modal-content'><div class='modal-header text-center'><h4 class='modal-title w-100 dark-grey-text font-weight-bold'>" +
data[i].titolo +
"</h4><button type='button' class='close' data-dismiss='modal' aria-lable='close'>×</button></div><div class='mt-4' style='background: url(" +
data[i].imgLink +
") no-repeat;background-size: contain; background-position: center; min-height: 300px;'></div><div class='modal-body mx-4'><div class='md-form'><p class='font-small'>" +
data[i].autore +
"</p></div><div class='md-form'><p>" +
data[i].descrizione +
"</p></div><div class='text-center mb-3'><button class='btn btn-primary btn-block z-depth-1a' id='aggiungi" +
[i] +
"'>Aggiungi a libreria</button><a href='" +
data[i].isbn13.replace("'", " ") +
"' target='_blank' style='border:none;text-decoration:none'><img src='https://www.niftybuttons.com/amazon/amazon-button2.png'></a></div></div></div></div></div><input type='hidden' id='categoria" +
[i] +
"' value='" +
data[i].categoria +
"'><input type='hidden' id='googleID" +
[i] +
"' value='" +
data[i].googleID +
"'><input type='hidden' id='titolo" +
[i] +
"' value='" +
data[i].titolo.replace("'", " ") +
"'><input type='hidden' id='descrizione" +
[i] +
"' value='" +
data[i].descrizione.replace("'", " ") +
"'><input type='hidden' id='autore" +
[i] +
"' value='" +
data[i].autore +
"'><input type='hidden' id='isbn" +
[i] +
"' value='" +
data[i].isbn13.replace("'", " ") +
"'><input type='hidden' id='voto" +
[i] +
"' value='" +
data[i].voto +
"'><input type='hidden' id='imgLink" +
[i] +
"' value='" +
data[i].imgLink +
"'>";
}
$("#risultatoLibriCercati").append(divContent);
}
BUTTON ON CLICK LISTENER:
$(document).on('click', '#aggiungi0', function(){
var book = {
googleID: $("#googleID0").val(),
titolo: $("#titolo0").val(),
descrizione: $("#descrizione0").val(),
isbn13: $("#isbn0").val(),
voto: $("#voto0").val(),
imgLink: $("#imgLink0").val(),
autore: $("#autore0").val(),
categoria: $("#categoria0").val(),
userId: getCookie("userId"),
};
$.ajax({
[...]
You can add class attribute for those buttons and attach event and index for them as below
var btnIndex = 0;
$('#add').on('click', function() {
$('.container').append(`<button class="new-btn" data-index=${btnIndex++}>Button test</button>`);
});
$('.container').on('click', '.new-btn', function(e) {
console.log("clicked" + $(e.target).data("index"));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div class="container"></div>
And passing these values by index into ajax call like this:
$(document).on('click', '.new-btn', function(e){
const idx = $(e.target).data("index");
var book = {
googleID: $("#googleID" + idx).val(),
titolo: $("#titolo" + idx).val(),
descrizione: $("#descrizione" + idx).val(),
isbn13: $("#isbn" + idx).val(),
voto: $("#voto" + idx).val(),
imgLink: $("#imgLink0" + idx).val(),
autore: $("#autore" + idx).val(),
categoria: $("#categoria" + idx).val(),
userId: getCookie("userId"),
};
$.ajax({
[...]
Related
I check the equality between an array value and html table cell value both are same but how can i check this. I try this but it wont work properly. it always return true if there are same value. check this out.......
function addOrder() {
var bookid = document.getElementById("book_id").value;
var qty = document.getElementById("qty").value;
var price = document.getElementById("unit_price").value;
var total = document.getElementById("dts_total_price").value;
var table = document.getElementById("results");
var tableData = new Array();
$('#results tr').each(function() {
var row = $(this);
tableData.push(row.find("TD").eq(0).html());
});
tableData.shift();
var check;
for (var i = 0; i <= tableData.length; i++) {
var booksId = tableData[i];
alert(bookid);
if (bookid === booksId) {
check = false;
} else {
check = true;
}
}
alert(check);
var table_len = (table.rows.length);
var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'>" +
"<td id='book_row" + table_len + "'>" + bookid + "</td>" +
"<td id='qty_row" + table_len + "'>" + qty + "</td>" +
"<td id='price_row" + table_len + "'>" + price + "</td>" +
"<td id='total_row" + table_len + "'>" + total + "</td>" +
"<td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'>" +
" <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> " +
"<input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";
document.getElementById("qty").value = "";
document.getElementById("unit_price").value = "";
document.getElementById("dts_total_price").value = "";
};
I'm trying to make this so there is 3 on a line then a break then 3 more then a break etc..
Any help?
Code so far http://jsfiddle.net/82wNq/69/
$.getJSON("https://api.twitch.tv/kraken/search/streams?q=dayz&limit=15&type=suggest&callback=?", function (e) {
var t = "";
$.each(e.streams, function (e, n) {
t = t + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>"
});
$("#content").html(t)
})
Example:
http://i.stack.imgur.com/h0xvX.gif
DEMO
Create 3 different content divs instead of 1
<div id="content1" class="panel panel-default"></div>
<div id="content2" class="panel panel-default"></div>
<div id="content3" class="panel panel-default"></div>
Style these divs
.panel.panel-default {
width:430px;
display:inline-block;
}
Distribute the results accordingly
$.getJSON("https://api.twitch.tv/kraken/search/streams?q=dayz&limit=15&type=suggest&callback=?", function (e) {
var t = u = v = "";
$.each(e.streams, function (e, n) {
switch ((e + 1) % 3) {
case 1:
t = t + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>";
break;
case 2:
u = u + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>";
break;
case 3:
default:
v = v + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>";
break;
}
});
$("#content1").html(t);
$("#content2").html(u);
$("#content3").html(v);
})
I'm using a plugin to rate values: http://www.radioactivethinking.com/rateit/example/example.htm
The following code works if I put directly into the HTML.
<li>
<p><strong>Product</strong>
<br/>
<input type="range" value="0" step="1" id="rateit" data-role="none">
<div class="rateit" id="rateitHover" data-rateit-backingfld="#rateit" data-rateit-resetable="false" data-rateit-ispreset="true"
data-rateit-min="0" data-rateit-max="5">
</div>
</p>
</li>
The code below doesn't work, it retrieves the default <input type="range"> by html.
$.getJSON(url, function(data){
$.each(data, function(index, item)
{
info += "<li id='" + item.id + "'>" +
"<p><strong>" + item.product + "</strong><br/>" +
"<input type='range' value='0' step='1' id='" + 'rateIt' + item.id + "'/>" +
"<div class='rateit' id='" + 'rateIt' + item.id + "' data-rateit-backingfld='" + 'rateIt' + item.id + "' data-rateit-resetable='false' data-rateit-ispreset='true' " +
"data-rateit-min='0' data-rateit-max='5'></div></p></li>";
});
$("#listviewA").append(info);
$("#listviewA").trigger("change");
$("#listviewA").listview("refresh");
});
How do I turn this into that plugin? Thanks!
You have a syntax error on your 4th/5th line. Take a look at your "'s you have an extra.
info += "<li id='" + item.id + "'><p><strong>" + item.product + "</strong><br/>" +
"<input type='range' value='0' step='1' id='" + 'rateIt' + item.id + "'/>" +
"<div class='rateit' id='" + 'rateIt' + item.id + "' data-rateit-backingfld='" + 'rateIt' + item.id + "' data-rateit-resetable='false' data-rateit-ispreset='true' " +
"data-rateit-min='0' data-rateit-max='5'></div></p></li>";
Ok, I've found that this is some kind of bug or something. I've tested with another plugins and doesn't work either. I'm now using a better plugin, which is more easier.
https://github.com/wbotelhos/raty
The html is very simple: <div id="score"></div>, although it is necessary to call it on jQuery.
$("#score").raty({
score: function() {
return $(this).attr('data-rating');
}
});
I've tried to adapt it and make all IDs uniques:
$.getJSON(url, function(data){
$.each(data, function(index, item)
{
info += "<li id='" + item.id + "'>" +
"<p><strong>" + item.product + "</strong><br/>" +
"<input type='range' value='0' step='1' id='" + 'rateIt' + item.id + "'/>" +
"<div id=" + 'score' + item.id + "></div></p></li>";
});
$("#listviewA").append(info);
$("#listviewA").trigger("change");
$("#listviewA").listview("refresh");
});
But continues not to work. I've tried in vain also:
$.getJSON(url, function(data){
$.each(data, function(index, item)
{
info += "<li id='" + item.id + "'>" +
"<p><strong>" + item.product + "</strong><br/>" +
"<input type='range' value='0' step='1' id='" + 'rateIt' + item.id + "'/>" +
"<div id=" + 'score' + item.id + "></div></p></li>";
$("#score" + item.id).raty({
score: function() {
return $(this).attr('data-rating');
}
});
});
$("#listviewA").append(info);
$("#listviewA").trigger("change");
$("#listviewA").listview("refresh");
});
Btw, I'm loading this function before page show..I don't know if that's the problem.
$(document).on("pagebeforeshow", "#main", function() {
$(function(){
get_info();
});
})
how do I integrate a type of validation in my JavaScript to the idea of If value of var firstName is = to null do NOT append the var sHtml and summaryHtml and change the class to change the textbox border and clear the field
rules:
firstName = must contain at least 1 letter and no more than 15 letters
lastName = must contain at least 1 letter and no more than 15 letters
jobTitle = must contain something other than an option value of "" (in the html option tag)
eSculation = must contain something other than an option value of "" (in the html option tag)
mobilePhone = must contain 9 numbers. This field has a mask attached: (999) 999-99999
officePhone = = must contain 9 numbers. This field has a mask attached: (999) 999-99999
eMail = Must contain the following symbol: an # sign and a . to represent xxx#xx.xxx
The JavaScript I am using to submit to a table is below:
newRow = 1;
currentRow = -1;
function CompanyContacts() {
var rowID = parseInt(document.getElementById("ContactsRowCount").value, 10);
rowID++;
if (currentRow > 0) {
saveEdits();
} else {
var firstName = $("#ccFirst").val();
var lastName = $("#ccLast").val();
var jobTitle = $("#ccjTitle").val();
var eSculation = $("#ccEsculation").val();
var mobilePhone = $("#ccMobile").val();
var officePhone = $("#ccOffice").val();
var eMail = $("#ccEmail").val();
var sHtml = "<tr id='row" + rowID + "'>" +
"<td class='tblStyle68wlb' id=\"ccFirst" + rowID + "\">" + firstName + "</td>" +
"<input type=\"hidden\" value=\"" + firstName + "\" name=\"cFirst" + rowID + "\" />" +
"<td class='tblStyle68wl' id=\"ccLast" + rowID + "\">" + lastName + "</td>" +
"<input type=\"hidden\" value=\"" + lastName + "\" name=\"cLast" + rowID + "\" />" +
"<td class='tblStyle68wlb' id=\"ccjTitle" + rowID + "\">" + jobTitle + "</td>" +
"<input type=\"hidden\" value=\"" + jobTitle + "\" name=\"cJobTitle" + rowID + "\" />" +
"<td class='tblStyle68wl' id=\"ccEsculation" + rowID + "\">" + eSculation + "</td>" +
"<input type=\"hidden\" value=\"" + eSculation + "\" name=\"cContactPoint" + rowID + "\" />" +
"<td class='tblStyle68wlb' id=\"ccMobile" + rowID + "\">" + mobilePhone + "</td>" +
"<input type=\"hidden\" value=\"" + mobilePhone + "\" name=\"cMobilePhone" + rowID + "\" />" +
"<td class='tblStyle68wl' id=\"ccOffice" + rowID + "\">" + officePhone + "</td>" +
"<input type=\"hidden\" value=\"" + officePhone + "\" name=\"cOfficePhone" + rowID + "\" />" +
"<td class='tblStyle68wlb' id=\"ccEmail" + rowID + "\">" + eMail + "</td>" +
"<input type='hidden' value='" + eMail + "' name='cEmail" + rowID + "' />" +
"<td class='tblStyle68wl' ><button type='button' class='XsmallButtons' onclick='editRow(" + rowID + ")'>Edit</button>" +
"</td><td class='tblStyle68wlb' ><button type='button' class='XsmallButtons' onclick='deleteRow(" + rowID + ")'>Delete</button>" +
"</td></tr>";
var summaryHtml = "<tr id='SummaryRow" + rowID + "'>" +
"<td id='ccFirst" + rowID + "'>" + firstName + "</td>" +
"<td id='ccLast" + rowID + "'>" + lastName + "</td>" +
"<td id='ccjTitle" + rowID + "'>" + jobTitle + "</td>" +
"<td id='ccEsculation" + rowID + "'>" + eSculation + "</td>" +
"<td id='ccMobile" + rowID + "'>" + mobilePhone + "</td>" +
"<td id='ccOffice" + rowID + "'>" + officePhone + "</td>" +
"<td id='ccEmail" + rowID + "'>" + eMail + "</td>" +
"</tr>";
$("#customerContactSubmitedTable").append(sHtml);
$("#SummaryCCTable").append(summaryHtml);
newRow++;
document.getElementById("ContactsRowCount").value = rowID;
$("#ccFirst,#ccLast,#ccjTitle,#ccEsculation,#ccMobile,#ccOffice,#ccEmail").val("");
}
}
function editRow(rowID) {
$('#ccFirst').val($('#ccFirst' + rowID).html());
$('#ccLast').val($('#ccLast' + rowID).html());
$('#ccjTitle').val($('#ccjTitle' + rowID).html());
$('#ccEsculation').val($('#ccEsculation' + rowID).html());
$('#ccMobile').val($('#ccMobile' + rowID).html());
$('#ccOffice').val($('#ccOffice' + rowID).html());
$('#ccEmail').val($('#ccEmail' + rowID).html());
currentRow = rowID;
}
function saveEdits() {
$('#ccFirst' + currentRow).html($('#ccFirst').val());
$('#ccLast' + currentRow).html($('#ccLast').val());
$('#ccjTitle' + currentRow).html($('#ccjTitle').val());
$('#ccEsculation' + currentRow).html($('#ccEsculation').val());
$('#ccMobile' + currentRow).html($('#ccMobile').val());
$('#ccOffice' + currentRow).html($('#ccOffice').val());
$('#ccEmail' + currentRow).html($('#ccEmail').val());
$("#ccFirst,#ccLast,#ccjTitle,#ccEsculation,#ccMobile,#ccOffice,#ccEmail").val("");
currentRow = -1;
}
function deleteRow(rowID) {
$('#row' + rowID).remove();
$('#SummaryRow' + rowID).remove();
var rowCount = parseInt(document.getElementById("ContactsRowCount").value, 10);
rowCount--;
document.getElementById("ContactsRowCount").value = rowCount;
}
function ccClear() {
$("#ccFirst,#ccLast,#ccjTitle,#ccEsculation,#ccMobile,#ccOffice,#ccEmail").val("");
}
Add a validation="regex here" to the input tags first of all to give them an easy visual notification. Beyond if you want to validate with jQuery, you can check each value and not send out an ajax request if any are invalid, using something like this to verify that ( string in this case ) values are correct $(your_element_here).val().match(your_regex_here)
Perhaps an if ($(#id).val().match(some_verification_regex) == null){ return false }
only letters: /^[A-z]+$/
phone number like you mentioned above: /^\(\d{3}\) \d{3}-\d{4}$/
What i would suggest is a validation jQuery plugin and you can find many of them and choose what suites your needs from bellow:
jquery.bassistance
ddarrenjQuery-Live-Form-Validation-For-Twitter-Bootstrap
jzae fferer-jquery-validation
Or you search on jQuery.com site to get many jquery compatible validation plugins.
But if you don't want to use any plugin then you have to write your own validation code.
Email and other fields validation functions:
function emailValidate(e){
var p = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return p.test(e);
}
function validate(val, min, max){
return (val.length < min || val.length > max?false:true);
}
vfirstName = validate(firstName,1,15);//if between 1 and 15 will return true
vlastName = validate(lastName ,1,15);//if between 1 and 15 will return true
vjobTitle = validate(jobTitle ,1,50);//if between 1 and 15 will return true
veSculation = validate(eSculation ,1,50);//if between 1 and 15 will return true
vmobilePhone = validate(eSculation ,1,50);//if between 1 and 15 will return true
vofficePhone = validate(officePhone,12,12);//because `(999) 999-99999` length is 12
veMail = emailValidate(eMail);//also will return false if wrong email format
if(vfirstName && vlastName && vjobTitle && veSculation && vmobilePhone && vofficePhone && veMail)
var errors = false;
else
var errors = true;
Then before appending the generated row you can add some condition like:
if(!errors){
$("#customerContactSubmitedTable").append(sHtml);
//....rest of your code
}else
alert('please correct the fields');//or any other event
I have a json file which contains questions and answers like this.
{
"Questions": [
{ "Q": "I enjoy playing video games" },
{ "Q": "I enjoy reading" },
{ "Q": "I enjoy watching tv" }
],
"Answers": [
{
"a": "Strongly Agree",
"b": "Agree",
"c": "Neutral",
"d": "Disagree",
"e": "Strongly Disagree"
}
]
}
The answers are always the same for each question. I am trying to do a loop in javascript to display each questiona the answers under it, something like this
1.I enjoy video games
RadioButton:Strongly agree RadioButton:Agree etc...
2. I enjoy reading
RadioButton:Strongly agree RadioButton:Agree etc...
right now i have this, but it doesn't really work
$.getJSON("questions.json",function(data)
{
$.each(data, function(i,data)
{
var div = document.createElement("div");
div.setAttribute("id", i);
document.createElement("div").setAttribute("id", i);
var div_data = "<div class='questions'><h2>" + data.Questions.Q +"</h2><br />"+
"<input type='radio' name='q" + i + "' id='q" + i + 1+"' value='"+data.Answers.a+"'/>" +
"<label for='q" + i + 1+"'>" + data.Answers.a + "</label>"+
"<input type='radio' name='q" + i + "' id='q" + i + 2+"' value='"+data.Answers.b+"'/>" +
"<label for='q" + i + 2+"'>" + data.Answers.b + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + 3+"' value='"+data.Answers.c+"'/>" +
"<label for='q" + i + 3+"'>" + data.Answers.c + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + 4+"' value='"+data.Answers.d+"'/>" +
"<label for='q" + i + 4+"'>" + data.Answers.d + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + 5+"' value='"+data.Answers.e+"'/>" +
"<label for='q" + i + 5+"'>" + data.Answers.e + "</label>"
+"</div>" ;
document.getElementById("box").appendChild(div);
div.innerHTML = div_data;
});
});
You have to loop through data.Questions. See the code below. I have also optimized your code, so that the HTML is appended at once, rather than separately for each element.
Another note: You should change the i + 1, 1 + 2, 1 + 3, etc part to something more appropriate. Currently, it's just added, because it's inside a string context. Even if you add parentheses, the logic is still flawed: For i=1, i+2 = 3. For i=2, i+1 is also 3.
I have replaced i + 1 + "' with i + "_1', to give you an idea of the right approach.
$.getJSON("questions.json",function(data)
{
var html = "";
$.each(data.Questions, function(i, question)
{
html += "<div id=" + i + ">" +
"<div class='questions'><h2>" + question.Q +"</h2><br />"+
"<input type='radio' name='q" + i + "' id='q" + i + "_1' value='"+data.Answers.a+"'/>" +
"<label for='q" + (i + "_1'>" + data.Answers.a + "</label>"+
"<input type='radio' name='q" + i + "' id='q" + i + "_2' value='"+data.Answers.b+"'/>" +
"<label for='q" + i + "_2'>" + data.Answers.b + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + "_3' value='"+data.Answers.c+"'/>" +
"<label for='q" + i + "_3'>" + data.Answers.c + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + "_4' value='"+data.Answers.d+"'/>" +
"<label for='q" + i + "_4'>" + data.Answers.d + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + "_5' value='"+data.Answers.e+"'/>" +
"<label for='q" + i + "_5'>" + data.Answers.e + "</label>"
+ "</div></div>" ;
});
$("#box").append(html);
});
You aren't accessing the JSON properly. data.Questions.Q and data.Answers.a is not correct.
Both data.Questions and data.Answers are arrays. You would have to loop through those arrays and access them like data.Questions[i].Q.
Or change your JSON to match how you want the code to be able to iterate them. You can fix one or the other, but the two must match. It looks to me like you want to fix the code for the questions and fix the JSON for the answers, but that's a design decision that you can make.