Jquery UI nested Selectable issue

Question

I have requirement of creating/splitting my div elements horizontally and vertically on click of button at run time. I am able to create a div container in which splits the canvas according to the button clicked.

For example: When I click horizontalSplit button it should create two new div's within the selected container. I am running into issue with nested child div element. When I am trying to select the innermost child code is selecting parent div also which is creating issue. I am not able to figure out why my nonSelectable class is automatically getting "ui-selected"

This is what I have done so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
                <link rel="stylesheet" href="css/themes/base/jquery.ui.all.css"> 
                <script type="text/javascript" src="scripts/jquery-1.6.js"></script>
                <script type="text/javascript" src="scripts/jquery-ui-1.8.13.custom.min.js" ></script>              
                    <style>

                        #canvasWrapper {
                            border: 1px solid #DDDDDD;
                            height: 500px;
                            vertical-align:top;
                            margin-left: auto;
                            margin-right: auto;
                            width:  90%; 
                        }
                        .Frame {
                            border: 1px solid #DDDDDD;
                            height: 500px;
                            margin-left: auto;
                            margin-right: auto;
                            width:  100%; 
                        }
                        .hFrame {
                            border: 1px solid #DDDDDD;
                            height: 50%;
                            width:  100%; 
                            position:relative;
                        }

                        .nonSelectable {
                            border: 1px solid #DDDDDD;
                            height: 50%;
                            width:  100%; 
                            position:relative;
                        }

                        .vFrame {
                            border: 1px solid #DDDDDD;
                            height: 100%;
                            width: 50%; 
                            position:relative;
                        }

                        .buttonBar {
                            position: relative;
                            margin-left: auto;
                            margin-right: auto;
                            width:90%;
                        }
                        .Frame .ui-selecting,.vFrame .ui-selecting ,.hFrame .ui-selecting  { background: blue; }
                        .Frame .ui-selected,.vFrame .ui-selected ,.hFrame .ui-selected  { background: grey; }
                        .hFrame ui-selectable { background: yellow; }
                        .hFrame ui-selected { background: green; }
                        .hFrame ui-selectable ui-selected { background: pink; }

                    </style>



</head>
<body>
    <div id="canvasWrapper">
        <div id="canvasFrame" class="Frame">
        </div>
    </div>
    <div class="buttonBar">
        <input id="B1" class="button" type="submit" value="Horizontal Split">
        <input id="B2" class="button" type="submit" value="Vertical Split">
    </div>

    <script>
        $(document).ready(function()
        {   
            $("#canvasFrame").addClass("ui-selected");
            $(function() {
                $( ".Frame" ).selectable({
                     // cancel: '.nonSelectable'
                });
                $( ".hFrame" ).selectable({
                    // cancel: '.nonSelectable'

                });
                $( ".vFrame" ).selectable();
                // $( ".nonSelectable" ).selectable("disable");
            });

            addHFrame();

            addVFrame();



        });

    function addHFrame(){
        $("#B1").unbind('click.addit').bind('click.addit',function()
        {

        var numSplits=2;
        var select="";

        $(".ui-selected ").each(function () {   
                for (var i=0; i<numSplits ; i++){
                        $(this).removeClass('ui-selected ui-selectable');
                        $(this).parent().removeClass('ui-selected ui-selectable');
                        var $newElement = '<div></div>';

                        $(this).append($newElement);
                        $(this).children().addClass("hFrame");

                        //$(this).unbind('ui-selected ui-selectable');
                        // $(this).parent().selectable("disable")   ;
                        // $(this).remove("hFrame").addClass("nonSelectable")   ;
                        addHFrame();
                    }
                $(this).hasClass("hFrame") ? $(this).removeClass("hFrame").addClass("nonSelectable") : $(this);                         
            });
        });

    }

    function addVFrame(){

                $("#B2").click(function()
                {

                    $("div.ui-selected").each(function () {
                        // $(this).append('<div class="vFrame"> </div>');       
                        alert("Button Vertical Split Clicked"); 
                    });
                });
    }

    </script>
</body>

</html>

score 1 · Accepted Answer · edited May 23 '17 at 12:03

Sounds like you need to prevent event propagation: http://api.jquery.com/event.stopPropagation/

Similar question: jQuery UI Sortable -- How can I cancel the click event on an item that's dragged/sorted?

When the element is clicked, the event bubbles up the DOM until it hits the highest level HTML node. This is referred to as event propagation. So the event is fired on all of the element's ancestors unless event propagation is halted. This can be done like so:

HTML-

<body>
    <div id="container">
        <a href="javascript:void(0);" id="click-element"></a>
    </div>
</body>

Script-

$('#click-element').click(function(event){

    //prevent container and body from triggering click event
    event.stopPropagation();

    //do stuff

});

can you elaborate on it.... I am new to jquery ...I tried stopPropagation and it didn't worked. — user780092, Jun 01 '11 at 23:56

score 0 · Answer 2 · answered Oct 30 '15 at 11:31

I know this doesn't provide a technical solution to your problem but it's an answer that easier than than the solution. Stop using .selectable. .selectable is a helper to provide on-click functionality, at this point it's easier to do what you want without it, than it is to reconfigure. Use on click with a filter and add some event propagation overrides to go back to the selectable style functionality:

$('#canvas').on('click', '.control', function (event) {
    var ui = $(this);
    $('#canvas .control').removeClass('ui-selected');
    ui.addClass('ui-selected');

    -- do stuff --

    event.stopPropagation();
    event.preventDefault();
});

To detect click off:

$('#canvas').on('click', function () {
    $('#canvas .control').removeClass('ui-selected');

    -- Do Stuff when not selected --
});

This won't fire because of the event.stopPropagation() when selecting a .control.

Jquery UI nested Selectable issue

2 Answers2

Linked