I'm trying to import the table-dragger to my front-end, but I get the error-message, that tableDragger is not a function. I tried to go with the tutorial and initialized the table-dragger like this
<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>
<script type="text/javascript">
var el = document.getElementById("table");
var dragger = tableDragger(el, {
dragHandler: ".handle"
});
</script>
With this, the error-message occurs. Anyone had the same problem or has an idea on how to fix this?
After going through table-dragger plugins I found that tableDragger is an object instead of a function. You cannot directly get its instance, instead there is a property "default" which actually create instances.
If you are using node then may be "table-dragger.min.js" path is incorrect. The path should be "node_modules/table-dragger/dist/table-dragger.js"
Kindly find below code for reference.
var el = document.getElementById('table');
var dragger = tableDragger.default(el, {
dragHandler: ".handle"
})
dragger.on('drop',function(from, to){
console.log(from);
console.log(to);
});
<script src="https://cdn.jsdelivr.net/npm/table-dragger#1.0.3/dist/table-dragger.js"></script>
<body>
<table id="table">
<thead>
<tr>
<th class='handle'>header1<i class="handle"></i></th>
<th class='handle'>header2</th>
</tr>
</thead>
<tbody>
<tr>
<td>conten1</td>
<td>conten2</td>
</tr>
<tr>
<td>conten3</td>
<td>conten4</td>
</tr>
</tbody>
</table>
</body>
Good Day :)
Related
I need some help to dynamically load data in a template as a file change. Below is a sample of the data and code
I have a json file:
data = '[{"name" : "bob", "value" : "3.1"}, {"name" : "joe", "value" : "5.6"}]';
The value in this file change regularly (every 2-3 sec)
I have an HTML file
<head>
<script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<table>
<tr>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
</tr>
</table>
<body>
<script type="text/javascript">
document.body.innerHTML = markup;
</script>
And javascript.js is:
var mydata = JSON.parse(data);
const markup = `
<table>
<tr>
<td>${mydata[0].name}</td>
<td>${mydata[0].value}</td>
</tr>
<tr>
<td>${mydata[1].name}</td>
<td>${mydata[1].value}</td>
</tr>
</table>
`;
So the first question is: how can I get the data dynamically loading in the template as the value change? jQuery? node.js? I need the most simple solution as I am not a newbie.
And secondly, the html code is a bit more complex in reality, but is there a relatively simple way to loop through the data rather than me having to write everything manually? like introducing a "foreach d in data" ?
Thanks for your help, much appreciated!
1.Nodejs[Expressjs] [ server side ]
2.Fetch() and setInterval()[ client side ]
Assuming you have set up the the functions/code regarding the values changing in the initial json file.
What you can do is use nodejs and expressjs on the server side to send the data(maybe json format?) when pinged, and on the client side what you can do is create a function in js(maybe using fetch()) to ping that nodejs server every 'x' second's using setInterval() and retrieve the data parse it if it's json and change the data in table's.
Regarding the data in the tables, someone has already posted a solution for it.
Hope it helps!
I hope I've been helpful
HTML:
<table id="myTable">
</table>
Javascript:
var x = document.getElementById("myTable");
setInterval(function(){
// Here you get the file in the way that is most convenient for you
// More info here: https://www.w3schools.com/js/js_json_parse.asp
var data = '[{"name" : "bob", "value" : "3.1"}, {"name" : "joe", "value" : "5.6"}]';
var obj = JSON.parse(data);
// Clear the table
x.innerHTML = '';
// Adds new values
for (var key in obj[0]) {
if (obj[0].hasOwnProperty(key)) {
x.innerHTML += '<tr><td>'+key+'</td><td>'+obj[0][key]+'</td></tr>'
}
}
}, 1000);
so first of all im kinda new to javascript and i cant make my script work when i put it on my site but it works in fiddle(because onload) i have the script in seperate file so here is how i have it now
script.js
var start = $('#calcstart'),
end = $('#calcend'),
brk = $('#calcbreak'),
total = $('#calcadded'),
timespan;
$('input').keyup(function () {
var e = toMins(end.val()),
s = toMins(start.val()),
b = toMins(brk.val());
if (!s || !e)
return;
var output = (e - s - b) / 60;
total.html(Math.floor(output) + ':' + toDouble(Math.round((output % 1) * 60)));
});
function toMins(val) {
if (!val)
return 0;
val = val.split(':');
return (Number(val[0]) * 60) + Number(val[1] || 0);
}
function toDouble(n) {
return n < 10 ? ('0' + n) : n;
}
livecalc.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Start:</td>
<td><input id="calcstart" placeholder="hh:mm"></td>
</tr>
<tr>
<td>end:</td>
<td><input id="calcend" placeholder="hh:mm"></td>
</tr>
<tr>
<td>break:</td>
<td><input id="calcbreak" placeholder="hh:mm"></td>
</tr>
<tr>
<td>Total:</td>
<td><span id="calcadded"></span></td>
</tr>
</table>
https://jsfiddle.net/frilleee/3brha920/1/
so the question is how do i make this script work? how do i put it onload? or what should i do?
Edit1 Okey i dont know how but it started work now dident change anything :S i have tested it for 2 days with the same code and not working :S
Use script tag like this
<script src="script.js"></script>
In your HTML. Save your script as 'script.js' and put script tag at the end inside body tag.
Like this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
<tr><td>Start:</td><td><input id="calcstart" placeholder="hh:mm"></td></tr>
<tr><td>slut:</td><td><input id="calcend" placeholder="hh:mm"></td></tr>
<tr><td>rast:</td><td><input id="calcbreak" placeholder="hh:mm"></td></tr>
<tr><td>Total:</td><td><span id="calcadded"></span></td></tr>
</table>
<script src="script.js"></script>
Or
Put your whole script code inside script tag.
<script>
// Your script here.
</script>
For jQuery, you need to wrap your codes inside
$(document).ready(function(){
// js and jquery codes in here
});
Read: https://learn.jquery.com/using-jquery-core/document-ready/
Also, do you include your script.js file inside your HTML?
Check the Developer Tool > Console to find any other error related to javascript.
I've been working with 2 different versions of jQuery on one page and am trying to utilitze the 'noConflict.'
If I establish a variable for each of the jQuery versions, (examples: $a and $b), would I replace all of the $'s with '$a' and '$b?'
for example (a snippet of the full code [which appears at the bottom]).. wasn't sure where to put the $b's.
<script>
$b(document).ready(function() {
function clone(){
var $cloned = $('table tr:last').clone();
var oldIndex = $cloned.find('input').attr('name').match(/\d+/);
var newIndex = parseInt(oldIndex,10)+1;
$cloned.find('input').each(function(){
var newName = $(this).attr('name').replace(oldIndex, newIndex);
$(this).attr('name', newName);
});
$cloned.insertAfter('table tr:last');
}
$('p.add-btn').click(clone)
;
</script>
Below, is the HTML form code, along with the jQuery clone function, along with the date picker functions. Currently, when I enable one, the other function does not work. Thanks for any leads.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>var $a = jQuery.noConflict(true); //sets up 1st version of jquery to run for Zebra datepicker</script>
<script type="text/javascript" src="zebra_datepicker/js/zebra_datepicker.js"></script>
<link rel="stylesheet" href="zebra_datepicker/css/default.css" type="text/css">
<script>
$a(document).ready(function() {
$a('#SubmissionDate').Zebra_DatePicker({
view: 'years',
readonly_element: true
});
$a('#ClassYear').Zebra_DatePicker({
view: 'years',
format: 'Y',
readonly_element: true
});
});
</script>
<script>
$b(document).ready(function() {
function clone(){
var $cloned = $('table tr:last').clone();
var oldIndex = $cloned.find('input').attr('name').match(/\d+/);
var newIndex = parseInt(oldIndex,10)+1;
$cloned.find('input').each(function(){
var newName = $(this).attr('name').replace(oldIndex, newIndex);
$(this).attr('name', newName);
});
$cloned.insertAfter('table tr:last');
}
$('p.add-btn').click(clone)
;
</script>
<table id="FormLayout" cellspacing="3" cellpadding="3">
<tr>
<td class="FormLabel" width="100px"><strong>Class Year*</strong></td>
<td width="100px"><input type="text" id="ClassYear" name="ClassYear_1" class="required" value="<%= Request.form("ClassYear") %>" tabindex="4" /></td>
</tr>
<tr><td>
<button type="button" id="add-btn">Add Class Year</button>
</td></tr>
<tr>
<td colspan="4" align="center"><input type="hidden" name="FormSubmit" value="True" />
<input type="submit" value="Submit" tabindex="8" />
</td>
</tr>
</table>
If I establish a variable for each of the jQuery versions, (examples: $a and $b), would I replace all of the $'s with '$a' and '$b?'
Yes you have to, Starting to the line where you declare a variable pointing forward you can only invoke a jQuery function/methods using that variable declaration.
//Assume that by this time there is 'noConflict' declared variable you can still invoke a method of jquery using this.
$().
//But as you declared a 'noConflict' variable
var $a = jQuery.noConflict();
//$() would return undefined.
Please try this:
Include the original version.
Then include the version required by Zebra datepicker.
Just after, you don't need any conflict handling, just call your plugin by using $. To make sure console.log('$.fn.jquery');
After using your plugin you need to call oldV = jQuery.noConflict( true ); to restore globally scoped jQuery variables to the first version loaded. In the next code just use $ normally.
Hey guys am new to javascript development ..I have seen some come in javascript ..The code is
html code
<table>
<tr>
<td style="width:70px;height:70px;background-color:white;" class="white" onclick="place(this,2,1)"></td>
<td style="width:70px;height:70px;background-color:black;" class="black" onclick="someone(this,2,2)"></td>
</tr>
</table>
the js code
<script type="text/javascript">
function someone(domobject,number,column){
if(domobject.style.backgroundColor=="black"||domobject.style.backgroundColor=="white")
domobject.style.backgroundColor="red";
else if(domobject.style.backgroundColor=="red")
domobject.style.backgroundColor=domobject.className;
}
</script>
The thing is that
function someone(number,column){
if(this.style.backgroundColor=="black"||this.style.backgroundColor=="white")
this.style.backgroundColor="red";
else if(this.style.backgroundColor=="red")
this.style.backgroundColor=this.className;
}
when i write the code like this and call it with onclick="someone(2,2)..its doesnt work for me..why is it like that..Hope you guys can help me out ..Thanks in advance
this refers to the parent.
So:
var Bacon = function(){
this.tasty = true;
this.burnt = false;
};
var b = new Bacon();
console.log(b.tasty); //True
The best place to get your head around this is with this tutorial: http://ejohn.org/apps/learn/
my question is about a code combining HTML5 features ContentEditable and localStorage.
Here is my two JS function, one for storing the user edit in the table cell, another for getting the value and pass it to the table cell.
<script type="text/javascript">
function storeUserEdit(id) {
var pre_value = document.getElementById(id).innerHTML;
localStorage.setItem("userEdit",pre_value);
}
function applyUserEdit() {
if (localStorage.getItem("userEdit")){
var new_value = localStorage.getItem("userEdit");
}
document.getElementById('prjSch_row1_col1').innerHTML = localStorage.getItem("userEdit");
}
</script>
and here these two functions embedded in body content:
...
<td id="prjSch_row1_col1" contenteditable="true" onkeyup="storeUserEdit(this.id)" >
</td>
<script>applyUserEdit()</script>
...
I want to use this to many table cells in my HTML page and how I can replace prjSch_row1_col1 with id and pass it to function getUserEdit();
thanks a lot!
Are you trying to do something like this. because what you mention in the question is not enough to me to think about an answer. When do you need to fire applyUserEdit() function, on page load or ...
Please let me know enough details.
16/08/2013 >
Very sorry for the delay! Please find the below code which I tested in Firefox. Is this the behavior you want. Please don't test in fiddler. It's not working there, I don't know why.
`
<head>
<script type="text/javascript">
function storeUserEdit(id) {
var pre_value = document.getElementById(id).innerHTML;
localStorage.setItem("userEdit",pre_value);
localStorage.setItem('userEditControl', id);
}
function applyUserEdit(id) {
var new_value = '';
if (localStorage.getItem("userEdit")){
new_value = localStorage.getItem("userEdit");
}
if(localStorage.getItem('userEditControl') === id){
document.getElementById(id).innerHTML = localStorage.getItem("userEdit");
}
//this is just to check whether the code is working
document.getElementById('log').value = document.getElementById('log').value + '\n' + localStorage.getItem("userEdit");
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>User Name:</td>
<td id="uname" contenteditable="true" onkeyup="storeUserEdit(this.id)" onblur="applyUserEdit(this.id)">value...</td>
</tr>
<tr>
<td>Password:</td>
<td id="pword" contenteditable="true" onkeyup="storeUserEdit(this.id)" onblur="applyUserEdit(this.id)">value...</td>
</tr>
</table>
<textarea multiline="true" id="log"></textarea>
</body>
`
Please let me know if you have any issues...