Can't get JQuery UI Selectable to work at all

Question

I've been having some trouble getting JQuery UI selectable to work with my site. I'm still very new to coding and I'm not sure what I'm doing wrong. I've searched for relevant questions and haven't been able to find any that let me figure it out.

I'm trying to create whats essentially a glorified label maker for work, and would like to be able to select cells in a grid using a mouse "lasso." But for some reason, I can't get selectable to work at all.

Here is the js:

    $('document').ready(function() {

        for (i=0; i<117;i++)    {
                $('#plateActual').append('<div class="cell"/>');
                }

                $('#plateActual').selectable();
        });

Here is the HTML:

    <!DOCTYPE html>
<html>
        <head>
                    <title></title>
                    <link rel="stylesheet" href="style.css" />
                    <link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" /> 
                    <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
                    <script type="text/javascript"  src="script.js"></script>
                    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

        </head>

        <body>
        <div id="wrapper">

                 <div id="navbar">      
                 </div>
                 <div id="controlPanel">
                 <p>test<br>test<br>test<br>test<br>test<br>test<br></p>
                 <p>test<br>test<br>test<br>test<br>test<br>test<br></p>
                 <p>test<br>test<br>test<br>test<br>test<br>test<br></p>
                 <p>test<br>test<br>test<br>test<br>test<br>test<br></p>
                 <p>test<br>test<br>test<br>test<br>test<br>test<br></p>
                 <p>test<br>test<br>test<br>test<br>test<br>test<br></p>

                 </div>
                 <div id="plateEditor">
                            <div id="plateActual">

                            </div>

                 </div>
                 <div id="bottom">
                 </div>
        </div>

        <script type="text/javascript"  src="script.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

        </body>

Here is the CSS:

 body   {
        margin: 0px auto;
        padding: 0;
}


p       {
        color: yellow;
}

#wrapper    {
                border: 1px dotted black;
                width: 980px;
                margin: 0px auto;
                padding: 0;
}

#navbar  {
             width: 980px;
             background: black;
             height: 50px;
             position: fixed;
             margin: 0;
             padding: 0;
             top: -10px;
}

#controlPanel        {

                                 width: 250px;
                                 background-color: red;
                                 float:left;
                                 top: 100px;    
                                 margin-bottom: 0;

}

#plateEditor             {
                                 position:    relative;
                                 overflow: auto;
                                 width: 730px;
                                 float:right;
                                 top: 100px;
                                 margin-bottom: 0;
                                 margin-top: 150px;
}

#plateActual             {
                                 border: 1px solid;
                                 width: 403px;
                                 height: 279px;
                                 margin: 0px auto;
                                 pading: 0;
}

#bottom                      {
                                 width: 980px;
                                 height: 30px;
                                 background:green;
                                 clear: both;
                                 bottom: 0;
                                 margin: 0px auto;
                                 padding: 0;
}

.cell                            {
                                 float: left;
                                 width: 29px;
                                 height: 29px;
                                 border: 1px    dotted;

}

I apologize if my code is messy and unorganized. I am still figuring out how to best keep it organized and generally write it in an acceptable fashion. Thanks a lot for your help.

Update: I've made the change Ando suggested, but I'm still unable to get selectable to work. I've tried changing #plateActual to an ol or ul and appending li.cell instead but that did not work either.

I was wondering if the reason is my css is somehow interfering with it, but I'm not sure how to fix that without destroying the formatting.

score 0 · Answer 1 · answered Jul 22 '12 at 05:54

0

The element returned by append will be the element to which the add is performed - in your case plateActual- so you will be adding the cell class to the wrong element.

When you append the cells - you use $('<div/>') - which will translate to "get the elements of type '<div/>' from the dom and move them inside my 'plateActual' element" - you should add without $ as you are creating an element that does not yet exist.

Something like this should work (http://jsfiddle.net/k3YJY/):

for (var i=0; i<5;i++)    {                          
          $('#plateActual').append('<div class="cell"/>');                                           
}

answered Jul 22 '12 at 05:54

Ando

11,199
2
30
46

thanks a lot. That seems to be a much more sensible way of creating the divs. Unfortunately I still can't get selectable to work and I have not made any progress on that front. – Copacetik Jul 22 '12 at 13:17
what exactly is not working? did you debug it? maybe you have errors - see with firebug or the built in chrome/opera debugger. – Ando Jul 22 '12 at 19:10

Can't get JQuery UI Selectable to work at all

1 Answers1