Search code examples
jqueryjquery-uitomahawk

Prevent tomahawk command link to be activated while sorting a list using jquery .sortable()

I'm implementing a website using jquery-ui to be able to sort a list.

jQuery(".folder ul").sortable( { 
    opacity: 0.6, 
    cursor: 'move',
    update: sortUpdate,
    distance: 15,
    items: "> li:has(a)",
} );

The list element should only be sortable when it contains an element. So far so good.

Since the sortable item contains a link, it happens, that when I drop the sortable item, the link is called (I think because it is handled as a onclick event?). I tried to create a new onclick handler to handle the click event by myself, checking if the user is currently dragging or not. This however does not work.

jQuery('.folder-used').click(function(event) {
    event.stopPropagation();
event.preventDefault();
});

When I put a breakpoint to my own click-handler, it shows that the code is reached on click. But the page does a redirect anyways. My guess is that it is because of the tomahawk commandlink which I have to use. Tomahawk generates its own javascript functions to process the submit action.

<t:commandLink action="#{dataHandler.filterChanged}">
<f:param name="id" value="#{val}" />
<img:generateTextImage height="182" width="50" value="#{val}" verticalAligned="true" xpos="54" ypos="29" />
</t:commandLink>

How can I fix this problem? Does anyone have an idea how I could handle the onclick event for tomahawk?

Thx in advance! Zerd

P.s. I have tried different aproaches like described here (sortable start and stop events) or here (disable click events of a link)

Solution

  • I found the answer to my problem.

    I hold a variable which states if I'm currently dragging

    jQuery(".folder ul").sortable( { 
    opacity: 0.6, 
    cursor: 'move',
    update: sortUpdate,
    distance: 15,
    items: "> li:has(a)",
    start: function(event, ui) {
       dragging = true;     
    }
} );

    On the commandLink onclick event I check if I'm dragging. If so, I reset the dragging variable to false and return false, so the tomahawk action is not called.

    <t:commandLink onclick="if(dragging) { dragging = false; return false; }" action="#{handler.filterChanged}">

    tomahawk will take my onclick code and put it in front of its own. With the return false; I make sure the tomahawk code is ignored in that case.