error overlayer - can get variable index - leaflet - javascript

i want to fetch branch data then put it into overlay but index data can't be fetched, maybe you can help me how to write data with array
this is my code layergroup with variable cabang
#foreach ($cabang as $data)
var cabang{{ $data->idCabang }} = L.layerGroup();
#endforeach
initiate variable cabang at layer and overlayer
var map = L.map('map', {
center: [-7.6453934, 112.739125],
zoom: 8.48,
layers: [
peta1,
#foreach ($cabang as $data)
cabang{{ $data->idCabang }},
#endforeach
],
});
var overlayer = {
#foreach ($cabang as $data)
"{{ $data->namaCabang }}": cabang{{ $data->idCabang }},
#endforeach
};
this is a code for marker get data with json
var mark = $(document).ready(function() {
$.getJSON('mark/json', function(data) {
$.each(data, function(index) {
markers.addLayer(
L.marker(
L.latLng(
data[index].latitude, data[index].longitude
)
)
.bindPopup(
"<div style='font-size: 8px'>" +
"<table>" +
"<tr>" +
"<th width='60px'>Name</th>" +
"<td>" + ': ' + data[index].namaAgen + "</td>" +
"</tr>" +
"<tr>" +
"<th>ID Kerjasama</th>" +
"<td>" + ': ' + data[index].idKerjasama + "</td>" +
"</tr>" +
"<tr>" +
"<th>Cabang</th>" +
"<td>" + ': ' + data[index].namaCabang + "</td>" +
"</tr>" +
"<tr>" +
"<th>Alamat</th>" +
"<td>" + ': ' + data[index].alamat + "</td>" +
"</tr>" +
"<tr>" +
"<td>" +
"<a href='/detailWeb/" + data[index].idAgen +
"' class='btn btn-sm btn-primary' style='font-size:8px; color: white;'>Detail</a>" +
"</td>" +
"</tr>" +
"</table>"
)
).addTo(cabang.data[index].idCabang); // <----- can't get data
});
});
});
).addTo(cabang.data[index].idCabang); // <----- can't get data

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

Uncaught Reference Error: okButtonElementFirebase. All about addEventListener

having a hard time on addEventlistner. it gives me uncaught reference error when page is loaded
window.onload= initializer;
var refUsers;
var tableBody;
INITIALIZER
function initializer(){
refUsers=firebase.database().ref().child("users");
tableBody = document.getElementById("table_body");
loadTables();
}
LOADS TABLE
function loadTables(){
refUsers.on("value", function(snap){
var data = snap.val();
var file11 = "";
for(var key in data){
file11 += "<tr>" +
"<td>" + data[key].firstname + "</td>" +
"<td>" + data[key].lastname + "</td>" +
"<td>" + data[key].birthdate + "</td>" +
"<td>" + data[key].email + "</td>" +
"<td>" + data[key].date + "</td>" +
"<td>" + data[key].time + "</td>" +
'<td>' +
'<button class="btn btn-sm btnColorAccept center-block okButton" dataOk-confirmation="' + key + '">' +
'<span class="glyphicon glyphicon-ok"></span>' +
'ACCEPT</button>' +
'</td>' +
'<td>' +
'<button class="btn btn-sm btnColorDecline center-block removeButton" dataRemove-confirmation="' + key + '">' +
'<span class="glyphicon glyphicon-remove"></span>' +
'DECLINE</button>' +
'</td>' +
"</tr>;";
}
tableBody.innerHTML = file11;
if(file11 != ""){
var elementForOkButton = document.getElementsByClassName("okButton");
for( var i=0; i< elementForOkButton.length; i++){
elementForOkButton[i].addEventListener("click", okButtonElementFirebase, false);
}
}
});
} //end table function
GOT ERROR ON THIS LINE
elementForOkButton[i].addEventListener("click", okButtonElementFirebase, false);
FOR BUTTON WHEN CLICKED
function okButtonELementFirebase(){
var keyOkButton = this.getAttribute("dataOk-confirmation");
var firebaseRefUsers = refUsers.child(keyOkButton);
firebaseRefUsers.remove();
}
function okButtonELementFirebase(){
You have a typo - okButtonELementFirebase should be okButtonElementFirebase.

How can I set value form a specific xml String node?

I already read the string and build an html table from it:
var ShoesXML = "<All><Shoe><Name>All Stars</Name><BrandName>Converse</BrandName><ReleaseDate>10/2/08</ReleaseDate><Picture>pic.jpg</Picture></Shoe><Shoe><Name>All Star1s</Name><BrandName>Converse1</BrandName><ReleaseDate>11/2/08</ReleaseDate><Picture>pic.jpg</Picture></Shoe></All>";
$(document).ready(function() {
xmlDoc=$.parseXML( ShoesXML );
$(xmlDoc).find("Shoe").each(function(i, n) {
var html = "<tr>\n" +
"<td><span>" + $(n).find("Name").text() + "</span></td>\n" +
"<td>" + $(n).find("BrandName").text() + "</td>\n" +
"<td>" + $(n).find("ReleaseDate").text() + "</td>\n" +
"<td><img src='" + $(n).find("Picture").text() + "'></td>\n" +
"</tr>";
$("table.shoetable tbody").append(html);
});
});
I tried to set a value this way but no success:
$(n).find("Name").text("NEW VALUE")
Set the .textContext before building HTML string
$(n).find("Name").text("NEW VALUE")
var html = "<tr>\n" +
"<td><span>" + $(n).find("Name").text() + "</span></td>\n" +
"<td>" + $(n).find("BrandName").text() + "</td>\n" +
"<td>" + $(n).find("ReleaseDate").text() + "</td>\n" +
"<td><img src='" + $(n).find("Picture").text() + "'></td>\n" +
"</tr>";

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);
});

Categories