I am using two wonderful jQuery plugins for a project:
this date/time picker: https://github.com/xdan/datetimepicker
this HTML table editor: https://github.com/mindmup/editable-table
They work separately very well but unfortunately they are not compatible for each other. When I want to update a date in a HTML table, the calendar appears and closes when I click on the date/time, but the value in the table's cell is not updated (and Chrome's javascript console does not report any error message). Would you know a solution or a workaround for that ? You can quickly test it by yourself with the code below:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en' dir='ltr'>
<head>
<title>Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='http://mindmup.github.io/editable-table/mindmup-editabletable.js'></script>
<link href='http://xdsoft.net/scripts/jquery.datetimepicker.css' rel='stylesheet' type='text/css' />
<script src='http://xdsoft.net/scripts/jquery.datetimepicker.js'></script>
<script>
$(function() {
$('table').editableTableWidget();
$('.picker').datetimepicker({ format:'Y-m-d H:i' });
});
</script>
</head>
<body>
<p>The date/time picker works perfectly:</p>
<input class='picker' />
</br></br>
<p>But not in the table below:</p>
<table style='border:1px solid black'>
<tr><td class='picker'>2014-08-22 15:00</td></tr>
<tr><td>However no problem for text, i.e. just here!</td></tr>
</table>
</body>
</html>
It would be awesome that these two plugins could work together. Thanks!
Pierre
I found your question when I was looking for something that would do what you were looking to do. I didn't find it, so modified the mindmup solution, expanding it to include a couple of different editing methods. The ones I ended up with are:
Regular text.
Date, using bootstrap-datepicker.
Value text, which is something specific for my application, where the user can enter a whole number with or without commas and have them displayed with commas.
Numbers, being whole numbers using the <input type="number"> element.
Selects. These are a bit more tricky, but essentially you provide a javascript associative array, and the code uses the data-edit-source attribute to find the array.
There is an example on the git repository. I'd put the code in here, but I'm lazy, and don't want to explain it. Sorry about that. If you download the code, there is a demo in the index.html file.
The table looks like this:
<table id="secondDemo" class="table table-striped">
<thead><tr>
<th>Location</th>
<th>Expires</th>
<th>Count</th>
<th>Value</th>
</tr></thead>
<tbody>
<tr>
<td data-edit-type="select" data-edit-source="locations">Adelaide</td>
<td data-edit-type="date">24-Jan-2015</td>
<td data-edit-type="ntext">8</td>
<td data-edit-type="vtext">5,000</td>
</tr>
<tr>
<td data-edit-type="select" data-edit-source="locations">Brisbane</td>
<td data-edit-type="date">25-Jan-2015</td>
<td data-edit-type="ntext">8</td>
<td data-edit-type="vtext">15,000</td>
</tr>
<tr>
<td data-edit-type="select" data-edit-source="locations">Melbourne</td>
<td data-edit-type="date">26-Jan-2015</td>
<td data-edit-type="ntext">9</td>
<td data-edit-type="vtext">8,000</td>
</tr>
<tr>
<td data-edit-type="select" data-edit-source="locations">Sydney</td>
<td data-edit-type="date">27-Jan-2015</td>
<td data-edit-type="ntext">6</td>
<td data-edit-type="vtext">9,000</td>
</tr>
</tbody>
</table>
... and the required javascript looks like this:
var locations = {
'Adelaide': 'Adelaide - South Australia',
'Brisbane': 'Brisbane - Queensland',
'Canberra': 'Canberra - Australian Capital Territory',
'Darwin': 'Darwin - Northern Territory',
'Hobart': 'Hobart - Tasmania',
'Melbourne': 'Melbourne - Victoria',
'Perth': 'Perth - Western Australia',
'Sydney': 'Sydney - New South Wales'
};
$('#secondDemo').editableTableWidget();
Hope this helps.
The editable table widget creates new <input/>'s that are hidden and appear whenever a user clicks on the field. In order for datetimepicker to work on those fields, you have to tell editable table to add the picker class to the inputs:
$(function() {
$('table').editableTableWidget({editor: $('<input class="picker"/>')});
$('.picker').datetimepicker({ format:'Y-m-d H:i' });
});
DEMO Here
Edit: I just realized that this won't work in the way you want. Looking at the code, editable table only creates 1 hidden input box that it uses for all table cells. Thus, this will only work if you want all of your table cells to be datepickers.
As kind of workaround I just adjusted your Fiddle like that: Fiddle
with following changes:
$(function () {
$('table').editableTableWidget();
$('.picker').datetimepicker({
format: 'Y-m-d H:i'
});
$('.pickertwo').datetimepicker({
format: 'Y-m-d H:i'
});
$(".pickertwo").on("change", function () {
var textVal = $(this).val();
$(".textpick").text(textVal);
});
$(".pickTwo").on("click", function () {
$(".pickertwo").focus();
})
});
Markup changes:
<input class='picker' />
<table style='border:1px solid black' class="pickTwo">
<tr>
<td class='textpick'></td>
</tr>
<tr>
<td>However no problem for text, i.e. just here!</td>
</tr>
</table>
<input class='pickertwo' />
Problem is to hide the 2nd datepicker - setting display: none; or visibility: hidden; will disable the functionality. Maybe it's possible that you set a low z-index value for the 2nd input and hide it behind an image that matches the page where you would implement it and set a higher z-index for this image.
Related
I regularly use a website with a lot of textarea boxes, but the stupid thing is that they aren't expandable and thus adding a lot of text to them (which I do frequently) feels quite cramped and is more difficult than I would like it to be. I would like to make a greasemonkey script/UserScript or some sort of javascript I can paste in the Chrome Console to change this part of the HTML/CSS:
resize: none
To:
resize: true
This makes the textarea box have the little gripper at the bottom and solves the problem
A few things to note are 1. this website seems to be dynamically generated from some sort of CMS and 2. I don't have the ability to change any content on this CMS. Also, I'm sure there is a better way to ask this question..
Another thing is that all I want is for the textarea to always be big enough to house all of the text, so if there is a way to automatically expand to the text, that'd be great. Also, it'd be great to have the textarea gripper on the stackoverflow new post text box!
Full example code is below where you will find 'resize: none'
Many thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<tr>
<td valign="top" class="content_tab_bg_padding" align="left">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td class="height2"></td>
</tr>
<tr>
<td class="form_label_text" align="left" valign="top">Gotta change this text box to be permanently expandable. Ideally automatically expandable.
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%" style="padding-top: 2px;">
<textarea
name="ctl00$ContentPlaceHolderPageContents$ctl00$ctl00$TextArea_CustomDocumentNoteGenerals_PersonPresent"
id="ctl00_ContentPlaceHolderPageContents_ctl00_ctl00_TextArea_CustomDocumentNoteGenerals_PersonPresent"
class="form_textareaWithoutWidth element" rows="4" style="width: 95%; resize: none;"
spellcheck="True" data-preventexpand="PreventExpand" tabindex="0"></textarea>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</body>
</html>
Here is an example based on your post:
const textarea = document.querySelector('#ctl00_ContentPlaceHolderPageContents_ctl00_ctl00_TextArea_CustomDocumentNoteGenerals_PersonPresent');
if (textarea) { // check if found
textarea.style.resize = 'both';
}
Update on comment
For more than one textarea on the page
document.querySelectorAll('textarea').forEach(item => item.style.resize = 'both');
This is the JavaScript portion that I have that should make the table's rows that I have drag and droppable (aka movable). This doesn't work for some reason.
<script type="text/javascript">
jQuery(function(){ jQuery("#sortable93032188").sortable({ items: "tr:.sortable" }); })
</script>
Here's the table info:
<table id="sortable93032188" cellpadding="5" cellspacing="0" border="0" width="0" leftmargin="50">
<thead>
<tr>
<td colspan="1" class="vdarkbluebw" valign="centre">
<font>Field Order - Drag fields up or down as required to preferred order</font>
</td>
</tr>
<tr bgcolor="#eeeee8" class="sortable" id="11874272">
<td id="68937878">
<span class="small">Sample Origin Name<input type="hidden" name="new_field_order" value="Sample Origin Name"></span>
</td>
</tr>
... This table keeps going (it's decently sized).
Now the thing is that I've googled around on drag/drop tables -- and I can't seem to find what's wrong with this. I have very little jQuery/HTML/JavaScript experience and am stumped at this point. What am I doing wrong?
You need to take out the semicolon in your jQuery after the tr.
jQuery(function(){ jQuery("#sortable93032188").sortable({ items: "tr.sortable" }); })
It should work then. Heres a demo: http://jsfiddle.net/7kZY4/
I created a table contain the colspan and rowspan. Then I would like to get or read these colspan and rowspan value. I'm doing this because I want to use it for xml generation. I need this value. I play around with this code to test:
<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
document.getElementById("myHeader1").colSpan="2";
}
function displayColSpan()
{
var te;
document.getElementById("myHeader1").colSpan=te;
alert(te);
}
</script>
</head>
<body>
<table border="1">
<tr>
<th id="myHeader1">Month</th>
<th id="myHeader2">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100.00</td>
</tr>
<tr>
<td>February</td>
<td>$10.00</td>
</tr>
<tr>
<td>March</td>
<td>$80.00</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">Change colSpan for the first cell</button>
<button type="button" onclick="displayColSpan()">test</button>
</body>
</html>
Could you help me? Thanks!
There's a bit of confusion with your code.
This:
document.getElementById("myHeader1").colSpan=te;
Changes the colspan value of myHeader1 to var te, which is undefined. Instead you should do:
te = document.getElementById("myHeader1").colSpan
now te is the colspan value of myHeader1.
If you want to get the value, that is 'month':
te = document.getElementById("myHeader1").innerHTML
Now te has the value of 'month'!
Hope this helps!
The code you're using was copied from this site: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_th_colspan Isn't it?
Good, then you must have noticed that what they are doing there? They are simply changing the properties of the columns and their span, what we can say in css might be padding.
You want to get the value of the span? I never tried javascript for this, I have always used CSS.
But still, go through this page: Calculate and set colspan value dynamically
He showed a well developed code, you can also try out getting the values from element such as:
var val=document.getElementById("idofel").style.backgroundColor;
To get the background-color, you can try such other values for this table too. Obviously not background-color, but the necessary ones. And then write them in XML!
As far as I know, value is being used as HTML input attribute.
<form action="form_action.asp" method="get">
<input type="submit" value="Submit form" />
</form>
However, I was wondering, is it a correct practice, that I can use it in other HTML attributes, to act as hidden value?
For example, for each table row, I would like to tag it with a unique ID, as the unique ID in SQL database. However, at the same time, I would also like to hide the unique ID from end users.
Here is the technique I have been using.
<html>
<head>
<title>
XXX
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.delete-button').click(function() {
var clicked = $(this);
alert(clicked.parent('tr').attr('value'));
});
});
</script>
</head>
<body>
<table style="border-style:none">
<tbody>
<tr>
<th>Server Name</th>
<th>IP Address</th>
</tr>
<tr style="border-style:none" value="ROW ID 1">
<td class="edit">Yahoo Server</td>
<td class="edit">196.168.0.1</td>
<td class = "delete-button" style="border-style:none">DELETE</td>
</tr>
<tr style="border-style:none" value="ROW ID 2">
<td class="edit">Google Server</td>
<td class="edit">196.168.0.2</td>
<td class = "delete-button" style="border-style:none">DELETE</td>
</tr>
</tbody>
</table>
</body>
</html>
Since I didn't do HTML and JavaScript quite often, I was wondering, whether the above is a correct and common used technique?
With strict HTML4/XHTML, you should not create arbitrary attributes on tags. You can, but it is invalid for the schema.
With HTML5, the best practice is to use data- attributes.
eg.
<tr style="border-style:none" data-rowid="ROW ID 1">
<td class="edit">Yahoo Server</td>
<td class="edit">196.168.0.1</td>
<td class="delete-button" style="border-style:none">DELETE</td>
</tr>
Instead of using values, I'd recommend to use attributes. JQuery supports attributes and it's a pretty common practice.
http://api.jquery.com/attr/
On initialization you can set all the attributes, then you can have your own custom attribute to read the values you previous set (which can then map to a dictionary or something along those lines).
Does that help?
No. In this case value is a form component.
You would just use id="ROW ID 2" or whatever your value is -
alert(clicked.parent('tr').attr('id'));
Also, this html is pretty archaic. Just my opinion and not to be taken as a snide remark, but a good review of html5 and css3 would be beneficial.
ya sure... you can use... you can even have your own custom attribute to carry your data which will never be shown to end user except in the source view.. sample is as follows:
<tr style="border-style:none" mydata="ROW ID 2"> and it can be accessed as ('tr').attr('mydata')
Yep, you can use whichever attribute name you want
<tr style="border-style:none" rowid="1">
Then in jQuery you would access it by:
$('tr[rowid=1]');
or if you have a row and want to know it's id:
var rowid = $(this).attr('rowid');
Hi i have a question regarding html and javascript.
Say that i click on a link on a html site say
<tr>
<td>www.hello1.com</td>
</tr>
then I also want to see if there are any other related link on that site with a narrow name, for example
<tr>
<td>www.hello2.com</td>
</tr>
So what I want to do is construct a javascript method that everytime you click on a link
you run this method and check what link that has been pressed, and then also search the entire html site for a similar link (here its very simple, the site only consist of a table containing links, so there will not be so much to search trough).
How is this done?
I only need the method, I know how to run the method everytime you press a link :)
Thanks in advance :)
Edit
With "similar" i mean something like this
'\\b'+theUrlToGoTo+'\\b'
In other words the only thing that will change is a number after the name for example
hello1 and hello2
Edit 2
Thanks to nemophrost I now know how to do the first one. I now have a second question, before Im done, thats regarding generating html code with javascript.
Now say that I have an array after I have run the everyClickFunc() func that includes
var myArray = [ 'www.hello1.com', 'www.hello2.com', 'www.hello3.com'];
I would now like to generate a simple html page like this
<html>
<head>
</head>
<body>
<table>
<tr>
<td>www.hello1.com</td>
</tr>
<tr>
<td>www.hello2.com</td>
</tr>
<tr>
<td>www.hello3.com</td>
</tr>
</table>
</html>
And this file is to be overwritten each time I click on a link. So the links will be diffrent depending on what links i click on, on the original site.
In other words I want something like this
<html>
<head>
</head>
<body>
<table>
<tr>
<td>www.testing1.com</td>
</tr>
<tr>
<td>www.hello1.com</td>
</tr>
<tr>
<td>www.testing2.com</td>
</tr>
<tr>
<td>www.hello2.com</td>
</tr>
<tr>
<td>www.hello3.com</td>
</tr>
<tr>
<td>www.diffrent1.com</td>
</tr>
<tr>
<td>www.diffrent2.com</td>
</tr>
</table>
</html>
To generate a new html site that contains the following information if you click on any of the above "hello" links
<html>
<head>
</head>
<body>
<table>
<tr>
<td>www.hello1.com</td>
</tr>
<tr>
<td>www.hello2.com</td>
</tr>
<tr>
<td>www.hello3.com</td>
</tr>
</table>
</html>
How is this easiest solved?
Again thanks you so much in advance :)
With jQuery you could do something like this:
function everyClickFunc(urlToMatch) { // pass in something like 'www.hello1.com'
var baseURLMatch = urlToMatch.match(/^www\.(.+\D)\d*\.com$/);
if (baseURLMatch && baseURLMatch.length > 1) {
var matchExp = new RegExp('^www\\.' + baseURLMatch[1] + '\\d*\\.com$');
$('a').each(function() {
if ($(this).attr('href').match(matchExp)) {
doSomethingBecauseYouGotAMatch(); // Call your successful match function
}
});
}
}