jQueryUI Sortable | Drag elements among different parents

jQueryUI Sortable | Drag elements among different parents - jquery-ui

Is it actually possible?
Here is my simplified mockup. Green rows can have more than one cell and must be draggable/sortable. They can be dragged anywhere from top to bottom. Red cells always stay in place because they're dates.
Here is my code:
<table>
<tr>
<td>May 01</td>
<td>
<table>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>May 02</td>
<td>
<table>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>May 02</td>
<td>
<table>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
</td>
</tr>
</table>

JSFIDDLE
HTML
<table>
<tbody>
<tr>
<td>May 01</td>
<td class="mt3">
<table>
<tr>
<td>1 Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>May 02</td>
<td class="mt3">
<table>
<tr>
<td>2 Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>3 Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>May 02</td>
<td class="mt3">
<table>
<tr>
<td>4 Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>5 Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>6 Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
SCRIPT
$(function() {
$(".mt3 tbody").sortable({
connectWith: ".mt3 tbody",
start: function (event, ui) {
ui.item.toggleClass("highlight");
},
stop: function (event, ui) {
ui.item.toggleClass("highlight");
}
});
$("td").disableSelection();
});

Related

Formula to move/shift items in a 2d-table, so that they are in same rows of the matching 1d-table items?

I have a table Google Sheet with more than 100 rows and columns. Each column is alphabetically sorted, The key table/column contains all the unique items in the table (also sorted alphabetically). Each item in the table has a unique URL attached to it (col1 item A has a different URL from col2 item A).
Note: key table/column items have no URLs attached
I need to move these items to the matching key table item rows, while keeping their columns are unchanged. Is there a way to do this using a single Gsheet formula (or 2, a easier way). The changes don't need to be done on the table itself.
current and required table formats
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<h3>Current Table</h3>
<table>
<tr>
<th>Key</th>
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
<th>col 4</th>
<th>col N</th>
</tr>
<tr>
<td>
<B>A</B>
</td>
<td>A</td>
<td>A</td>
<td>B</td>
<td>A</td>
<td>C</td>
</tr>
<tr>
<td>
<B>B</B>
</td>
<td>B</td>
<td>D</td>
<td>E</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>
<B>C</B>
</td>
<td>C</td>
<td>E</td>
<td>G</td>
<td>G</td>
<td>F</td>
</tr>
<tr>
<td>
<B>D</B>
</td>
<td>D</td>
<td>G</td>
<td></td>
<td>H</td>
<td></td>
</tr>
<tr>
<td>
<B>E</B>
</td>
<td>F</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<B>F</B>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<B>G</B>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<B>H</B>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<h3>Required Table</h3>
<table>
<tr>
<th>Key</th>
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
<th>col 4</th>
<th>col N</th>
</tr>
<tr>
<td>
<B>A</B>
</td>
<td>A</td>
<td>A</td>
<td></td>
<td>A</td>
<td></td>
</tr>
<tr>
<td>
<B>B</B>
</td>
<td>B</td>
<td></td>
<td>B</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<B>C</B>
</td>
<td>C</td>
<td></td>
<td></td>
<td></td>
<td>C</td>
</tr>
<tr>
<td>
<B>D</B>
</td>
<td>D</td>
<td>D</td>
<td></td>
<td>D</td>
<td></td>
</tr>
<tr>
<td>
<B>E</B>
</td>
<td></td>
<td>E</td>
<td>E</td>
<td></td>
<td>E</td>
</tr>
<tr>
<td>
<B>F</B>
</td>
<td>F</td>
<td></td>
<td></td>
<td></td>
<td>F</td>
</tr>
<tr>
<td>
<B>G</B>
</td>
<td></td>
<td>G</td>
<td>G</td>
<td>G</td>
<td></td>
</tr>
<tr>
<td>
<B>H</B>
</td>
<td></td>
<td></td>
<td></td>
<td>H</td>
<td></td>
</tr>
</table>

According your snippet you can use following formula:
=ArrayFormula(IF(COUNTIF(B$2:B$9,$A13:$A20),$A13:$A20,""))

Here you go:
=ARRAYFORMULA(
IFNA(
VLOOKUP(
(ROW(H3:H10) - ROW(H3)) * COLUMNS(B3:F10) + (COLUMN(I3:M3) - COLUMN(I3)),
{
FLATTEN(
IF(
B3:F10 = "",
"",
(
VLOOKUP(
B3:F10,
{A3:A10, ROW(A3:A10)},
2,
0
)
- ROW(A3)
)
* COLUMNS(B3:F10)
+ COLUMN(B3:F10)
- COLUMN(B3)
)
),
FLATTEN(B3:F10)
},
2,
0
)
)
)

How to set the highchart and the table horizontally?

This is what my highchart looks like atm
I kinda want the chart to be on the right side while the table to be on the left
this is my html:
<div id="words" style="width:70%;float:left;">
<table border="1" class="highchart" data-graph-container-before="1" data-graph-type="column">
<thead>
<tr>
<th>Word</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>icon</td>
<td>12</td>
</tr>
<tr>
<td>text</td>
<td>12</td>
</tr>
<tr>
<td>your</td>
<td>9</td>
</tr>
<tr>
<td>post</td>
<td>6</td>
</tr>
<tr>
<td>document</td>
<td>5</td>
</tr>
<tr>
<td>with</td>
<td>5</td>
</tr>
<tr>
<td>parentNode</td>
<td>4</td>
</tr>
<tr>
<td>email</td>
<td>4</td>
</tr>
<tr>
<td>com"</td>
<td>4</td>
</tr>
<tr>
<td>googletag</td>
<td>3</td>
</tr>
</tbody>
</table>
What should i do to achieve such output?

If you can change HTML, then simply put table before Highcharts container and set proper styles (float, width). For example you can also use two divs: http://jsfiddle.net/68qdew8g/
<div style="float: left; width: 30%;">
<table border="1" class="highchart" data-graph-container-before="1" data-graph-type="column">
...
</table>
</div>
<div id="words" style="width:70%;float:left;"></div>

Content_tag_for malfunction in rails 3.2

I have search results that I need to loop through. Each loop should give me two table rows. The code so far is:
<tbody>
<%= content_tag_for(:tr, #results) do |material| %>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr class="hide">
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<% end %>
</tbody>
The problem is that I am getting the with a class and id above the two rows in a separate row. I need these two rows to be wrapped in a with an id.
e.g.
<tr class="X" id="X"></tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr class="hide">
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
I also have the same problem when I try to use a div_for. In that case I get the divs with the ids all stacked up before the rows.
What am I doing wrong?

The problem was that you cannot wrap a in another using this method. The solution was to write the following:
<tbody>
<%= content_tag_for(:tr, #results) do |material| %>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<tr class="hide">
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<% end %>
</tbody>
The top three 's are wrapped in a with an id, while the other is just reproduced verbatim.

unable to select node in nokogiri with css attribute containing two colons

I'm receiving an error when trying to select a node with css value of "WhoIsOnDutyTableLevel1:header:2" using nokogiri. I'm assuming nokogiri just can't handle two colons. What are my options? I can't change the structure of the html.
Here's the html:
<html lang="en"><head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="stylesheets/forms.css">
<style type="text/css" media="screen" title="AlarmPoint">
#import "stylesheets/AlarmPoint.css";
</style>
</head>
<body><table id="WhoIsOnDutyTableLevel1" class="duty-report-level1">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1" class="duty-report-lt-header">Who's on duty for:
January 06, 2012 00:00 -0800</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1">
<table id="WhoIsOnDutyTableLevel2" class="duty-report-level2">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1">Group Name</th><th id="WhoIsOnDutyTableLevel1:header:2">Group Time Zone</th><th id="WhoIsOnDutyTableLevel1:header:3">Default Devices</th><th id="WhoIsOnDutyTableLevel1:header:4">Supervisors</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="Support" href="/alarmpoint/GroupDetails.do;jsessionid=7pj06dj6krfs?_data=TJZuNquzHUiPj8lqyud7XvypLHHjUnT5bHn7hwtTf9Ei0C2PJ8QYcKIy8OkorCWT8HDTAzkon1ls%0D%0AefuHC1N%2F0SLQLY8nxBhwesdd7Zeg6NzvCfuzRqLg5g%3D%3D" name="Support" class="details">Support</a></td><td headers="WhoIsOnDutyTableLevel1:header:2" class="centered-text">US/Pacific</td><td headers="WhoIsOnDutyTableLevel1:header:3" class="centered-text"><img border="0" src="/static/images/icon_boolean_false.png" alt="No"></td><td headers="WhoIsOnDutyTableLevel1:header:4">
<values>
</values><a id="mgr1" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z4qZ%2FFdHH4hUAixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="mgr1" class="details">Manager 1</a>
</td>
</tr>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1" colspan="4" class="no-padding">
<table id="WhoIsOnDutyTableLevel3" class="duty-report-level3">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1" class="th-left">Blah_Blah1</th><th id="WhoIsOnDutyTableLevel1:header:2" class="">08:00 - 17:00 TU WE TH FR </th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1" colspan="2" class="no-padding">
<table id="WhoIsOnDutyTableLevel4" class="duty-report-level4">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1">Recipient</th><th id="WhoIsOnDutyTableLevel1:header:2">Category</th><th id="WhoIsOnDutyTableLevel1:header:3">Escalation</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr id="205414">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user0" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z6oL%2BaI47zI4gixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user0" class="details">User 0</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">0</td>
</tr>
<tr id="207569">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user1" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z4qZ%2FFdHH4hUAixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user1" class="details">User 1</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">10</td>
</tr>
<tr id="209107">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user2" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z6uKpyoDh%2Fz%2FQixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="uer2" class="details">User 2</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">25</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1" colspan="4" class="no-padding">
<table id="WhoIsOnDutyTableLevel3" class="duty-report-level3">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1" class="th-left">Blah_Blah</th><th id="WhoIsOnDutyTableLevel1:header:2" class="">17:00 Lasting 15:00 WE TH FR </th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1" colspan="2" class="no-padding">
<table id="WhoIsOnDutyTableLevel4" class="duty-report-level4">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1">Recipient</th><th id="WhoIsOnDutyTableLevel1:header:2">Category</th><th id="WhoIsOnDutyTableLevel1:header:3">Escalation</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr id="210855">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user0" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z72pjQodq7P5gixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user0" class="details">User 0</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">5</td>
</tr>
<tr id="210529">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user1" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z6r1%2Fmnw2SZ2AixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user1" class="details">User 1</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">10</td>
</tr>
<tr id="210337">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user2" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z6Rwqu8vCtzBAixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user2" class="details">User 2</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">15</td>
</tr>
<tr id="204675">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user3" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z5oj5jdRJbzggixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user3" class="details">User 3</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">20</td>
</tr>
<tr id="205555">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user4" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z4G8e7%2FY9SHyQixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user4" class="details">User 4</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">25</td>
</tr>
<tr id="205004">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user5" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z5XHkcVAMfXqgixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user5" class="details">User 5</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">30</td>
</tr>
<tr id="204718">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user6" href="/alarmpoint/GroupDetails.do;jsessionid=7pj06dj6krfs?_data=TJZuNquzHUiUNEK29yovHscXndexl2jCbHn7hwtTf9Ei0C2PJ8QYcKIy8OkorCWT8HDTAzkon1ls%0D%0AefuHC1N%2F0SLQLY8nxBhwesdd7Zeg6NzvCfuzRqLg5g%3D%3D" name="user6" class="details">User 6</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">GROUP</td><td headers="WhoIsOnDutyTableLevel1:header:3">35</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body></html>
I'm running this in my rails console:
>> onDuty_userList = doc.at_xpath('//*[#id="WhoIsOnDutyTableLevel4"]/tbody/tr')
=> #<Nokogiri::XML::Element:0x1b83804 name="tr" attributes=[#<Nokogiri::XML::Attr:0x1b83764 name="id" value="208894">] children=[#<Nokogiri::XML::Element:0x1b83174 name="td" attributes=[#<Nokogiri::XML::Attr:0x1b83110 name="headers" value="WhoIsOnDutyTableLevel1:header:1">] children=[#<Nokogiri::XML::Element:0x1b82b70 name="a" attributes=[#<Nokogiri::XML::Attr:0x1b82aa8 name="href" value="/alarmpoint/UserDevices.do;jsessionid=3pz7t91kle3?_data=KpBkJeR08z6mdgIY4sPrzAixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D">, #<Nokogiri::XML::Attr:0x1b82a94 name="name" value="xxx">, #<Nokogiri::XML::Attr:0x1b82a80 name="id" value="xxx">, #<Nokogiri::XML::Attr:0x1b82a6c name="class" value="details">] children=[#<Nokogiri::XML::Text:0x1b7b438 "\r\n xxx, xxx (xxx)\r\n ">]>]>, #<Nokogiri::XML::Element:0x1b7b104 name="td" attributes=[#<Nokogiri::XML::Attr:0x1b7b0a0 name="headers" value="WhoIsOnDutyTableLevel1:header:2">] children=[#<Nokogiri::XML::Text:0x1b7aba0 "PERSON">]>, #<Nokogiri::XML::Element:0x1b7a984 name="td" attributes=[#<Nokogiri::XML::Attr:0x1b7a90c name="headers" value="WhoIsOnDutyTableLevel1:header:3">] children=[#<Nokogiri::XML::Text:0x1b7a420 "0">]>, #<Nokogiri::XML::Text:0x1b7a1f0 "\r\n">]>
When I try to select with css value:
>> onDuty_userList.css('WhoIsOnDutyTableLevel1:header:2')
Nokogiri::CSS::SyntaxError: unexpected '2' after ':'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/css/parser_extras.rb:87:in `on_error'
from /home/dan/.rvm/rubies/ruby-1.9.2-p290/lib/ruby/1.9.1/racc/parser.rb:99:in `_racc_do_parse_c'
from /home/dan/.rvm/rubies/ruby-1.9.2-p290/lib/ruby/1.9.1/racc/parser.rb:99:in `do_parse'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/css/parser_extras.rb:62:in `parse'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/css/parser_extras.rb:79:in `xpath_for'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/css.rb:23:in `xpath_for'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/xml/node.rb:211:in `block in css'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/xml/node.rb:210:in `map'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/xml/node.rb:210:in `css'
from (irb):129
from /home/dan/.rvm/rubies/ruby-1.9.2-p290/bin/irb:16:in `<main>'

You need to preface the id with a #.
This should work:
doc.css('#WhoIsOnDutyTableLevel1:header:2')

jQuery UI sortable with fixed rows

I'm using a jQuery UI sortable with a table (works fine). I would like to make the header and last row fixed (non-moveable).
The jQuery UI docs indicate this can be done using a selector for items, but I am at a loss for the syntax.
Here is the relevant code:
<script type="text/javascript">
$(function () {
$("#response_options tbody.content").sortable();
$("#response_options tbody.content").disableSelection();
});
</script>
<table id="response_options" class="data-table">
<tbody class="content">
<tr>
<th>Links</th><th>Response</th>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 1</td>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 2</td>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 3</td>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 4</td>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 5</td>
</tr>
<tr>
<td>Edit</td>
<td>Item 1</td>
</tr>
</tbody>
</table>
The selector goes inside .sortable(...):
$("#response_options tbody.content").sortable();
as
$("#response_options tbody.content").sortable( items: ??? );
and it should be possible to select only items with class="sortable-row"; but again, I am at a loss for the syntax.

This should work:
$("#response_options tbody.content").sortable({items: 'tr.sortable-row'});

This worked for me:
jQuery(".sortable tbody").sortable({
items: 'tr:not(:first)'
});

For this markup:
<table id="tableid">
<thead>
<tr>
<th>namr</th>
<th>id</th>
</tr>
</thead>
<tbody>
<tr>
<td>jagadeesh</td>
<td>1</td>
</tr>
<tr>
<td>jagadeesh</td>
<td>2</td>
</tr>
</tbody>
</table>
Use this jQuery:
$('#tableid tbody').sortable();
It will move only body content of table you cannot move header part.

Develop Reference

ios ruby-on-rails asp.net-mvc docker delphi jenkins grails google-sheets machine-learning dart

jQueryUI Sortable | Drag elements among different parents - jquery-ui

Related

Formula to move/shift items in a 2d-table, so that they are in same rows of the matching 1d-table items?

How to set the highchart and the table horizontally?

Content_tag_for malfunction in rails 3.2

unable to select node in nokogiri with css attribute containing two colons

jQuery UI sortable with fixed rows

Categories

Resources