We Keep Coding

Autodesk forge viewer table row click to isolate elements

I am trying to create a dynamic table inside the viewer's page.
each row of the table represents an object from the model and has a couple of different parameters ( name, level, etc..)
I want to make a click event on each row, that isolates the element in the viewer's model.
I have created the table programmatically using js. (the table is created after pressing an external command button )
how can I add an event listener to a row click, that would isolate the element?
this is my code for creating the table after pressing the command button:
var myTable = $('.my-table');
var myArr = rows; //matrix of object values
for (var i = 0; i < myArr.length; i++)
myTable.append("<tr id=" + i + ">" +
" <td>" + myArr[i][0] + "</td>" +
"<td>" + myArr[i][1] + "</td>" +
"<td>" + myArr[i][2] + "</td>" +
"<td>" + myArr[i][3] + "</td>" +
"<td>" + myArr[i][4] + "</td>" +
"<td>" + myArr[i][5] + "</td>" +
"<td>" + myArr[i][6] + "</td>" +
"<td id=" + "tt" + ">" + myArr[i][7] + "</td>" +
"</tr>");
const row = document.getElementById(`${i}`);
row.addEventListener('onClick', function(evt, item) { /// we are using a viewer api property to isolate the
_this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));
});

First, it's not a Forge issue but a JavaScript syntax and indent issue.
After re-indenting your code, you can see the codes for adding the click event is out of the for-loop, so you need to add the bracket pair to include the codes for adding the click event into the for-loop.
When defining for-loop in JavsScirpt without bracket { and }, it only takes the first line in the count.
In addition, there is no onClick event. When using addEventListener, the event name is click, not onClick.
var myTable = $('.my-table');
var myArr = [[1,2,3,4,5,6,7], [1,2,3,4,5,6,7]]; //matrix of object values
for (var i = 0; i < myArr.length; i++) {
myTable.append("<tr id=" + i + ">" +
" <td>" + myArr[i][0] + "</td>" +
"<td>" + myArr[i][1] + "</td>" +
"<td>" + myArr[i][2] + "</td>" +
"<td>" + myArr[i][3] + "</td>" +
"<td>" + myArr[i][4] + "</td>" +
"<td>" + myArr[i][5] + "</td>" +
"<td>" + myArr[i][6] + "</td>" +
"<td id=" + "tt" + ">" + myArr[i][7] + "</td>" +
"</tr>");
const row = document.getElementById(`${i}`);
row.addEventListener('click', function(evt) { /// we are using a viewer api property to isolate the
_this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));
});
}
To use onClick, it will become:
const row = document.getElementById(`${i}`);
row.onClick = function(evt) { /// we are using a viewer api property to isolate the
_this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));
});
Lastly, why not just use jQuery only? The jquey.on can help bind events to dynamically created items, so that the click event will be delegated to any tr element in the table, even if it's added after you bound the event handler.
var myTable = $('.my-table');
var myArr = [[1,2,3,4,5,6,7], [1,2,3,4,5,6,7]]; //matrix of object values
myTable.on('click', 'tr', function() {
_this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));
});
for (var i = 0; i < myArr.length; i++) {
myTable.append("<tr id=" + i + ">" +
" <td>" + myArr[i][0] + "</td>" +
"<td>" + myArr[i][1] + "</td>" +
"<td>" + myArr[i][2] + "</td>" +
"<td>" + myArr[i][3] + "</td>" +
"<td>" + myArr[i][4] + "</td>" +
"<td>" + myArr[i][5] + "</td>" +
"<td>" + myArr[i][6] + "</td>" +
"<td id=" + "tt" + ">" + myArr[i][7] + "</td>" +
"</tr>");
}
ref: https://stackoverflow.com/a/15420578

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

Converting the text into a clickable Link

I have a web application, which displays the result parsed from an XML file in the form of table using ajax. It is working good, but the thing is, the data in the XML file is mostly URLs but I am seeing the result in the form of text. I want that text to be made/converted into a clickable link so that it would make my life easier. Is there any code which would make it possible? If yes, please let me know where should I place it. That code is in ASPX page which also has the html code which is responsible for the style of my webpage..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="Scripts/jquery-3.2.1.js"></script>
<script language="javascript" type="text/javascript">
var CheckImage = "<img src='images/check.png' height='25' width='25'>";
var CrossImage = "<img src='images/cross.png' height='25' width='25'>";
var Fail = "<img src='images/fail.png' height='25' width='30'>";
setInterval(url, 100);
setInterval(redirects, 100);
function url()
{
$.ajax(
{
url: "/XMLFile.xml",
type: "GET",
dataType: "xml",
cache: false,
success: function (xml)
{
var tableContent1 = "<table border='1' cellspacing='0' cellpadding='5'>" +
"<tr>" +
"<th>SiteName</th>" +
"<th>URLType</th>" +
"<th>DNSStatus</th>" +
"<th>TargetStatus</th>" +
"<th>TTL</th>" +
"<th>SSL</th>" +
"<th>Force</th>" +
"</tr>";
$(xml).find('ProdURL').each(function ()
{
tableContent1 += "<tr>" +
"<td>" + $(this).attr('ProdHost') + "</td>" +
"<td>" + $(this).attr('URLType') + "</td>" +
"<td>" + ($(this).attr('DNSStatus') == "OK" ? CheckImage : CrossImage) + "</td>" +
"<td>" + ($(this).attr('TargetStatus') == "OK" ? CheckImage : CrossImage) + "</td>" +
"<td>" + $(this).attr('TTL') + "</td>" +
"<td>" + ($(this).attr('SSL') == "OK" ? CheckImage : CrossImage) + "</td>" +
"<td>" + $(this).attr('Force') + "</td>" +
"</tr>";
});
tableContent1 += "</table>";
$("#UpdatePanel").html(tableContent1)
getdata(tableContent1);
}
});
}
function redirects()
{
//this ajax code parses the information from XML file and displays it on the table
$.ajax(
{
//If the name of the XML file is changed, make sure to update that in the url:
url: "/XMLFile.xml",
type: "GET",
dataType: "xml",
contentType:"url",
cache: false,
success: function (xml)
{
var tableContent2 = "<table border='5' cellspacing='1' cellpadding='10'>" +
"<tr>" +
"<th>URL</th>" +
"<th>Target</th>" +
"<th>Status</th>" +
"</tr>";
$(xml).find('Redirect').each(function ()
{
tableContent2 += "<tr>" +
"<td>" + $(this).attr('URL')+ "</td>" +
"<td>" + $(this).attr('Target') + "</td>" +
"<td>" + ($(this).attr('Status') == "Fail" ? Fail : CheckImage && $(this).attr('Status') == "OK" ? CheckImage : CrossImage) + "</td>" +
"</tr>";
});
tableContent2 += "</table>";
$("#UpdatePanel1").html(tableContent2)
getdata(tableContent2);
}
});
}

Here is a more complete example to show you. This is adding a anchor tag with the URL inside your table when you are creating your <td> in the loop.
let tableContent2 = "";
$("div").each(function() {
tableContent2 += "<tr>" +
"<td> <a href='" + $(this).attr('URL') + "'>" + $(this).attr('URL') + "</a></td>" +
"<td>" + $(this).attr('Target') + "</td>" +
"<td>" + $(this).attr('Status') + "</td>" +
"</tr>"
})
$("#UpdatePanel1").html(tableContent2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- this div is just for this example -->
<div URL="https://example.com" Target="I am a target" Status="OK"></div>
<table>
<tbody id="UpdatePanel1">
</tbody>
</table>

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