Sortable table header & mouseover popup: is this possibl

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:53

Sortable table header & mouseover popup: is this possibl

Poster: pservedio
Dated: Wednesday September 27 2006 - 21:37:09 BST

I have a page containing a table with 7 columns, and currently each on of those columns is sortable, using milonic's class=sortable css strategy. Works great.

But I would also like to have the page display a milonic menu when the mouse is placed over any the 7 column text strings.

The menu displays all unique values in the column, and upon selecting one of those values, the table gets filters for only those values.

My question is this, can this be done, and would a mouseover function be at odds with the sortable functionality? (it doesn't appear so, since sortable uses onClick, but maybe there is something that I'm not aware of).

I'm planning on using mm_createNewMenus() and mm_insertItem() to create menus and items on the fly, as the table data is very dynamic.

Poster: Andy
Dated: Wednesday September 27 2006 - 23:32:13 BST

Hi,

If the item has been added to the menu, the item should be considered for sorting.

Also, if a sub menu (showmenu) command was added it should have no effect on the ordering process.

The best thing to di is try it and see what happens

Hope this helps,
Andy

Poster: pservedio
Dated: Saturday September 30 2006 - 1:44:14 BST

Well, I've been trying to get this to work. First hurdle was the sorttable.js function ts_makeSortable. It hijacks the HREF for the column header, so I had to modify it in order to add in a mouseover function:

Code:

function ts_makeSortable(table) {
   ...
    for (var i=0;i<firstRow.cells.length;i++) {
        var cell = firstRow.cells[i];
        var txt = ts_getInnerText(cell);
        if (txt == "Phase") {
            cell.innerHTML = '<a href="#" class="sortheader" '+ 
            'onclick="ts_resortTable(this, '+i+');return false;"' + 
 ------> 'onmouseover="popupMenu(1);return false;">' +
            txt+'<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a>';
        
    }

So that works, but when I try to add in menu items on the fly via the mm_insertItem method:

Quote:

mm_insertItem(getMenuByName("Phase"), i + 2, "text="+uniquePhases[i]+";url=xxx.html");

I get this error from milonic:

Quote:

_m[_mn] has no properties.

What does this mean? This is what I have in menu_data.js, dunno, maybe it's wrong:

Code:

with(milonic = new menuname("Phase")){
alwaysvisible=0;
position="relative";
style = subStyle; 
aI("Phases...;url=");
}

Poster: kevin3442
Dated: Sunday October 1 2006 - 6:58:35 BST

Hi,

The error indicates that the menu you're targeting with mm_insertItem() does not exist in the menu array, _m[]. I'm thinking that you're specifying the target menu incorrectly. In mm_menueditapi.js, the meuRef required as the first parameter to mm_insertItem() looks like it should be a menu name, rather than a menu number (which is what getMenuByName() returns... an index into _m[]). So, try this instead:

Code:

mm_insertItem("Phase", i + 2, "text="+uniquePhases[i]+";url=xxx.html");

Hope that helps,

Kevin

Poster: pservedio
Dated: Tuesday October 3 2006 - 1:16:57 BST

Smokin! It works! Thanks...

For anyone else out there, this what I had to do, nothing too tricky:

1. Define a menu in menu_data.js for your column header, put in one fake item:

Code:

with(milonic = new menuname("Phase")){
alwaysvisible=0;
style = subStyle; 
aI("Phases...;url=");
}

2. Carefully modify the ts_makeSortable() function in sorttable.js to allow popups and sorting on the same column header:

Code:

    // We have a first row: assume it's the header, and make its contents clickable links
    for (var i=0;i<firstRow.cells.length;i++) {
        var cell = firstRow.cells[i];
        var txt = ts_getInnerText(cell);
        if (txt == "Phase") {
            cell.innerHTML = '<a href="#" class="sortheader" '+ 
            'onclick="ts_resortTable(this, '+i+');return false;"' + 
            'onmouseover="popupMenu(1);return false;"' +
            'onMouseOut="popdown()">' +
            txt+'<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a>';
        } else {       
            cell.innerHTML = '<a href="#" class="sortheader" '+ 
            'onclick="ts_resortTable(this, '+i+');return false;">' + 
            txt+'<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a>';
        }
    }

3. Build your dynamic menu in your code

Code:

  for (i = 0; i < uniquePhases.length; i ++ ) {
             mm_insertItem("Phase", i + 2, "text="+uniquePhases[i]+";url=xxx.html");
      }

4. Build your popup function (perhaps this could be called directly from the onmouseover specification in sorttable.js above, not sure). I'm using menu numbers simply because I couldn't quickly figure a way to escape double quotes in the above sorttable.js function.

Code:

function popupMenu(menuNum) {
    if (menuNum == 1) {
        popup("Phase", 1);
    }

}

Industrial Strength JavaScript and DHTML Menus

Sortable table header & mouseover popup: is this possibl