How to use loop inside append in jQuery function - javascript

i would like to append a new html code, buy clicking a button. however in the append there are a looping to show the html code.
<script>
var day_left = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
$(".add_schedule").click(function () {
if ($('.day-part').is(':empty')){
alert("You have limit schedule time!")
}else{
var stack = $(this).parent().find('#stack').val();
alert("form-schedule-"+stack);
$(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' +
'<div class="col-md-4">' +
'<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' +
'</div>' +
'<div class="col-md-4">' +
'<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' +
'<div class="col-md-4">' +
'<label>Pilih Hari</label> ' +
'<div class="dropdown dropdown-payment">' +
'<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' +
'<div class="dropdown-menu"><div class="everyday-part">' +
'<li> <label> ' +
'<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' +
'</li>' +
'</div>' +
'<div class="day-part">'+
// The Problem is Started From Here
$.each(day_left,function (i,val) {
$('<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+val+'</label> </li>');
})+'</div> </div> </div> </div></div><div class="clearfix"></div><br> ');
// End Of the Problem
stack = parseInt(stack)+1;
$(this).parent().find('#stack').val(stack);
}
});
</script>
actually i could append the html. But there is a bug in my $.each(day_left,function(i,val)){});
its only return the value of day_left which they are like sunday,monday,.... The code doesn't show the html code
My expected is it would be returned like this
but my code is only return :


Please make a function like this
function makeString(day_left,stack){
var str = '';
for(var i = 0; i <= day_left.length ; i++ ){
str += '<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+day_left[i]+'</label> </li>';
}
return str;
}
and change as following
$(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' +
'<div class="col-md-4">' +
'<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' +
'</div>' +
'<div class="col-md-4">' +
'<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' +
'<div class="col-md-4">' +
'<label>Pilih Hari</label> ' +
'<div class="dropdown dropdown-payment">' +
'<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' +
'<div class="dropdown-menu"><div class="everyday-part">' +
'<li> <label> ' +
'<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' +
'</li>' +
'</div>' +
'<div class="day-part">'+
// The Problem is Started From Here
makeString(day_left,stack)+'</div> </div> </div> </div></div><div class="clearfix"></div><br> ');
plnkr https://plnkr.co/edit/aBLj49Yv2g4EakeKjlqI?p=preview


you can do like that......
just use return function or make you iteration returnable.
<script>
var day_left = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
$(".add_schedule").click(function () {
if ($('.day-part').is(':empty')){
alert("You have limit schedule time!")
}else{
var stack = $(this).parent().find('#stack').val();
alert("form-schedule-"+stack);
$(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' +
'<div class="col-md-4">' +
'<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' +
'</div>' +
'<div class="col-md-4">' +
'<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' +
'<div class="col-md-4">' +
'<label>Pilih Hari</label> ' +
'<div class="dropdown dropdown-payment">' +
'<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' +
'<div class="dropdown-menu"><div class="everyday-part">' +
'<li> <label> ' +
'<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' +
'</li>' +
'</div>' +
'<div class="day-part">'+
// The Problem is Solved
function(){var s='';
$.each(day_left,function (i,val) {
s += '<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+val+'</label> </li>';
});
return s;}
+'</div> </div> </div> </div></div><div class="clearfix"></div><br> ');
// End Of the Problem
stack = parseInt(stack)+1;
$(this).parent().find('#stack').val(stack);
}
});
</script>

Related

When more than 1 div append, the dropdown option increases which I retrieve from DB

Before 2 div append, my dropdown looks like:
But as soon as I click the button to append another div it looks like this:
Here is my code for the button in html:
<div class="productDiv"></div>
<div class="mt-3 text-center"><button class="btn profile-button" style="color: white"
type="button" id="btnAddtoList">পণ্য যোগ করুন</button></div>
And jquery code:
$(function() {
let divCount = 0;
$('#btnAddtoList').on('click', function(){
divCount++;
const div_title = divCount;
var newDiv = $(
`<div class=item-wrapper-${div_title}>` +
'<div class="container rounded bg-white mt-3 mb-3">' +
'<div class="row">' +
'<div class="col-md-12">' +
'<div class="row mt-3">' +
'<span><strong>পণ্যের বিবরণ #</strong></span>'+ div_title +
</div>' +
'<div class="row mt-1">' +
'<select class="product_option form-control" id="product" data-search="true">' +
'<option disabled selected> -- পণ্য পছন্দ করুন (পণ্যের নাম | বিক্রয় মূল্য) -- </option>' +
'</select>' +
'</div>' +
'<div class="row mt-3">' +
'<label class="labels" style="font-size: 16px">পণ্যের নাম</label><input type="text"
class="form-control" id="productName">' +
'</div>' +
'<div class="row mt-3">' +
'<label class="labels" style="font-size: 16px">বিক্রয় মূল্য</label><input type="text"
class="form-control" id="sellPrice">' +
'</div>' +
'<div class="row mt-3">' +
'<label class="labels" style="font-size: 16px">পরিমাণ</label><input type="number"
class="form-control" id="amount">' +
'</div>' +
'<div class="mt-3 d-flex flex-column align-items-center text-center">
<button class="btn btn-danger deleteItem" type="button">মুছুন</button></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>');
$('.productDiv').append(newDiv);
console.log(div_title);
firebase.auth().onAuthStateChanged(function(user) {
console.log(user);
if (user) {
var user_id = user.uid;
firebase.database().ref('Products/').child(user_id).once('value')
.then(function(snapshot){
snapshot.forEach(function(childSnapshot) {
var product_name = childSnapshot.child("product_name").val();
var buying_price = childSnapshot.child("buying_price").val();
var selling_price = childSnapshot.child("selling_price").val();
var total = product_name + " | " + selling_price;
console.log(total);
$(".product_option").append('<option>' + total + '</option');
$(document).on("change", ".product_option", function () {
const valArr = $(`.item-wrapper-${div_title} .product_option
option:selected`).text().split(" | ");
console.log(valArr);
$(`div.item-wrapper-${div_title} #productName`).val(valArr[0]);
$(`div.item-wrapper-${div_title} #sellPrice`).val(valArr[1]);
});
$(document).on("click", ".deleteItem", function() {
$(this).closest(`.item-wrapper-${div_title}`).remove();
});
});
})
}
else{
window.location.href="{% url 'login' %}";
}
});
});
});
This is my code, Firstly I apologize for some Bengali word. These are just label names. id's and class names are written in English. Thanks in advance.

You are using $(".product_option") this will target all selects with that class and append new options to it that's the reason you are seeing duplicate. Instead you can use $(".item-wrapper-" + div_title).find(.. this will find select-box where options needs to be added .
Demo Code :
$(function() {
let divCount = 0;
$('#btnAddtoList').on('click', function() {
divCount++;
const div_title = divCount;
var newDiv = $(
`<div class=item-wrapper-${div_title}>` +
'<div class="container rounded bg-white mt-3 mb-3">' +
'<div class="row">' +
'<div class="col-md-12">' +
'<div class="row mt-3">' +
'<span><strong>পণ্যের বিবরণ #</strong></span>' + div_title +
'</div>' +
'<div class="row mt-1">' +
'<select class="product_option form-control" id="product" data-search="true">' +
'<option disabled selected> -- পণ্য পছন্দ করুন (পণ্যের নাম | বিক্রয় মূল্য) -- </option>' +
'</select>' +
'</div>' +
'<div class="row mt-3">' +
'<label class="labels" style="font-size: 16px">পণ্যের নাম</label><input type="text" class = "form-control" id = "productName" > ' +
'</div>' +
'<div class="row mt-3">' +
'<label class="labels" style="font-size: 16px">বিক্রয় মূল্য</label><input type="text" class = "form-control" id = "sellPrice" > ' +
'</div>' +
'<div class="row mt-3">' +
'<label class="labels" style="font-size: 16px">পরিমাণ</label><input type="number" class = "form-control"id = "amount" > ' +
'</div>' +
'<div class="mt-3 d-flex flex-column align-items-center text-center"> <button class = "btn btn-danger deleteItem" type = "button"> মুছুন </button></div > ' +
'</div>' +
'</div>' +
'</div>' +
'</div>');
$('.productDiv').append(newDiv);
/* firebase.auth().onAuthStateChanged(function(user) {
console.log(user);
if (user) {
var user_id = user.uid;
firebase.database().ref('Products/').child(user_id).once('value')
.then(function(snapshot) {
snapshot.forEach(function(childSnapshot) {*/
var product_name = "ABC";
var buying_price = 100;
var selling_price = 50;
var total = product_name + " | " + selling_price;
//get the item div which is added then append options to that
$(".item-wrapper-" + div_title).find(".product_option").append('<option>' + total + '</option');
/*
//some ..codes..
});
})
} else {
window.location.href = "{% url 'login' %}";
}
});*/
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productDiv"></div>
<div class="mt-3 text-center"><button class="btn profile-button" style="color: white" type="button" id="btnAddtoList">পণ্য যোগ করুন</button></div>

How to Display Recent message in MessageBox?

I'm using jquery and javascript to display messages, in backend I'm reversing list of messages but it displaying first message but I need recent sent and received message.
function scrollToLatestChatMessage(chatContainer) {
console.log("Entry::scrollToLatestChatMessage in chat.js "+chatContainer);
$(".msg_container_base").animate({
scrollTop : $('.msg_container_base')[0].scrollHeight
});
console.log("Entry::scrollToLatestChatMessage in chat.js ");
}
var str = '<div class="popup-box chat-popup chat-window" id="channel-'
+ channelId
+ '">'
+ ' <div class="col-xs-12 col-md-12">'
+ ' <div class="panel panel-default">'
+ ' <div class="top-bar">'
+ ' <div class="col-md-9 col-xs-9">'
+ '<img src="'
+ imageName
+ '" class="img-chat-box img-thumbnail" >'
+ '<span>'
+ name
+ '</span>'
+ '</div><div class="col-md-3 col-xs-3" style="text-align: right;">'
+ '<span id="minim_chat_window" class="glyphicon glyphicon-minus icon_minim"></span>'
+ ' <a href="javascript:close_popup(\''
+ channelId
+ '\')"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>'
+ ' </div></div>'
+ '<div class="panel-body msg_container_base">'
+ '<input type="hidden" name="friendId" id="friendId" value="'
+ toUserId
+ '"/>'
+ '<input type="hidden" name="channelId" id="channelId" value="'
+ channelId
+ '"/>'
+ '<input type="hidden" name="chatType" id="chatType" value="'
+ chatType
+ '"/>'
+ '</div>'
+ '<div class="panel-chat-footer">'
+ '<div class="input-group">'
+ '<input id="txtSendMessage" type="text"'
+ 'class="chat-text-box input-sm chat_input"'
+ ' placeholder="Write your message here..." required="required" /> <span'
+ ' class="input-group-btn">'
+ '<button class="btn btn-primary btn-sm" id="sentMessageBtn">Send</button>'
+ '</span>' + '</div>' + '</div>' + '</div>';
html = $.parseHTML(str), $("body").append(html);
Its displaying first message but I need recent message which is sent or received.chat image displaying first message.

try to use the latest method
function scrollToLatestChatMessage(chatContainer) {
console.log("Entry::scrollToLatestChatMessage in chat.js "+chatContainer);
$(".msg_container_base").animate({
scrollTop : $('.msg_container_base').prop("scrollHeight")
},1000);
console.log("Entry::scrollToLatestChatMessage in chat.js ");
}

JS append function breaks form field iteration

I have a conditional function (addAtn) that appends an extra field to a dynamic form if required. The main form is built once the number of items is selected.
All the elements of the function are tested and work, but when I try to call it from the ticketQuantity function it breaks, and only ever returns 1 ticketDetail row, without the extra append.
The addAtn function is
$.get('/sellers/' + venueId + '/atn', function(data) {
if (data['field']=="atn") {
function addAtn() {
ticketDetails.append(
'<div data-row="' + i + '" class="ticket-row form-group row">' +
'<div class="col-md-4 col-sm-6 col-xs-6">' +
'<label class="control-label text-muted">UTN (unique ticket number)</label>' +
'<input type="text" class="form-control utn" placeholder="" name="ticket[' + i + '][utn]">' +
'</div>' +
'</div>'
);
};
}
else {
function addAtn() {};
}
});
The ticketQuantity function on select is
$('#ticketQuantity').on('change', function () {
var ticketQuantity = $('#ticketQuantity').val();
var ticketDetails = $('#ticketDetails');
var previewTicketBtn = $('#previewTicketBtn');
ticketDetails.html('<p>For general admission tickets enter "GA" in Seat Number box.</p>');
if (ticketQuantity == 1) {
$('#split-tickets').hide();
} else {
$('#split-tickets').show();
}
$('#ticket-rows').html('');
for (var i = 1; i <= ticketQuantity; i++) {
ticketDetails.append('<hr><p class="ticket-details" style="margin-top: 30px;"><strong>Ticket ' + i + '</strong></p>' +
'<div data-row="' + i + '" class="ticket-row form-group row">' +
'<div class="col-md-2 col-sm-6 col-xs-6">' +
'<label class="control-label text-muted">Seat number</label>' +
'?' +
'<input type="text" class="form-control seatNumber" placeholder="" name="ticket[' + i + '][seat_number]">' +
'</div>' +
'<div class="col-md-2 col-sm-6 col-xs-6">' +
'<label class="control-label text-muted">Ticket face value</label>' +
'<div class="input-group">' +
'<span class="input-group-addon">£</span>' +
'<input type="text" class="form-control ticketFaceValue" name="ticket[' + i + '][ticket_face_value]">' +
'</div>' +
'</div>' +
'<div class="col-md-2 col-sm-6 col-xs-6">' +
'<label class="control-label text-muted">Asking price</label>' +
'<div class="input-group">' +
'<span class="input-group-addon">£</span>' +
'<input type="text" class="askingPrice last-ticket-input form-control" name="ticket[' + i + '][asking_price]">' +
'</div>' +
'</div>' +
'</div>' +
'<div data-row="' + i + '" class="ticket-row form-group row">' +
'<div class="col-md-6" col-sm-12 col-xs-12>' +
'<label class="control-label text-muted">Restrictions</label>' +
'<input type="text" class="form-control restrictions" placeholder="Please enter any restrictions here, for example Child or ID required" name="ticket[' + i + '][restrictions]">' +
'</div>' +
'</div>');
addAtn();
});
Can anyone help. I can't work out what I'm doing wrong.
Thanks.

Bootstrap Modal query

I have used orders.append in my GET AJAX method to display the user details stored in API. In here I have used 2 buttons save and cancel respectively with class "saveEdit edit" to edit the details. When the edit button is hit a modal pop-up to display the form to edit. On hitting save the details ain't getting saved jus the page refreshes. Save goes with the cancel button. Can you help me out?
My Bootstrap modal:
<div class="modal fade" id="myModallp" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit</h4>
</div>
<div class="modal-body">
<!-- Form for editing details.-->
<form id="uploadimageformm">
<input type="text" placeholder="first name" id="first" maxlength="15" name="user[firstname]" /><br />
<input type="text" placeholder="last name" id="last" maxlength="15" name="user[lastname]" /><br />
<input type="text" maxlength="10" placeholder="contact no." id="contact" name="user[contact_number]" onkeypress="return isNumberKey(event)" /><br />
<input type="address" placeholder="address1" id="addr1" name="user[address1]"/><br />
<input type="address" placeholder="address2" id="addr2" name="user[address2]"/><br />
<input type="address" placeholder="street" id="strt" name="user[street]"/><br />
<input type="address" placeholder="street1" id="strt1" name="user[street1]"/><br />
<input type="address" placeholder="city" id="city" name="user[city]"/><br />
<input type="address" placeholder="state" id="statee" name="user[state]"/><br />
<input type="address" placeholder="country" id="cntry" name="user[country]" /><br />
<input type="email" placeholder="email" id="email" name="user[email]" /><br />
<input type="password" placeholder="password" id="paswrd" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" name="user[password]" /><br />
<select name="user[gender]" id="gndr">
<option>Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select><br />
<input type="file" name="user_photo" id="user_photo" /><br>
<button class="saveEdit edit" data-id=' + order.id + ' type="submit" onclick="">Save</button>
<button class="cancelEdit edit">Cncl</button>
</form>
<div id="ack"></div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
My GET method of Ajax:
$.ajax({
type:'GET',
url:'http://13.229.164.32/users.json',
success:function(orders){
orders = orders.sort(function(a, b){
return a.id-b.id
})
$.each(orders,function(id,order){
$orders.append('<tr><td>'+ order.id +
'</td><td>' + '<span class="noedit firstname">' + order.firstname + '</span><input value=' + order.firstname + ' name="firstname" class="edit firstname_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit lastname">' + order.lastname+ '</span><input value=' + order.lastname + ' name="lastname" class="edit lastname_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit contact_number">' + order.contact_number + '</span><input value=' + order.contact_number + ' name="contact_number" class="edit contact_number_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit address1">' + order.address1 + '</span><input value=' + order.address1 + ' name="address1" class="edit address1_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit address2">' + order.address2 + '</span><input value=' + order.address2 + ' name="address2" class="edit address2_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit street">' + order.street + '</span><input value=' + order.street + ' name="street" class="edit street_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit street1">' + order.street1 + '</span><input value=' + order.street1 + ' name="street1" class="edit street1_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit city">' + order.city + '</span><input value=' + order.city + ' name="city" class="edit city_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit state">' + order.state + '</span><input value=' + order.state + ' name="state" class="edit state_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit country">' + order.country + '</span><input value=' + order.country + ' name="country" class="edit country_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit email">' + order.email + '</span><input type="email" value=' + order.email + ' name="email" class="edit email_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit password">' + order.password + '</span><input type="password" value=' + order.password + ' name="password" class="edit password_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit gender">' + order.gender + '</span><input value=' + order.gender + ' name="gender" class="edit gender_'+order.id+'"/>' +
'</td><td>' + order.created_at +
'</td><td>' + order.updated_at +
'</td>' +
'<td><button class="remove" data-id=' + order.id + '>X</button></td>' +
'<td><button class="editOrder noedit" data-toggle="modal" data-target="#myModallp">Edit</button></td>' +
'<td><button class="saveEdit edit" data-id=' + order.id + '>Save</button></td>' +
'<td><button class="cancelEdit edit">Cncl</button>' +
'</td><td>' + '<input type="file"/ name="user_photo" id="user_photo_'+order.id+'" class="edit user_photo">' +
'<img src="http://13.229.164.32/users/user_photo?id='+order.id+'" class="noedit user_photo_' +
order.id + '" height="80" width="80" >' +
'</td></tr>');
});
},
error:function(){
alert('error in testing');
}
});
My edit jquery method:
$orders.delegate('.editOrder','click',function(){
var $tr = $(this).closest('tr');
$tr.addClass('edit');
})
My cancel jquery method:
$orders.delegate('.cancelEdit','click',function(){
var $tr = $(this).closest('tr').removeClass('edit');
})
And lastly my saveEdit method:
$orders.delegate('.saveEdit', 'click', function(){
var $tr = $(this).closest('tr');
var self = this;
var user_id = $(this).attr('data-id');
var formData = new FormData();
var totalFiles = document.getElementById("user_photo_"+user_id).files.length;
for (var i = 0; i < totalFiles; i++)
{
var file = document.getElementById("user_photo_"+user_id).files[i];
formData.append("user_photo", file);
}
alert(user_id);
console.log(formData);
formData.append("user[firstname]", $(".firstname_"+user_id).val());
formData.append("user[lastname]", $(".lastname_"+user_id).val());
formData.append("user[gender]", $(".gender_"+user_id).val());
formData.append("user[address1]", $(".address1_"+user_id).val());
formData.append("user[address2]", $(".address2_"+user_id).val());
formData.append("user[street]", $(".street_"+user_id).val());
formData.append("user[street1]", $(".street1_"+user_id).val());
formData.append("user[contact_number]", $(".contact_number_"+user_id).val());
formData.append("user[email]", $(".email_"+user_id).val());
formData.append("user[password]", $(".password_"+user_id).val());
formData.append("user[city]", $(".city_"+user_id).val());
formData.append("user[state]", $(".state_"+user_id).val());
formData.append("user[country]", $(".country_"+user_id).val());
console.log(formData);
$.ajax({
// headers: {
// 'Content-Type': 'application/x-www-form-urlencoded'
// },
type: 'POST',
url: 'http://13.229.164.32/users/user_update.json?id=' + $(this).attr('data-id') ,
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function(nData){
$tr.find('span.firstname').html(formData.firstname);
$tr.find('span.lastname').html(formData.lastname);
$tr.find('span.gender').html(formData.gender);
$tr.find('span.address1').html(formData.address1);
$tr.find('span.address2').html(formData.address2);
$tr.find('span.street').html(formData.street);
$tr.find('span.street1').html(formData.street1);
$tr.find('span.contact_number').html(formData.contact_number);
$tr.find('span.email').html(formData.email);
$tr.find('span.password').html(formData.password);
$tr.find('span.city').html(formData.city);
$tr.find('span.state').html(formData.state);
$tr.find('span.country').html(formData.country);
$tr.find('span.user_photo').html(formData.user_photo);
// addUser1(newUser);
// console.log(newUser);
$tr.removeClass('edit');
},
error:function(){
alert('error saving user');
}
});
});

Javascript syntax error: TypeError: 'undefined' is not a constructor

i recieve this error when i launching my javascript below:
if(isPartOfIndex(new Array[25,20], indexClaimTypeRow) ){
//display size
listItem = '<li id="soze" data-theme="c"><h3>Size:</h3>' +
'<div data-role="fieldcontain" data-theme="c">' +
'<fieldset data-role="controlgroup" data-type="horizontal" id="recieptVat">' +
'<input type="radio" name="radio-choice-1" id="radio-choice-1" value="1.0" />' +
'<label for="radio-choice-1">1.0</label>' +
'<input type="radio" name="radio-choice-1" id="radio-choice-2" value="1.4" />' +
'<label for="radio-choice-2">1.4</label>' +
'<input type="radio" name="radio-choice-1" id="radio-choice-3" value="2.0" />' +
'<label for="radio-choice-3">2.0</label>' +
'</fieldset>' +
'</div>' +
'</li>';
$('#itemFieldslist').append(listItem);
$('#itemFieldslist').listview('refresh');
}
The error message displayed is:
TypeError: 'undefined' is not a constructor (evaluating 'new
Array[25,20]')
here is the isPartOfindex which expects an array as the first parameter
function isPartOfIndex(indexRow, indexType){
for(var i = 0; i < indexRow.length; i++){
if(indexRow[i] == indexType){
return true;
}
}
return false;
}
What am i doing wrong?
Thanks

Should be new Array(25, 20) or just [25, 20]

you need to change your code to:
if(isPartOfIndex(new Array(25,20), indexClaimTypeRow) ){
//display size
listItem = '<li id="soze" data-theme="c"><h3>Size:</h3>' +
'<div data-role="fieldcontain" data-theme="c">' +
'<fieldset data-role="controlgroup" data-type="horizontal" id="recieptVat">' +
'<input type="radio" name="radio-choice-1" id="radio-choice-1" value="1.0" />' +
'<label for="radio-choice-1">1.0</label>' +
'<input type="radio" name="radio-choice-1" id="radio-choice-2" value="1.4" />' +
'<label for="radio-choice-2">1.4</label>' +
'<input type="radio" name="radio-choice-1" id="radio-choice-3" value="2.0" />' +
'<label for="radio-choice-3">2.0</label>' +
'</fieldset>' +
'</div>' +
'</li>';
$('#itemFieldslist').append(listItem);
$('#itemFieldslist').listview('refresh');
}
new Array[25,20] is not proper declaration for your array.

Just need [20, 25] instead of new Array[20, 25]. You also can use new Array(20, 25)

Categories

Resources