How to create multidimensional array using input text dynamically in javascript - javascript

I have a form that adds a row to a table dynamically and I want to save the data table. My question is how to create a multidimensional array in javascript? I try this (view)
$( "#quot tbody" ).append(
"<tr>" +
"<td>" + supplier.val()+ "<input type='hidden' id='_supplier' name='data[][supplier]' value='"+ supplier.val() + "' class='form-control'> " + "</td>" +
"<td>" + quots_number.val()+ "<input type='hidden' id='_quots_number' name='data[][quots_number]' value='"+ quots_number.val() + "'class='form-control'> " + "</td>" +
"<td>" + quots_date.val()+ "<input type='hidden' id='_quots_date' name='data[][quots_date]' value='"+ quots_date.val() + "'class='form-control'> " + "</td>" +
"<td>" + t_item_id.val()+ "<input type='hidden' id='_item_id' name='data[][item_id]' value='"+ t_item_id.val() + "'class='form-control'> " + "</td>" +
"<td>" + qty.val()+ "<input type='hidden' id='_qty' name='data[][qty]' value='"+ qty.val() + "'class='form-control'> " + "</td>" +
"<td>" + price.val()+ "<input type='hidden' id='_price' name='data[][price]' value='"+ price.val() + "'class='form-control'> "+ "</td>" +
"<td>" + currency.val()+ "<input type='hidden' id='_currency' name='data[][currency]' value='"+ currency.val() + "'class='form-control'> "+ "</td>" +
"<td>" + loc_id.val()+ "<input type='hidden' id='_loc_id' name='data[][location]' value='"+ loc_id.val() + "'class='form-control'> " + "</td>" +
"<td>" + khs_+ "<input type='hidden' id='_khs' name='data[][khs]' value='"+ khs_ + "'class='form-control'> "+ "</td>" +
"<td>" + util_+ "<input type='hidden' id='_util' name='data[][utilization]' value='"+ util_ + "'class='form-control'> "+ "</td>" +
"<td style='text-align:center;'>" +"<i onclick='removerow(this)'><span style='cursor:pointer' class='glyphicon glyphicon-remove'></span></i>"+ "</td>" +
"</tr>"
);
but after submit, it return null value.
this is my controller
if (! $_POST) {
$dataquot = (object) $this->quot->default_value;
} else { $table= $this->input->post('data');
for($i = 0; $i < count($table); $i++){
$dataquot[$i]['supplier'] = $table[$i]['supplier'];
$dataquot[$i]['quots_number'] = $table[$i]['quots_number'];
$dataquot[$i]['quots_date'] = $table[$i]['quots_date'];
$dataquot[$i]['t_item_id'] = $table[$i]['t_item_id'];
$dataquot[$i]['qty'] = $table[$i]['qty'];
$dataquot[$i]['price'] = $table[$i]['price'];
$dataquot[$i]['currency'] = $table[$i]['currency'];
$dataquot[$i]['location'] = $table[$i]['location'];
$dataquot[$i]['khs'] = $table[$i]['khs'];
$dataquot[$i]['utilization'] = $table[$i]['utilization'];
}
}
var_dump($dataquot);
array(1) { [0]=> array(10) { ["supplier"]=> NULL ["quots_number"]=> NULL ["quots_date"]=> NULL ["t_item_id"]=> NULL ["qty"]=> NULL ["price"]=> NULL ["currency"]=> NULL ["location"]=> NULL ["khs"]=> NULL ["utilization"]=> NULL } }
Thanks in advance for your kindness

Related

In html table how to show Yes/No instead of 1/0

I am receiving a json file from server and in this file there are some values 0/1. And therse values are showing same in html table. But i want to show these values as Yes/No.How can i do that
I am sharing my code
$.getJSON('list.php', function(data) {
$.each(data.classlists , function(i, f) {
var tblRows = "<tr>" + "<td>" + "Info" + "</td>" + "<td>" + f.messageName + "</td>" + "</tr>" +"<tr>" + "<td>" + "Link" + "</td>" +"<td><a target='_blank' href='"+link+"'>"+"Get INFO"+"</a></td>" + "</tr>" + "<tr>" + "<td>" + "Teacher" + "</td>" + "<td>" + f.date + "</td>" + "</tr>" + "<tr>" + "<td>" + "Is Live Now" + "</td>" + "<td>" + f.liveClassStatus + "</td>" + "</tr>" ;
in front of Is Live Now i want to show Yes or No
Pleaee make some necessary change
Put an if condition to check if the value is 1, then use yes otherwise no.
$.getJSON('list.php', function(data) {
$.each(data.classlists , function(i, f) {
var tblRows = "<tr>" + "<td>" + "Info" + "</td>" + "<td>" + f.messageName + "</td>" + "</tr>" +"<tr>" + "<td>" + "Link" + "</td>" +"<td><a target='_blank' href='"+link+"'>"+"Get INFO"+"</a></td>" + "</tr>" + "<tr>" + "<td>" + "Teacher" + "</td>" + "<td>" + f.date + "</td>" + "</tr>" + "<tr>" + "<td>" + "Is Live Now" + "</td>" + "<td>" + (f.liveClassStatus === 1 ? 'Yes' : 'No') + "</td>" + "</tr>" ;

data.length is not defined

I want to get the length of data, when i try console.log(data) i got all of data but console.log(data.length) is undefined.
function tampilesai(idsoal){
$.ajax({
url: "soalesai/baca/"+idsoal,
type: "POST",
dataType: "JSON",
success: function(data){
console.log(data); //here <=================
console.log(data.length); //here <=============
var html = "";
for (i = 0; i < data.length; ++i) {
html += "<tr>" +
"<td class='isitbl'>" + data[i].idsoal + "</td>" +
"<td class='isitbl' style='width:20px;'>" + data[i].noesai + "</td>" +
"<td class='isitbl' style='width:200px;'>" + data[i].matakuliah + "</td>" +
"<td>" + data[i].isiesai + "</td>" +
"<td class='isitbl'><button class='btn btn-danger btn-block' id='hapus' data[i]-id='" + data[i].idsoal + "'>" +
"<span class='icon-trash'></span> Hapus</button>" +
"</td>" +
"</tr>";
}
$("tbody#tblesai").html(html);
}
})
i need data.length for loop and fill my table. its data log
{idesai: "90", idsoal: "1", noesai: "1", matakuliah: "1", isiesai: "<p>asdd</p>"}
this image browser
If your data is an Object then you need to use Object.keys(data).length instead to get the length of the data object.
Try the following...
Convert the result data into JSON object. Although the return type was explicitly stated as JSON, but some version of jQuery may not parse it automatically. I ran into such bug with some version 2.x
var data = $.parseJSON(data);
// console.log(data.length) *should return 1
var html = "";
$.each(data, function(c) {
html += "<tr>" +
"<td class='isitbl'>" + c.idsoal + "</td>" +
"<td class='isitbl' style='width:20px;'>" + c.noesai + "</td>" +
"<td class='isitbl' style='width:200px;'>" + c.matakuliah + "</td>" +
"<td>" + c.isiesai + "</td>" +
"<td class='isitbl'><button class='btn btn-danger btn-block' id='hapus' data[i]-id='" + c.idsoal + "'>" +
"<span class='icon-trash'></span> Hapus</button>" +
"</td>" +
"</tr>";
});
$("tbody#tblesai").html(html);
I have not tested this, but I think it will give you an alternative idea.
Finish..
function tampilesai(idsoal){
$.ajax({
url: "soalesai/ambil/"+idsoal,
type: "POST",
dataType: "JSON",
success: function(data){
var html = "";
for(i=0;i<data.length;i++){
html += "<tr>" +
"<td class='isitbl'>" + data[i].idsoal + "</td>" +
"<td class='isitbl' style='width:20px;'>" + data[i].noesai + "</td>" +
"<td class='isitbl' style='width:200px;'>" + data[i].matakuliah + "</td>" +
"<td>" + data[i].isiesai + "</td>" +
"<td class='isitbl'><button class='btn btn-danger btn-block' id='hapus' data-id='" + data[i].idsoal + "'>" +
"<span class='icon-trash'></span> Hapus</button>" +
"</td>" +
"</tr>";
}
$("tbody#tblesai").html(html);
}
})
}
i change my controller
public function ambil($idsoal){
echo json_encode(
$this->pertanyaan_model
->ambilsoal($idsoal)->result());
}
and my model..
public function ambilsoal($idsoal){
$query = $this->db
->where("idsoal",$idsoal)
->get("tblsoalesai");
return $query;
}
and its works, thanks guys try to help me.. love you

table pagination in jquery and html

I am trying pagination on the following code. Adding data to the table using JavaScript. Can anyone help me out with how I should go about it?
Any addition or rewrite of the code will be helpful.
function onDeviceReady() {
var queryquery =
var bestbuy = "";
jQuery.getJSON(queryquery, function(resultsbestbuy) {
var productstopdeal = JSON.parse(resultsbestbuy);
bestbuy += "<div class=\"table-container\">" + "<table class=\"table table-filter\">";
for (i = 0; i < productstopdeal.Products.length; i++) {
bestbuy += "<tbody>" + "<tr>" + "<td>" + "<div class=\"ckbox\">" + "<input type=\"checkbox\" id=\"checkbox1\">" + "<label for=\"checkbox1\"></label>" + "</div>" + "</td>" + "<td>" + "" + "<i class=\"glyphicon glyphicon-star\"></i>" + "" + "</td>" + "<td>" + "<div class=\"media\">" + "<a href=";
var pId = urlEncode(productstopdeal.Products[i].Id);
bestbuy += pId;
bestbuy += " class=\"pull-left\">" + "<img src=" + productstopdeal.Products[i].DefaultPictureModel.ImageUrl + " class=\"media-photo\" style=\"height:120px; width:120px;\">" + "</a>" + "<div>" + "<p>" + "<strong><small><strike>MRP: Rs. " + +"/-" + "</strike><br />Offer price: Rs. " + +"/-<br />You save: Rs. " + +"/-</small></strong>" + "</p>" + "</div>" + "<div class=\"media-body\">" + "<p>" + +"</p>" + "</div>" + "<button class=\"btn btn-success\" type=\"button\" id=\"addToCartButton\"><span class=\"glyphicon glyphicon-shopping-cart\"></span> BUY NOW</button>" + "</div>" + "</td>" + "</tr>" + "</tbody>" + "</table>";
}
bestbuy += "</div>";
$('#bestBuy').html(bestbuy);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bestBuy"></div>
Corrected code from what i've understood.
jQuery.getJSON(queryquery, function (resultsbestbuy) {
var bestbuy = "";
var productstopdeal = JSON.parse(resultsbestbuy);
bestbuy += "<div class=\"table-container\">"
+ "<table class=\"table table-filter\"><tbody>";
for (i = 0; i < productstopdeal.Products.length; i++) {
bestbuy += "<tr>"
+ "<td>"
+ "<div class=\"ckbox\">"
+ "<input type=\"checkbox\" id=\"checkbox1\">"
+ "<label for=\"checkbox1\"></label>"
+ "</div>"
+ "</td>"
+ "<td>"
+ "<a href=\"javascript:;\" class=\"star\">"
+ "<i class=\"glyphicon glyphicon-star\"></i>"
+ "</a>"
+ "</td>"
+ "<td>"
+ "<div class=\"media\">"
+ "<a href='";
var pId = urlEncode(productstopdeal.Products[i].Id);
bestbuy += pId;
bestbuy += "' class=\"pull-left\">"
+ "<img src='" + productstopdeal.Products[i].DefaultPictureModel.ImageUrl + "' class=\"media-photo\" style=\"height:120px; width:120px;\">"
+ "</a>"
+ "<div>"
+ "<p>"
+ "<strong><small><strike>MRP: Rs. " + +"/-"
+ "</strike><br />Offer price: Rs. " + + "/-<br />You save: Rs. " + +"/-</small></strong>"
+ "</p>"
+ "</div>"
+ "<div class=\"media-body\">"
+ "<p>" + + "</p>"
+ "</div>"
+ "<button class=\"btn btn-success\" type=\"button\" id=\"addToCartButton\"><span class=\"glyphicon glyphicon-shopping-cart\"></span> BUY NOW</button>"
+ "</div>"
+ "</td>"
+ "</tr>"
}
bestbuy += "</tbody></table></div>";
$('#bestBuy').html(bestbuy);
});

concat string IE8 SCRIPT438: Object doesn't support property or method

I have this simple Javascript for string concatenation:
function stampaLista(store) {
lista = "<table ><tr>" +
"<td class='titoloLista' style='width:80px'>Data Ins.</td>" +
"<td class='titoloLista' style='width:130px'>Data/Ora Attività</td>" +
"<td class='titoloLista' style='width:100px'>Tipologia</td>" +
"<td class='titoloLista' style='width:30px'>Stato</td>" +
"<td class='titoloLista' style='width:150px'>Utente ins.</td>" +
"<td class='titoloLista' style='width:150px'>Utente designato</td>" +
"<td class='titoloLista' style='width:250px'>Anagrafica</td>" +
"<td class='titoloLista' style='width:30px'>Vai</td>" +
"</tr>";
for (i=0; i<store.length; i++) {
lista += "<tr >" +
"<td class='rigaLista'>" + store[i].dataIns + "</td>" +
"<td class='rigaLista'>" + store[i].dataAtt + " " + store[i].oraAtt + "</td>" +
"<td class='rigaLista'>" + store[i].idTipoAttivita + "</td>" +
"<td class='rigaLista'>" + store[i].stato + "</td>" +
"<td class='rigaLista'>" + store[i].utenteIns + "</td>" +
"<td class='rigaLista'>" + store[i].utenteAtt + "</td>" +
"<td class='rigaLista'>" + store[i].anagrafica + "</td>" +
"<td class='rigaLista'>" + "<div class='go' ><a id='" + store[i].id + "' href='#' class='go' return;><img alt='" + store[i].id + "' src='images/go.gif' /></a>" + "</div></td>" +
"</tr>";
};
lista += "</table>";
lista += "<div class='clearfloat'> </div>";
return lista;
}
but with IE8 I had error, on both population of "lista":
SCRIPT438: Object doesn't support property or method
The problem is solved with IE9 but i need to work also with IE8 due to customer requirements.
Any ideas ?
Thanks a lot
Fabrizio
Because there is HTML mixed with Javascript Make sure there is no HTML element id with the same id as a variable in the Javascript function.

why this javascript function is not executing, no error in console

This function is a problem:
function addInvoiceItemValue(name,pkwiu,netto,unit,qty,vat) {
if(vat == '23') v23 = " selected='selected'";
if(vat == '22') v22 = " selected='selected'";
if(vat == '8') v8 = " selected='selected'";
if(vat == '7') v7 = " selected='selected'";
if(vat == '5') v5 = " selected='selected'";
if(vat == '3') v3 = " selected='selected'";
if(vat == '0') v0 = " selected='selected'";
if(vat == 'zw') vzw = " selected='selected'";
var vatSelect = "<option value='23'"+v23+">23%</option><option value='22'"+v22+">22%</option><option value='8'"+v8+">8%</option><option value='7'"+v7+">7%</option><option value='5'"+v5+">5%</option><option value='3'"+v3+">3%</option><option value='0'"+v0+">0%</option><option value='zw'"+vzw+">zw.</option>";
var row = "<tr id='item" + itemID + "'><td><input size='30' maxlength='300' id='ii-name-" + itemID + "' name='ii-name-" + itemID + "' value='" + name + "'></td>";
row += "<td><input size='6' maxlength='50' id='ii-pkwiu-" + itemID + "' name='ii-pkwiu-" + itemID + "' value='"+pkwiu+"'></td>";
row += "<td><input size='6' maxlength='16' id='ii-netto-" + itemID + "' name='ii-netto-" + itemID + "' value='"+netto+"'></td>";
row += "<td><input size='5' maxlength='128' id='ii-unit-" + itemID + "' name='ii-unit-" + itemID + "' value='"+unit+"'></td>";
row += "<td><input size='5' maxlength='6' id='ii-qty-" + itemID + "' name='ii-qty-" + itemID + "' value='"+qty+"'></td>";
row += "<td><select id='ii-vat-" + itemID + "' name='ii-vat-" + itemID + "'>" + vatSelect + "</select></td>";
row += "<td><a onclick='delInvoiceItem(\"item" + itemID + "\")'><b>-</b> Usuń</a></td></tr>";
$('#invoiceItems tr:last').after(row);
itemID++;
}
Example execution:
addInvoiceItemValue('yyy','','676.76','','1','23');
addInvoiceItemValue('fgh','','777.00','','1','8');
And here is function that work's fine:
function addInvoiceItem() {
var vatSelect = "<option value='23'>23%</option><option value='22'>22%</option><option value='8'>8%</option><option value='7'>7%</option><option value='5'>5%</option><option value='3'>3%</option><option value='0'>0%</option><option value='zw'>zw.</option>";
var row = "<tr id='item" + itemID + "'><td><input size='30' maxlength='300' id='ii-name-" + itemID + "' name='ii-name-" + itemID + "' value=''></td>";
row += "<td><input size='6' maxlength='50' id='ii-pkwiu-" + itemID + "' name='ii-pkwiu-" + itemID + "' value=''></td>";
row += "<td><input size='6' maxlength='16' id='ii-netto-" + itemID + "' name='ii-netto-" + itemID + "' value='0'></td>";
row += "<td><input size='5' maxlength='128' id='ii-unit-" + itemID + "' name='ii-unit-" + itemID + "' value=''></td>";
row += "<td><input size='5' maxlength='6' id='ii-qty-" + itemID + "' name='ii-qty-" + itemID + "' value='1'></td>";
row += "<td><select id='ii-vat-" + itemID + "' name='ii-vat-" + itemID + "'>" + vatSelect + "</select></td>";
row += "<td><a onclick='delInvoiceItem(\"item" + itemID + "\")'><b>-</b> Usuń</a></td></tr>";
$('#invoiceItems tr:last').after(row);
itemID++;
}
The v23, v22, v8, v7, v5, v3, v0, vzw and itemdID are not always defined in all code paths.
This causes the script to fail.
You should change your function to
function addInvoiceItemValue(name,pkwiu,netto,unit,qty,vat) {
var vats = ['23','22','8','7','5','3','0','zw'];
var vatSelect = '';
for (var i = 0; i < vats.length; i++)
{
vatSelect += '<option value="'+vats[i]+'"';
if (vat == vats[i])
vatSelect += ' selected="selected"';
vatSelect += '>'+vats[i] + '%</option>';
}
var row = "<tr id='item" + itemID + "'><td><input size='30' maxlength='300' id='ii-name-" + itemID + "' name='ii-name-" + itemID + "' value='" + name + "'></td>";
row += "<td><input size='6' maxlength='50' id='ii-pkwiu-" + itemID + "' name='ii-pkwiu-" + itemID + "' value='"+pkwiu+"'></td>";
row += "<td><input size='6' maxlength='16' id='ii-netto-" + itemID + "' name='ii-netto-" + itemID + "' value='"+netto+"'></td>";
row += "<td><input size='5' maxlength='128' id='ii-unit-" + itemID + "' name='ii-unit-" + itemID + "' value='"+unit+"'></td>";
row += "<td><input size='5' maxlength='6' id='ii-qty-" + itemID + "' name='ii-qty-" + itemID + "' value='"+qty+"'></td>";
row += "<td><select id='ii-vat-" + itemID + "' name='ii-vat-" + itemID + "'>" + vatSelect + "</select></td>";
row += "<td><a onclick='delInvoiceItem(\"item" + itemID + "\")'><b>-</b> Usuń</a></td></tr>";
$('#invoiceItems tr:last').after(row);
itemID++;
}
but the itemID also has to be defined.
When is it SUPPOSED to be executing?
While this technically bad coding practice, test with this:
<a href='#' onClick="javascript: function('value');" > Click Me </a>
If you click, and it still doesn't work, it is an issue with your function. If you click and it works, the function is never being called in the first place.
You should also check your selector.
$('#invoiceItems tr:last').after(row);
Try adding it in a simpler place. Make another div,...
Then use the selector $('#result');
In any case, if your selector is bad, it will never execute and it won't throw an error b/c it never had cause to do what you told it. Now that I think about it, I think this is the issue.
Do me a favor and try
$('#invoiceItems tr:last').each(alert('exist???'));
If it doesn't alert, your selector is most likely not working. (For each thing that meets the criteria , do an alert)

Categories