CODEWITHSUNDEEP
jqueryjquery-uihtml-tablejquery-ui-sortable
triplethreat77
triplethreat77

Reputation: 1296

jQuery UI sortable with table and modal pop ups

One: I need a table with sortable rows (see jqueryui.com). Typically, the examples give you list items but it is very possible to do this with table rows. Here's my homework http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/ and his jsfiddle: http://jsfiddle.net/bgrins/tzYbU/ He basically explains the fixes that go along with making table rows sortable.

Two: I need these sortable table rows to have a modal pop up on hover. It seems I can only have one or the other. Either the sortable rows move, but the pop up doesn't work (http://jsfiddle.net/anschwem/gAmnQ/2/ it's sorting/dragging on my end but not the fiddle) or the modal pop ups work and and sort, but it's list items. (http://jsfiddle.net/anschwem/gAmnQ/1/). Then there's the strange occurrence where a row is kicked out of the table and only it's hover works (http://jsfiddle.net/anschwem/gAmnQ/2/). Anyways, I need rows due to correct spacing and the fact that I will also need to dynamically create new rows. Any ideas?

Here's the HTML for my sortable table:

<table class="table_177" id="sortable2" class="connectedSortable inputboxes">
<thead>
  <tr>
    <th>Vessel Name</th>
    <th>Hull/IMO No.</th>
  </tr>
</thead>  
  <tr>
    <a class="productsModal1" style="text-decoration:none">
    <td class="ui-state-highlight" style="border-right:none">SS Mary Mae</td>
    <td class="ui-state-highlight" style="border-left:none">12345</td></a>
  </tr>      
  <tr>
    <a class="productsModal1" style="text-decoration:none">
    <td class="ui-state-highlight" style="border-right:none">EMS 234</td>
    <td class="ui-state-highlight" style="border-left:none">12346</td></a>
  </tr> 
</table>

The HTML and CSS for my hidden modals: 

<style>
div.productsModal1
{
    display:none;
    position:absolute;
    border:solid 1px black;
    padding:8px;
    background-color:white;
}
a.productsModal1:hover + div.productsModal1
{
    display:block;
/*  animation:fade-out .5s 1;
    animation-transition-property: opacity;*/
}
div.productsModal1:hover
{
    display:block;
/*  animation:fade-out .5s 1;
    animation-transition-property: opacity;*/
}
</style>
    <div class="productsModal1" style="top: 230px; left: 320px; z-index:9999" >
  <table id="menu1">
    <tr>
      <th>Vessel Name</th>
      <th>Vessel Type</th>
      <th>Hull/IMO No.</th>
    </tr>
    <tr>
      <td>SS Mary Mae</td>
      <td>Barge</td>
      <td>12345</td>
    </tr>
  </table>
  </div>
  <div class="productsModal1" style="top: 230px; left: 320px; z-index:9999" >
  <table id="menu1">
    <tr>
      <th>Vessel Name</th>
      <th>Vessel Type</th>
      <th>Hull/IMO No.</th>
    </tr>
    <tr>
      <td>EMS 234</td>
      <td>Barge</td>
      <td>67891</td>
    </tr>
  </table>
  </div>

AND my code:

$(window).load(function(){
// Return a helper with preserved width of cells
var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      $(this).width($originals.eq(index).width())
    });
    return $helper;
};
    $("#sortable2 tbody").sortable({helper: fixHelperModified}).disableSelection();
});//]]>

Upvotes: 1

Views: 2227

Answers (1)

wirey00
wirey00

Reputation: 33661

  • First of all, remove the anchor tags wrapping the td because that is invalid HTML.. and add the class to your tr, also use the data-index to store the default index since you will be moving them around and need a way to relate them to the modal

Change the tr to this

<tr class="productsModal1" data-index=0>
  <td class="ui-state-highlight" style="border-right:none">SS Mary Mae</td>
  <td class="ui-state-highlight" style="border-left:none">12345</td>
</tr>
<tr class="productsModal1" data-index=1>
  <td class="ui-state-highlight" style="border-right:none">EMS 234</td>
  <td class="ui-state-highlight" style="border-left:none">12346</td>
</tr>

  • Not sure why $(window).load function wasn't working.. but using document.ready function fixed the fiddle of sorting not working..

  • You can then use jQuery to show/hide the relevant divs

JS

$('#sortable2 tbody tr').on({
    mouseenter: function () {
      $('div.' + $(this).attr('class')) // <-- this gets the div.. though the share the same class so can probably just hardcode
            .eq($(this).data('index')) // <-- gets the correct one according to data-index
            .show();
    },
    mouseleave: function () {
      $('div.' + $(this).attr('class'))
            .eq($(this).data('index'))
            .hide();
    }
});

FIDDLE

One other thing is if you don't want to go in and hardcode the data attributes. You can just write use jQuery inside the document.ready function and dynamically add it.

$('#sortable2 tbody tr').each(function(i,v){
     $(this).data('index',i);
});

Upvotes: 2

Related Questions