I am using Grid.js library to build the tables in the wordpress website. Searched for a lot of documentation but unable to find how to add links to the names in the first column to open in a new tab which is the array object.
HTML
<!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
href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
rel="stylesheet"
/>
<title>Grid.js Hello World</title>
</head>
<body>
<h1>
Grid.js Hello World
</h1>
<div id="wrapper"></div>
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
<script src="src/index.js"></script>
</body>
</html>
JS file:
new gridjs.Grid({
columns: ["Name", "Email", "Phone Number"],
search: true,
data: [
["John", "john#example.com", "(353) 01 222 3333"],
["Mark", "mark#gmail.com", "(01) 22 888 4444"],
["Eoin", "eoin#gmail.com", "0097 22 654 00033"],
["Sarah", "sarahcdd#gmail.com", "+322 876 1233"],
["Afshin", "afshin#mail.com", "(353) 22 87 8356"]
]
}).render(document.getElementById("wrapper"));
Output
View Code in Sandbox
You can add custom HTML using the formatter option and the gridjs.html() function. For example:
new gridjs.Grid({
// Converted the columns to objects, instead of strings, to pass options
columns: [
{ name: "id", hidden: true },
{
name: "Name",
// Added a `formatter` function
formatter: (cell, row) => {
// Uses the `html` function to add elements
// Note that we're pulling a value for the link from the
// data set as well for a more complete, real-world example
return gridjs.html(
`<a href='mypage.html?id=${row.cells[0].data}'>${cell}</a>`
);
}
},
{
name: "Email",
formatter: (cell, row) => {
return gridjs.html(`<a href='mailto:${row.cells[2].data}'>${cell}</a>`);
}
},
{ name: "Phone Number" }
],
search: true,
// Added unique id, per OP's comments
data: [
[1, "John", "john#example.com", "(353) 01 222 3333"],
[2, "Mark", "mark#gmail.com", "(01) 22 888 4444"],
[3, "Eoin", "eoin#gmail.com", "0097 22 654 00033"],
[4, "Sarah", "sarahcdd#gmail.com", "+322 876 1233"],
[5, "Afshin", "afshin#mail.com", "(353) 22 87 8356"]
]
}).render(document.getElementById("wrapper"));
Updated example using unique id, per OP's comments
Working CodeSandbox: https://codesandbox.io/s/gridjs-hello-world-forked-u52kyg?file=/src/index.js
Source: https://gridjs.io/docs/examples/html-cells
You can use a custom cell formatter provided by gridjs.
Refer Docs: https://gridjs.io/docs/examples/html-cells/
My Working code sandbox link: https://codesandbox.io/s/gridjs-hello-world-forked-uvsgom
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 12 months ago.
So I am creating JSON objects for certain incomes and expenses. I have added names, amounts and if recurring or not.
However Im trying to print values from these objects to a div element by using a for loop.
I have tried getting the div by getElementById and then using innerHtml to print the values of the object but I get this error:
Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')
Below is my javascript:
const incomes = [
{
name: "Walter",
amount: 2000,
recurring: true,
},
{
name: "James",
amount: 4000,
recurring: true,
},
{
name: "Mike",
amount: 500,
recurring: true,
},
{
name: "Jane",
amount: 1000,
recurring: true,
},
{
name: "Larry",
amount: 5000,
recurring: true,
},
];
for (i = 0; i < incomes.length; i++) {
let container = document.getElementById("container");
container.innerHTML(expenses[i].name);
}
const expenses = [
{
name: "Electricity",
amount: 700,
recurring: true,
},
{
name: "Water",
amount: 500,
recurring: true,
},
{
name: "Internet",
amount: 800,
recurring: true,
},
{
name: "Rent",
amount: 7500,
recurring: true,
},
{
name: "Transport",
amount: 1500,
recurring: true,
},
];
for (i = 0; i < expenses.length; i++) {
let container = document.getElementById("container");
container.innerHTML(expenses[i].name);
}
And my HTML too:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Incomes and Expenses</title>
<script src="incomes.js"></script>
<link rel="stylesheet" href="incomes.css" />
</head>
<body>
<h1 class="income">Incomes</h1>
<div id="container" class="container"></div>
</body>
</html>
Thank you
You probably want to execute your javascript commands after the html is loaded. Try moving it before closing of the <body> tag (see below). Right now, it executes before your container element is created in the DOM.
...
<script src="incomes.js"></script>
</body>
</html>
Сan't generate an pure HTML file from current JSON data.
I tried to generate pure HTML file from angular generated module JSON:
{"surveyTitle":"ddasdas","surveyType":"Training","surveyQuestions":[{"questionTitle":"dasda","questionType":"Single choice","questionGroup":{"options":[{"optionText":"dsadsa"},{"optionText":"dasdsa"}],"showRemarksBox":false}}],"IsAnonymous":false}
To solve it I used this source below
from here surveyjs.io :
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>One choice - Radio Group question, jQuery Survey Library Example</title><meta name="viewport" content="width=device-width"/>
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/survey-jquery#1.8.75/survey.jquery.min.js"></script>
<link href="https://unpkg.com/survey-core#1.8.75/modern.min.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="./index.css"></head>
<body>
<div id="surveyElement" style="display:inline-block;width:100%;"></div>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
JS:
Survey
.StylesManager
.applyTheme("modern");
var json = {
questions: [
{
"type": "radiogroup",
"name": "car",
"title": "What car are you driving?",
"isRequired": true,
"hasNone": true,
"colCount": 4,
"choices": [
"Ford",
"Vauxhall",
"Volkswagen",
"Nissan",
"Audi",
"Mercedes-Benz",
"BMW",
"Peugeot",
"Toyota",
"Citroen"
]
}
]
};
window.survey = new Survey.Model(json);
survey
.onComplete
.add(function (sender) {
document
.querySelector('#surveyResult')
.textContent = "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
$("#surveyElement").Survey({model: survey});
But I getting errors for my current JSON.
My Code Here: Stackblitz - by clicking Add New Survey JSON has generates.
I created a project and I'm trying to add gogocartoJs in it.
The project works but the map is not showing.
I tried with the guides I found in the site, it looks plain and easy, but there is an step that I'm not understanding (please dont just copy/paste a piece of the site like it was obvious what it is the mistake, because it is not for me)
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://gogocarto.fr/assets/css/gogocarto.min.css"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script type="text/javascript" src="./jquery.js"></script>
<script src="https://gogocarto.fr/js/gogocarto.min.js"></script>
<title>Hello Webpack</title>
</head>
<body>
<div>
<h1>Hello Webpack</h1>
<div id="gogocarto"></div>
</div>
<script>
$(document).ready(function() {
carto = goGoCarto("#gogocarto", {
data: {
taxonomy: taxonomy,
elements: elements
}
});
});
</script>
<script src="./bundle.js"></script>
</body>
</html>
I expect the map to show, and it doesnt
I added the project to github to show better
https://github.com/Aredros/testGogo/tree/master/dist
elements & taxonomy are js variables containing data you must provide according to the format described in the documentation.
// taxonomy
let taxonomy = {
"options":[
{
"id": "eu1",
"name":"Belgium",
"color":"#9acd32",
"icon":"fa-solid fa-building"
},
{
"id": "eu2",
"name": "Netherland",
"color": "#ffa500",
"icon": "fa-solid fa-fan"
},
{
"id": "eu3",
"name": "Luxembourg",
"color": "#a52a2a",
"icon": "fa-solid fa-money-bill-1"
}
]
}
The only missing info in the documentation is the id key in the taxonomy which must be referenced in your elements source dataset.
// elements
let elements = [
{
"title": "Brussels",
"geo": {
"latitude":50.84,
"longitude":4.34
},
"taxonomy": [ "eu1" ],
},
{
"title": "Namur",
"geo": {
"latitude":50.45,
"longitude":4.88
},
"taxonomy": [ "eu1" ],
},
{
"title": "Liege",
"geo": {
"latitude":50.62,
"longitude":5.60
},
"taxonomy": [ "eu1" ],
},
{
"title": "Rotterdam",
"geo": {
"latitude":51.88,
"longitude":4.51
},
"taxonomy": [ "eu2" ],
},
{
"title": "Amsterdam",
"geo": {
"latitude":52.07,
"longitude":5.12
},
"taxonomy": [ "eu2" ],
},
]
Idealy you should build an API returning taxonomy classification & elements data. Then perform ajax call in your html page.
$.ajax({
type: 'GET',
url: '/ajax/url_to_get_elements',
dataType: 'json',
success: function(elements, status) {
build_map(elements);
}
});
// build map = function with 1 arguments (elements) where you put the call to goGoCarto and options...
You can define more than 1 taxonomy group (Example above is about English countries) with the name you want => Cfr. Advanced Taxonomy with Categories. Your elements can then have multiple taxonomy reference listed [ "eu1", "week22", 14 ]. Items in the list can be Integer or String. The only important thing is the ID key and the taxonomy order! Keep the same order in your taxonomy than in your key "taxonomy": in your elements data sources!
Point of attention
Because the library is highly configurable with options, colors and icons it is important to put all your <scripts> tags inside <head> tags of your html page!
In jsTree, I want to draw a new tree replacing the previous one and have nodes initially selected in the new tree.
In the code below, I confirmed that state : {opened : true} made the node initially opened and state : {disabled : true} made the node initially disabled, so I thought state : {selected : true} works too, but actually it is not.
Please note that specifying state : {selected : true} when calling $('#using_json').jstree({...}); does result in the node selected as described in https://www.jstree.com/docs/json/. Then, I wonder why state : {selected : true} does not work when I replace a existing tree with a new tree (while state : {opened : true} and state : {disabled : true} are working).
How can we achieve nodes to be initially selected after replacing tree?
$('#using_json').jstree({ 'core' : {
data : [
{
text : 'Previous root node',
}
]
} });
const newData = [
{
text : 'New root node (Initially opened)',
state : {
opened : true, //'opened' takes effect after refresh
},
children : [
{ text : 'Child 1 (Initially disabled)',
state : {
disabled : true, //'disabled' takes effect after refresh
}
},
{ text : 'Child 2 (Intended to be selected initially but failing)',
state : {
selected : true //'selected' does NOT take effect after refresh
}
}
]
}
]
$('#using_json').jstree(true).settings.core.data = newData;
$('#using_json').jstree(true).refresh(true);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/themes/default/style.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/jstree.min.js"></script>
<div id="using_json"></div>
</body>
</html>
You could try using the select_node config property when you initialize the tree, which you could do just once. For this you need to add some IDs to your nodes so you can then reference the selected node:
$('#using_json').jstree({
'core': {
select_node: 'c2',
data: [{
text: 'Root node after Refresh (Opened)',
state: {
opened: true, //'opened' takes effect after refresh
},
children: [{
text: 'Child 1 (Disabled)',
id: 'c1',
state: {
disabled: true, //'disabled' takes effect after refresh
}
}, {
text: 'Child 2 (Intended to be selected but failing)',
id: 'c2',
state: {
selected: true //'selected' does NOT take effect after refresh
}
}]
}]
}
});
//$('#using_json').jstree(true).settings.select_node = 'c2';
//$('#using_json').jstree(true).refresh(true);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/themes/default/style.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/jstree.min.js"></script>
<div id="using_json"></div>
</body>
</html>
Check out this answer also.
Alternative with refresh
Since OP needs to keep the initial code structure (init -> change config data -> refresh) an alternative solution would be to "force" selection by using the callback of the refresh event:
$('#using_json').jstree({
'core': {
data: [{
text: 'Previous root node',
}]
}
});
const newData = [{
text: 'New root node (Initially opened)',
state: {
opened: true, //'opened' takes effect after refresh
selected: true
},
children: [{
text: 'Child 1 (Initially disabled)',
id: 'c1',
state: {
disabled: true, //'disabled' takes effect after refresh
}
}, {
text: 'Child 2 (Intended to be selected initially but failing)',
id: 'c2',
state: {
selected: true //'selected' does NOT take effect after refresh
}
}]
}];
$('#using_json').jstree().settings.core.data = newData;
//$('#using_json').jstree(true).settings.select_node = 'c2';
$('#using_json').jstree(true).refresh(true);
$('#using_json').on("refresh.jstree", function(e) {
$('#using_json').jstree('select_node', 'c2');
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/themes/default/style.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/jstree.min.js"></script>
<div id="using_json"></div>
</body>
</html>
I'm trying to copy the text contents of a cell - I don't need to be able to paste into Excel or anything, I just want the plaintext content. Highlighting text, right clicking, and selecting copy works as expected (so not the same problem as in SlickGrid and Text Selection since I can select text) but highlighting and pressing ctrl+c does not (nothing gets copied to the clipboard).
I tried commenting out the keypress-handling code in slick.grid.js ($canvas.on("keydown", handleKeyDown) and $focusSink.add($focusSink2).on("keydown"), handleKeyDown)) but no change.
Chrome 61 on Windows 10, if it matters.
Reproduce with the Basic use with configuration example, with enableTextSelectionOnCells set to true:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<title>SlickGrid example 1: Basic grid</title>
<link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
<link rel="stylesheet" href="examples.css" type="text/css"/>
</head>
<body>
<div id="myGrid" style="width:600px;height:500px;"></div>
<script src="../lib/jquery-1.11.2.min.js"></script>
<script src="../lib/jquery.event.drag-2.3.0.js"></script>
<script src="../slick.core.js"></script>
<script src="../slick.grid.js"></script>
<script>
var grid;
var columns = [
{id: "title", name: "Title", field: "title"},
{id: "duration", name: "Duration", field: "duration"},
{id: "%", name: "% Complete", field: "percentComplete"},
{id: "start", name: "Start", field: "start"},
{id: "finish", name: "Finish", field: "finish"},
{id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
];
var options = {
enableCellNavigation: true,
enableTextSelectionOnCells: true,
enableColumnReorder: false
};
$(function () {
var data = [];
for (var i = 0; i < 500; i++) {
data[i] = {
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
}
grid = new Slick.Grid("#myGrid", data, columns, options);
})
</script>
</body>
</html>
I was able to get Copy to Clipboard to work using this example:
https://6pac.github.io/SlickGrid/examples/example-excel-compatible-spreadsheet.html
I don't care for paste or much of the other Excel functionality, so I set readOnlyMode on like this:
grid.registerPlugin(new Slick.CellExternalCopyManager({
readOnlyMode : true,
includeHeaderWhenCopying : false,
}));