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/
Related
I am working on a webpage which has a tabstrip depending on number of people in a deal. As it can be 1 for one deal and 3 for another, I have created the drop down items dynamically using a loop index.
<tr>
<td align="right">
<spring:messagecode="label.borrower.employer.status" />:
</td>
<td align="right">
<kendo:dropDownList name="employmentStatus${requestScope.loopIndex}"
dataTextField="text" dataValueField="value" style="width: 100%;"
select="employmentStatusOnClick(${requestScope.loopIndex})"
change="updateEmploymentInfo">
<kendo:dataSource data="${borrowerEmploymentStatus}"></kendo:dataSource>
</kendo:dropDownList>
</td>
I am able to see the drop down lists according to the number of people in a deal. However, this jsp is included in another main jsp and the "change" and "select" functions are in that main jsp. When a value is selected on a drop down, I want to capture it and then perform some operations.
<script>
function employmentStatusOnClick(index) {
console.log(exp.loopCounter);
console.log("counter: "+index);
var employmentStatusVal = $("#employmentStatus"+index).data(
"kendoDropDownList").text();
console.log(employmentStatusVal);
}
</script>
For output, I can see that the value of index is coming correctly. However, even before the page is fully loaded, i get the error that "TypeError: Cannot read property 'text' of undefined"
Things I have Tried So far:
1) Tried to add the script inside ready() function, but it then gives me an error that employmentStatusOnClick is not defined
2) Tried different variations of concatenating the index value with the base name of the drop down list
3) Tried passing the value into a variable and then putting it into the .text() function
4) Latest, I have even tried hardcoding the value of index as 0 to see if it works for the first case, but i still get the undefined error.
I suspect that it has to do something with the loading of the elements. For some reason, it is trying to run this code, even before the element name has been generated. I discussed with a friend and he suggested me to remove the select events and just use the change event instead. Tried that..no effect.
Now, I am planning to remove kendo drop-downs and just use javascript dropdowns as a last resort. Can you please suggest what could be the problem?
Update - HTML Code of the div from Browser:
<div id="tab-employment">
<table>
<tbody><tr>
<td>
<table border="1">
<tbody><tr>
<th>Employer Name</th>
<th>Occupation</th>
<th>Employment Status</th>
<th>Hiring Date</th>
</tr>
<tr align="center">
<td>Roagres</td>
<td>Assistant</td>
<td>Current</td>
<td>2018-03-12 11:59:06.0</td>
</tr>
</tbody></table>
</td>
<td style="width: 1%"></td>
<td>
<table style="display: inline-block;">
<tbody><tr>
<td align="right">Employment Status:</td>
<td align="right"><input name="employmentStatus0" style="width: 100%;" id="employmentStatus0"><script>jQuery(function(){jQuery("#employmentStatus0").kendoDropDownList({"dataTextField":"text","dataValueField":"value","change":employmentStatusOnClick(0),"dataSource":{"data":[{"text":"--Select--","value":"--Select--"},{"text":"Employed","value":"Employed"},{"text":"Self-Employed","value":"Self-Employed"},{"text":"Retired","value":"Retired"},{"text":"Seasonal","value":"Seasonal"},{"text":"Student","value":"Student"},{"text":"Unemployed","value":"Unemployed"},{"text":"TEST","value":"TEST"}]}});})</script></td>
</tr>
<tr>
<td align="right">Industry Sector:</td>
<td align="right"><input name="industryStatus" style="width: 100%;" id="industryStatus"><script>jQuery(function(){jQuery("#industryStatus").kendoDropDownList({"dataTextField":"text","dataValueField":"value","change":industryStatusOnClick,"value":"1","dataSource":{"data":[{"text":"--Select--","value":"8443"},{"text":"Agriculture/Fishing/Forestry/Mining","value":"8444"},{"text":"Food/Foodservice/Hospitality","value":"8445"},{"text":"Arts/Entertainment/Recreation/Sports","value":"8446"},{"text":"Insurance, Accounting and Banking","value":"8447"},{"text":"Design/Creative","value":"8448"},{"text":"Construction & Skilled Trades","value":"8449"},{"text":"Education and Training","value":"8450"},{"text":"Government/Public Administration","value":"8451"},{"text":"Engineering/Architecture","value":"8452"},{"text":"Manufacturing/Production/Operation","value":"8453"},{"text":"Medical and Healthcare","value":"8454"},{"text":"Media/Telecommunication/Communication","value":"8455"},{"text":"Religion","value":"8456"},{"text":"Legal Services","value":"8457"},{"text":"Emergency and Protection","value":"8458"},{"text":"Real Estate","value":"8459"},{"text":"Professional, Scientific, and Technical Services","value":"8460"},{"text":"Information Technology","value":"8461"},{"text":"Transportation and Utilities","value":"8462"},{"text":"Sales/Marketing/Retail","value":"8463"}]}});})</script></td>
</tr>
<tr>
<td align="right">Express Occupation:</td>
<td align="right"><input name="expressOccupation" style="width: 100%;" id="expressOccupation"><script>jQuery(function(){jQuery("#expressOccupation").kendoDropDownList({"dataTextField":"text","dataValueField":"value","change":expressOccupationOnClick,"value":"1"});})</script></td>
</tr>
<tr>
<td align="right">Other - Specify:</td>
<td align="right"><input type="text" id="otherSpecify" name="otherSpecify" disabled="disabled" class="k-textbox" style="width: 100%;"></td>
</tr>
<tr>
<td colspan="2">
<div id="empStatusMsg" style="margin: 0 0 0 0; color: red; width: 300px; float: right;"></div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
So guys, finally I was able to figure this out. Seems like the issue was with the kendo tag libraries or atleast my implementation of them. Before the page was even loaded, the change event was being fired up.
Therefore, I removed the change event from the kendo tag definition and rather used the jquery on change event nested inside document.ready(). After this it started working fine.
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.
Chrome 18.0.1025.162m
Struts 1.x
Here's the basic structure of the divs I'm creating using js/mootools:
<div class="track">
<table>
<tr>
<td style="white-space:nowrap; width:1%;">
<td style="white-space:nowrap; width:1%;">
<td>
</tr>
</table>
<div>
<table>
<tr>
<td style="width:50%;">
<fieldset style="height: 244px; ">
<legend></legend>
<table>
<tr>
<td>
<img>
</td>
<td>
<table>
<tr>
<td class="label"></td>
<td class="comparable"></td>
</tr>
<tr>
<td class="label"></td>
<td class="comparable"></td>
</tr>
... 8 more of same
</table>
</td>
</tr>
</table>
<table>
<tr>
<td style="text-align: center; ">
<button type="button"></button>
</td>
</tr>
</table>
</fieldset>
</td>
<td>
...essentially same as prior td
</td>
</tr>
</table>
</div>
</div>
relevant css:
div.track {
outline:solid thin;
margin-bottom:10px;
background-color:#DCEDEA;
}
td.label {
text-align:right;
white-space:nowrap;
}
'comparable' is just a flag so I can find and possible restyle them later.
These structures are created in the onreadystatechange function from a single JSON response. 100+ of these are being created but I don't see anything until they're all ready and then they all appear at once. I would expect (and prefer so the user sees progress) each div to display as soon as it's ready and added (using mootools Element.inject) to the DOM. If I step through using Chrome's dev tools I see the expected behavior of the div displaying immediately after the inject.
I'm fairly new to web development, so if you feel the need to critique my methods I'm open to hearing your thoughts, but I'd really like an explanation for the behavior I'm seeing.
Thanks.
edit
Basic idea of page html:
<body>
<div id='foo'></ div>
</body>
Basic idea of js (within onreadystatechange):
var jsonObj = JSON.decode(req.responseText);
for (var i = 0; i < jsonObj.objects.length; ++i) {
getStructure(jsonObj.objects[i]).inject('foo'); //getStructure builds the div above and returns the div element
}
I suspect that the DIVs are being displayed one at a time, but they're all being displayed so quickly that it looks like it's happening all at once. Add console.log(i); into that for loop and watch your console while the DIVs are loading. You can bring up the console with Ctrl+Shift+J using Google Chrome, or by installing the Firebug extension under Firefox.
EDIT:
In that case, I'd guess it has something to do with the display loop in your browser. Probably something like (in very rough pseudocode):
while (1) {
executeJavascript(); // blocks until all javascript is executed, including your loop
displayPage();
}
You may therefore find this discussion useful: How can I force the browser to redraw while my script is doing some heavy processing?
Here is HTML markup of 2 rows from my huge table (which generated by PHP and applied Datatables after that)
<tr url="?page=item&id=850">
<td class="item_id"><input type="checkbox" name="checkbox[]" method="post" value="850" class="checkbox"/> 850</td>
<td> 9007</td>
<td style="text-align:center">BK</td>
<td style="text-align:center">41</td>
<td style="text-align:center" id="qt">1</td>
<td style="text-align:center">7</td>
<td style="text-align:center">11</td>
<td>09.02.2012</td>
</tr>
And here is second row
<tr url="?page=item&id=587">
<td class="item_id"><input type="checkbox" name="checkbox[]" method="post" value="587" class="checkbox"/> 587</td>
<td> 779-59</td>
<td style="text-align:center">BR</td>
<td style="text-align:center">37</td>
<td style="text-align:center" id="qt">2</td>
<td style="text-align:center">15</td>
<td style="text-align:center">14</td>
<td>08.02.2012</td>
</tr>
Function below works for 90% rows. I really have no idea why this script works for second row from examples but doesn't do anything for first row. These 2 rows are nearly same.
$("td").not('.item_id').click(function(){
window.open ($(this).closest("tr").attr("url"));
});
How do you think, what can cause this problem?
Instead use this which will attach click handler on tr and ignore if clicked on checkbox or its containing cell. Try this.
$("tr").click(function(){
window.open($(this).attr("url"));
});
$("td.item_id").click(function(e){
e.stopPropagation();
});
Alertnatively you can also use event.target to check if it is checkbox don't do any this.
$("tr").click(function(e){
if(!$(e.target).is(':checkbox') && !$(e.target).is('.item_id')){
window.open($(this).attr("url"));
}
});
I understand this piece:
$("td").not('.item_id').click(function(){
...
});
But could this piece be updated to perform better?
window.open ($(this).closest("tr").attr("url"));
Also, does the property url validate? You may want to use data attributes for a more predictable experience. Maybe this would work better:
<tr data-url="">
...
</tr>
with your window open even like this:
window.open( $(this).parent().attr("data-url") );
See this example: http://jsfiddle.net/Zuhrx/
its working HERE something else is wrong. Are you wrapping up the code in ready handler?
I'm trying to append the following table built up in a string to a div on my page using this:
var table =
'<table data-custom="3963770" id="table" cellpadding="3" cellspacing="5"
valign="top" width="995px" border="3" bordercolor="#83725B">
<th height="50" colspan="2">Company Name</th>
<th height="50" colspan="3">Esco Number</th>
<th height="50" colspan="1">Province</th>
<th height="50">Sector</th>
<th height="50">Technology</th>
<th height="50" colspan="2">Status</th>
<tr>
<td colspan="2">3H Envirostrategies cc</td>
<td colspan="3">11059420</td>
<td>Gauteng, KZN, Western Cape, Mpumalanga, Free State,
Eastern Cape</td>
<td>
<select id="mainSectors0">
<option>Commercial</option>
</select>
</td>
<td>
<select id="mainTechs0">
<option>Project Management</option>
</select>
</td>
<td colspan="2">Active</td>
</tr>
<tr>
<td style="border: none;" colspan="5">
<div data-custom="contact_info" style="display:inline;"><u>Contact information</u></div>
</td>
</tr>
<tbody data-custom="place_holder">
</tbody>
</table>';
I have a div tag with:
<div id="table"></div>
I then try to use this to add the table to the div:
$(table).appendTo($('#table'));
// I've tried $("#table").append(table); but no luck.
It works fine in every other browser except IE 6+. Does anybody know of a workaround, or if i'm doing something wrong?
Thanks in advance.
Your code works for me, also on IE : http://jsfiddle.net/doktormolle/N5z5T/
Are you sure that you use the var-keyword before table = '<table>....</table';
If not, this may break IE, see this related topic: jQuery selector does not work in IE7/8
Your HTML in table variable is invalid. Try to make $('#table').append('<div>a</div>');. It works in IE. Make your HTAMl valid.
Try this:
$('#table').html(table);
It uses jQuery's html function, which makes a bit more sense in this circumstance than append. Not sure why append isn't working though
you don't need to make div as a jquery object when you are using appentTo. try fallowing
$(table).appendTo('#table');
or
$('#table').append(table)
Could it be that you have multiple elements with the same id "table"?