I followed a tutorial that fetches JSON data from an API and renders this into a table, but when I press the 'Create table' button the table doesn't show up. The 'Create JSON Data' button however is functional and creates dummy data as a test to show in the table, the 'Create Table' button is also working but just doesn't show the table.
Could it be document.GetElementById, var tbl = js.CreateTable, or var tbl = js.CreateTable causing the problem?
<!DOCTYPE html>
<html lang="en">
<head>
<title>JSON to Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js" type="text/javascript"></script>
<script src="https://cdn.apidelv.com/libs/awesome-functions/awesome-functions.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.6/chance.min.js" type="text/javascript"></script>
<body>
<div id="jsonData">
<button type="button" class="btn btn-primary CreateJSON">Create JSON Array</button>
<button type="button" class="btn btn-primary CreateMyTable">Create Table</button>
</div>
</body>
<script>
$(document).ready(function($)
{
function CreateJSONArray()
{
var total_rows = 10;
console.time('create_json_array')
var arr = []
for (var i = 0; i < total_rows; i++)
{
arr.push({
"id": i +1,
"first_name": chance.first(),
"email": chance.email({domain: 'gmail.com'}),
"ip_address": chance.ip(),
})
};
console.timeEnd('create_json_array')
return arr;
document.getElementById(CreateJSONArray)
}
$(document).on('click', '.CreateJSON', function(event)
{
event.preventDefault();
var data = CreateJSONArray();
console.log(data);
});
$(document).on('click', '.CreateMyTable', function(event)
{
event.preventDefault();
var data = CreateJSONArray();
//var tbl = js.CreateTable(data);
var tbl = js.CreateTable(data,['Line Num','First Name','User Emails','IP Address']);
$('.MyTable').html(tbl);
});
});
</script>
</head>
</html>
You need to have a table tag in your body, so something like:
<table class="MyTable"></table>
Don't forget to use the same class as you specify in you js, in this case MyTable since $('.MyTable').html(tbl).
Related
I'm trying to create a trigger button that, when pressed, will display a value from an excel cell in alert box or on the page.
below is all I could get, but it doesn't display anything on the page.
update: I managed to do this using ActiveX, but I don't want to use this library for some reasons. Do you have any idea how I could do it?
update code:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.6/xlsx.full.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Excel to HTML</title>
</head>
<body>
<p>Press to show</p>
<input type="button" onclick="ReadData(4, 2) ; msgprint()" value="Show" />
<div id="div1">
<script>
function ReadData(cell, row) {
var excel = new ActiveXObject("Excel.Application");
var excel_file = excel.Workbooks.Open("mypah/myworkbook.xlsx");
var excel_sheet = excel.Worksheets("Sheet1");
var data = excel_sheet.Cells(cell, row).Value;
document.getElementById("div1").innerText = data;
}
</script>
</div>
<script>
function msgprint() {
alert(document.getElementById("div1").innerText);
}
</script>
</body>
</html>
I am a beginner to javascript/jquery and I cannot figure out why I cannot fetch the text of the button clicked. When I console.log(this) it returns the button text. I cannot retrieve the value however to pass into the queryURL in the click handler. Sorry for the rudimentary question, any help would be appreciated.
var topics = ["boardwalk empire", "sopranos", "the wire", "billions", "entourage", "dexter", "breaking bad", "better call saul", "dark", "black mirror",]
var baseURL = "http://api.giphy.com/v1/gifs/search?q="
var apiKey = "Yz4pO4lJDaMYGIX80M9gc2Mq7HKKS2or"
for (var e = 0; e < topics.length; e++) {
var button = $("<button>").text(topics[e]);
button.addClass("btn-primary");
$(".show-buttons").append(button);
button.on("click",function (){
var input = $(this).val()
console.log(this)
var queryURL = baseURL + input + "&api_key=" + apiKey + "&limit=10";
$.ajax({
url: queryURL,
method: "GET"
}).then(function (response) {
console.log(response.data);
console.log(queryURL);
});
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<h1>gifTastic!</h1>
<label for="search-field">Find a TV Show: </label>
<input type="text" id="search-field">
<input id="find-giphy" class="btn-primary" type="submit" value="giphy Search">
<div class="show-buttons"></div>
<div class="show-gifs"></div>
</div>
Modify btn click function to:
button.on("click",function (){
var input = $(this).text(); // .text() can be used to set and get text
I want to create a new div element, with unique id from the latest array that i push every i click a create button , but it seem my code not working, here is my code below :
$(document).ready(function(){
var arr = [];
counter = 0;
$('#newDiv').on('click', function(){
$('.container').append('<div class="image">hallo</div');
counter ++;
arr.push(counter);
$('.image').attr('id',arr[arr.length-1]);
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="container"></div>
<button id="newDiv">create new div</button>
</body>
</html>
On each click you are setting id of each image element to last element in array, instead you can do something like this.
let arr = [], counter = 0;
$('#newDiv').on('click', function() {
arr.push(counter++)
const img = $('<div />', {
'class': 'image',
'id': arr.slice(-1)
}).text('hallo');
$('.container').append(img)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
<button id="newDiv">create new div</button>
Or you can first push counter to array and then take last element for array with slice and use it as id.
let arr = [], counter = 0;
$('#newDiv').on('click', function() {
arr.push(counter++)
const img = $(`<div class="image" id=${arr.slice(-1)}>hallo</div>`)
$('.container').append(img)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
<button id="newDiv">create new div</button>
First when you use classe query selector it would add the id to every element with that class so here is a work around you can use :
Add the add on the appending part
$(document).ready(function(){
var arr = [];
counter = 0;
$('#newDiv').on('click', function(){
counter ++;
arr.push(counter);
$('.container').append('<div id='+(arr.length-1)+' class="image">hallo '+(arr.length-1)+'</div');
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="container"></div>
<button id="newDiv">create new div</button>
</body>
</html>
Your original code is selecting all div with the image class and updating them all with the latest number.
I suggest creating the div adding the number to the new div only and then appending it to the container.
Please review the updated code below:
$(document).ready(function() {
var arr = [];
counter = 0;
$('#newDiv').on('click', function() {
counter++;
arr.push(counter);
// Create div
$('<div class="image"></div').text('hallo')
// Add ID attribute
.attr('id', arr[arr.length - 1])
// Apend new div to container
.appendTo('.container');
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="container"></div>
<button id="newDiv">create new div</button>
</body>
</html>
I am new to JavaScript and I am trying to do something very simple. I wan to appear array[1] text in firstDiv's innerHTML when I click button.
I have followed all instructions but still it's not working.
<!doctype html>
<html>
<head>
<title>Learning Javascript</title>
<meta charset="utf-8" />
<meta htttp-equiv="content-type" contents="text/html; charset-utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<button id="stylesChanger">Change the text !</button>
<div id="firstDiv">This sis some text</div>
<script type="text/javascript">
var myArray=new Array[];
myArray[0]="pizza";
myArray[1]="chocolate";
document.getElementById("stylesChanger").onclick=function(){
document.getElementById("firstDiv").innerHTML=myArray[1];
}
</script
</body>
</html>
change your var myArray=new Array[]; to var myArray=[];
Then it will work
var myArray=[];
myArray[0]="pizza";
myArray[1]="chocolate";
document.getElementById("stylesChanger").onclick=function(){
document.getElementById("firstDiv").innerHTML=myArray[1];
}
<button id="stylesChanger">Change the text !</button>
<div id="firstDiv">This sis some text</div>
This code will make sure you get the first element of myArray on button click. And sets the div text as myArray first element.
Working Sample: JSFIDDLE
var myArray = new Array();
myArray[0] = 'pizza';
myArray[1] = 'chocolate';
var btn = document.getElementById('stylesChanger');
btn.addEventListener('click', getArrayFirstElement, false);
function getArrayFirstElement(){
document.getElementById("firstDiv").innerHTML = myArray[0];
}
I am trying to create tabs with listviews in JQM dynamically on a button click. Currently, I use JS array that contains sample data which will finally be populated via ajax. After research, it seems that I should trigger either trigger("create") or trigger ("refresh"), but apparently, I don't do it correctly. Here's the code:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>navbar demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script type="text/javascript" src="../JS/nav.js"></script>
</head>
<body>
<button onclick="fillCategories()">Fill</button>
<div id = "decisions" > </div>
</body>
</html>
Javascript:
function fillCategories() {
var navElements = [{"category_sublist_id":"1","category_sublist_name":"Europe"},
{"category_sublist_id":"2","category_sublist_name":"Asia"},
{"category_sublist_id":"3","category_sublist_name":"Americas"}];
var categoriesTabs = $('<div id="categories">')
.attr("data-role","tabs")
.appendTo("#decisions");
var navBar = $("<div>").attr("id","categoriesNames")
.attr("data-role","navbar")
.appendTo("#categories");
var listElements = [{"sublist_row_id":"1","category_sublist_id":"1","sublist_name":"Great Britain"},
{"sublist_row_id":"2","category_sublist_id":"1","sublist_name":"Sweden"},
{"sublist_row_id":"3","category_sublist_id":"1","sublist_name":"France"},
{"sublist_row_id":"4","category_sublist_id":"1","sublist_name":"Germany"}];
$("#categoriesNames").append($("<ul>").attr("id","categoriesUl"));
$(navElements).each(function(){
$("#categoriesUl").append($("<li>")
.attr("value", this.category_sublist_id)
.append($("<a>")
.attr("href", "#sublist"+this.category_sublist_id)
.attr("data-theme","a")
.attr("data-ajax","false")
.text(this.category_sublist_name)));
});
$("#categories").append(navBar).trigger("create");
categorySublistView("categories", "sublist2", listElements);}
function categorySublistView(elementId, listLink, listData) {
var listId = listLink+"id";
var tab = $("<div>").attr("id",listLink)
.addClass("ui-content")
.appendTo("#"+elementId);
var list = $("<ul>").attr("data-role","listview")
.attr("data-inset","true")
.attr("data-icon","false")
.attr("id", listId)
.appendTo("#"+listLink);
$(listData).each(function(){
var li = $("<li/>")
.attr("value",this.sublist_row_id)
.appendTo("#"+listId);
var link =$("<a>")
.attr("href", "#")
.text(this.sublist_name)
.appendTo(li);
});
if ( $('#'+listId).hasClass('ui-listview')) {
$('#'+listId).listview('refresh');
}
else {
$('#'+listId).trigger('create');
}}
edit:
My initial intention was to draw 3 tabs in the navbar which are listviews, which are visible on tab clicks