1

i'm trying to know why my code isn't working with the selectable, im including the libraries

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

This is the code that would have the selectable items in the list 

<div class="modal-wrapper">
    <ul id="selectable" class="data-list">
        <li class="list-item" ng-repeat="data in testData">
            <div class="row">
                <div class="col-md-4">
                    <div class="container-title">
                        <span class="inner-title">{{data.name}}</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="container-subtitle">
                        <span class="subtitle">{{data.title}}</span>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    <div class="bottom-buttons">
        <button class="btn btn-primary btn-wizard" ng-click="alertSelected()">NEXT</button>
    </div>
</div>

Then this is the little piece of code for the selectable:

$(function() {  
    $("#selectable").selectable({
        selected: function(event, ui) {
            console.log('im there');    
        }       
    }); 
});

And this is my current css for this test:

body{
    background-color: #231f20 !important;
    color: #fff;
}

.modal-wrapper {
    width: 564px;
    height: 650px;
    background-color: #eee;
    overflow: hidden;
    color: #fff;
    position: relative;
}


.list-item {
    background-color: #555;
    width: 250px;
    height: 150px;
    float: left;
    margin: 20px 16px 10px 15px;
}

.container-title {
    width: 250px;
    height: 150px;
    text-align: center;
}

.inner-title {
    position: relative;
    top: 54px;
    font-size: 30px;
}

.container-subtitle {
    text-align: center;
    width: 250px;
}

.subtitle {
    position: relative;
    color: #333;
}

.bottom-buttons {
    position: absolute;
    bottom: 0;
    height: 70px;
    background-color: #eee;
    width: 564px;
}

.btn-wizard {
    position: relative;
    left: 230px;
    top: 17px;
    width: 100px !important;
}

 #selectable .ui-selecting { background: #FECA40; }
 #selectable .ui-selected { background: #F39814; color: white; }

Any ideas on what's going? is it a CSS problem? or the <li> structure?

Thanks in advance,

Improve this question
8
  • where did you place your references? Commented Dec 26, 2013 at 2:02
  • Are you getting errors in your dev console? Are you testing this locally or with a server? Commented Dec 26, 2013 at 2:03
  • no errors on console, tried that, maybe there might be an error in there of a non-recognized variable or function from jquery to give me a clue, but nope, no errors, looks like its being imported. Now... the selectable isn't working for some reason :( Commented Dec 26, 2013 at 2:08
  • yes @яша it's there, included Commented Dec 26, 2013 at 2:09
  • omg, nothing is working when i add functionality to ul's, to ids, anything works! not even a on('mouseenter', function() {});... nothing works! what's happening T_T i'm adding my main.js into the index, so it's not that either. Commented Dec 26, 2013 at 2:21

4 Answers 4

Reset to default
1

Edit js/controllers/myWorkController.js

portfolioApp.controller('myWorkController', function($scope) {
    $scope.testData = [
        {
            name : "Test 1",
            title : "Home"
        },
        {
            name : "Test 2",
            title : "About"
        },
        {
            name : "Test 3",
            title : "Contact"
        },
        {
            name : "Test 4",
            title : "Join"
        },
        {
            name : "Test 4",
            title : "Join"
        },
        {
            name : "Test 4",
            title : "Join"
        },
        {
            name : "Test 4",
            title : "Join"
        },
        {
            name : "Test 4",
            title : "Join"
        },      
    ];

    $scope.alertSelected = function() {
        /* alert it ! */ 
    };
    $('#selectable').selectable();
});
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

worked for you? :O i was trying now to use a directive, let me check something first, otherwise i will use that one.
OMG!!!! I MADE IT WORK THANKS TO YOU! :') just added in the link inside the directive this code link: function(scope, element, attrs) { $timeout(function() { if(!scope.$$phase) { $('#selectable').selectable(); scope.$apply(); } },0); } to avoid diggest issues and stuff and it WORKED AWESOMELY!
1

According to the Jqueryui documentation regarding selectable you can only implement your code in the meaning of <li> wrapped by <ul> or <ol> syntax as shown here

<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content">Item 7</li>
</ol>

if you want to add any hover event to the <li> elements add this code to your script:

$(function() {
    $( "#selectable" ).selectable();
    $(".list-item").hover(function() {
    alert("hovered!")
}, function() {
    alert("unhovered!")
});
  });
Improve this answer

7 Comments

not even a hover event in the li is working, something weird is happening! :@ but a console.log('random') works on the main.js, it's importing the js but not paying attention to any jquery function.
nothing works! :@ don't know what's wrong with this project, nothing seems to work, not even the example provided by jquery itself! can't find the bug on my little test project.
Yea, that one is working, but i don't know why mine isn't :'(
lol tried to jsfiddle my code and kinda works :S might be a problem with angularJS? the only difference is that in the jsfiddle haven't used angular. My god :/
why are you using ng-repeat ? are you using angular.js ? it might be conflicting with your code try to disable it and see if it works
|
0

You must know selectable will select the nested child

$("#selectable").selectable();

will select "li", I find your code have one "li", you must add more li to ul if you want select div class "row", try that:

$(".list-item").selectable();
Improve this answer

7 Comments

not working either :( if i mistype selectable to selectabl or example, it shows an error Uncaught TypeError: Object [object Object] has no method 'selectabl' so the son of a b**** is getting into the jquery code. Don't know why it's not working. Could be a problem of my div? i mean i got a div inside those list items...
yeah i know, don't know what's wrong with this... in my code doesn't work where i use angularJS and ng-repeat.
open by Chrome, Press F12 and refesh page, Then take me a screenshot of the console
You must drag mouse to selecttable before take a screenshot. (the error will be show)
no matter what i click or where i put my mouse on, it doesn't show any error :/
|
-1 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

change to:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Improve this answer

1 Comment

And why should he do this?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.