jQueryUI Selectable (if element hasClass ui-selected) not working?

Question

I'm rather new to jQuery (like a couple days experience so far), so I may be asking a rather stupid question however:

I'm having some trouble with jQueryUI's .selectable, I'd like to have a list of four different tabs on the right side whilst when clicking each one different imagery/text content will appear on the left. Every time I click on a different tab I need it to add the new content whilst removing all the content from a previous tab if one was clicked on. My issue is that it continuously adds the classes, buttons and text on top of each other, when I need it to clear other pre-existing content and add the new. Also when it is first run the default tab is the top so the top content should be showing as well...

Here is a visual look at what I'm trying to achieve: http://puu.sh/gELQi/211165f55a.png

JSFiddle: http://jsfiddle.net/p5gsby49/8/

Below is the code I wish to add to each tab, the first three lines being what would be added when each tab is clicked, and then removed if they click on another tab.

$(".elementOneInfo").addClass("imageClassOne"),
$(".elementOneInfo").append("<button><a href='/clans'>MORE</a></button>");
$(".elementOneInfo").append("<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, vitae possimus. Quis debitis harum fugiat, placeat, modi nesciunt temporibus. Nesciunt rem necessitatibus, commodi harum a beatae amet consectetur. Porro, quis!</p>");

$(".elementTwoInfo").addClass("imageClassTwo"),
[...]

I then have the Selectable jQueryUI itself:

$('#elements').selectable();

I have attempted to use an if statement such as:

if ($('#elements .elementOne').hasClass('ui-selected')) {
    $(".elementOneInfo").addClass("imageClassOne"),
    [...]
}

& this is my HTML

<div class="container elements-wrapper">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-7 elements-info">
                <div class="elementOneInfo"></div>
                <div class="elementTwoInfo"></div>
                <div class="elementThreeInfo"></div>
                <div class="elementFourInfo"></div>
            </div>
            <div class="col-md-5 elements-titles-wrapper">
                <ul id="elements">
                    <li class="elementOne light ui-widget-content"><h3>Title1</h3></li>
                    <li class="elementTwo dark ui-widget-content"><h3>Title2</h3></li>
                    <li class="elementThree light ui-widget-content"><h3>Title3</h3></li>
                    <li class="elementFour dark ui-widget-content"><h3>Title4</h3></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Thanks for reading, I hope someone may be able to enlighten me on how this could be achieved, I have been able to add the look and feel of the visual image I sent with one tab but as soon as soon as I added the switching of tabs into the mix it just didn't work.

At `$('#elements li')` `#elements` not appear at `html` ? `$("#elements-tiltles li")` ? — guest271314, Mar 18 '15 at 00:34
@guest271314 sorry I was giving an example id and forgot to change it round, my original hasn't got that error. — Joe Methven, Mar 18 '15 at 00:38
The question is not clear. What is the exact problem? What "is not working"? A jsfiddle would be the best explanation. Still trying to guess what may be wrong... Are you sure you do all you code in `$(document).ready()` or after? — Kirill Slatin, Mar 18 '15 at 00:46
See http://api.jqueryui.com/selectable/ . Can create stacksnippets http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ , jsfiddle http://jsfiddle.net ? — guest271314, Mar 18 '15 at 00:46
can you edit [this fiddle](http://jsfiddle.net/arunpjohny/vbpre9sj/1/) to recreate your issue — Arun P Johny, Mar 18 '15 at 00:53
@guest271314 I added it since the classes `col-md-12` are from bootstrap — Arun P Johny, Mar 18 '15 at 01:01
Sorry if I wasn't clear with my issue @KirillSlatin, yes all my code is within $(document).ready, I tried an if statement to see if it could do what I wanted it to, but as soon as I add the if statement the selectable completely stops working, I either need another workaround or something is wrong with my if statement. If you see my http://jsfiddle.net/p5gsby49/ you can see I have an four if statements that relate two each of the four tabs, if the if statements are removed from the JS Fiddle the jQuery selectable will work again, but if I add it everything in it stops working. — Joe Methven, Mar 18 '15 at 01:13
You had a syntax error in your code. In javascript `if` operator requires `()` to wrap expression. Hope [edited jsfiddle](http://jsfiddle.net/p5gsby49/1/) helps. let us know if you still have issues — Kirill Slatin, Mar 18 '15 at 01:22
@KirillSlatin Sorry this was an error I fixed beforehand and must've copied it back into my code, I have changed it now at http://jsfiddle.net/p5gsby49/5/ however nothing changed when I change to a different tab, I have changed the text and added different images for each tab so the tabs should changed information but they don't :/ — Joe Methven, Mar 18 '15 at 01:33
Your ifs should be executed each time you have a click event. guest271314 provided the most accurate way to do it — Kirill Slatin, Mar 18 '15 at 01:38
@KirillSlatin His answer makes it a lot more clearer and looks to be the stepping stone to fully working - however there are still major issues which is my fault for not knowing the full way to remove the classes properly and such. jsfiddle.net/p5gsby49/8 It's still very confusing on what's happening, when it's first run I need the first tab needs to show the first tabs content (.server-one-info), when I click on other tabs it continuously adds classes and text and overlaps the other code when I need it to clear all the content before it when opening a new tab. — Joe Methven, Mar 18 '15 at 02:48
Opened a new question as provided in the answer below as my issue had moved to removing contents on tab click, it is available at: http://stackoverflow.com/questions/29125511/jqueryui-stackable-remove-contents-on-different-tab-click — Joe Methven, Mar 18 '15 at 15:10

score 1 · Answer 1 · answered Mar 18 '15 at 01:35

Try

$(document).ready(function () {    
    var text = "Lorem ipsum dolor sit amet,"
               + " consectetur adipisicing elit. Cumque, vitae possimus."         + " Quis debitis harum fugiat, placeat,"
               + " modi nesciunt temporibus. Nesciunt rem necessitatibus,"
               + " commodi harum a beatae amet consectetur. Porro, quis!";

    $('#server-titles li:first').addClass('ui-selected');

    var $one = $('.server-one');
    var $two = $('.server-two');
    var $three = $('.server-three');
    var $four = $('.server-four');

    $('#server-titles').selectable({
        selected: function (event, ui) {
            console.log(event, ui);
            if ($('#server-titles .server-one').hasClass('ui-selected')) {
                $(".server-one-info").addClass("server-one-info-image");
                $(".server-one-info")
                .append("<button><a href='/clans'>MORE</a></button>");
                $(".server-one-info").append("<p>"+text+"</p>");
            }
            if ($('#server-titles .server-two').hasClass('ui-selected')) {
                $(".server-one-info").addClass("server-one-info-image");
                $(".server-one-info")
                .append("<button><a href='/clans'>MORE</a></button>");
                $(".server-one-info").append("<p>"+text+"</p>");
            }

            if ($('#server-titles .server-three').hasClass('ui-selected')) {
                $(".server-one-info").addClass("server-one-info-image");
                $(".server-one-info")
                .append("<button><a href='/clans'>MORE</a></button>");
                $(".server-one-info").append("<p>"+text+"</p>");
            }

            if ($('#server-titles .server-four').hasClass('ui-selected')) {
                $(".server-one-info").addClass("server-one-info-image");
                $(".server-one-info")
                .append("<button><a href='/clans'>MORE</a></button>");
                $(".server-one-info").append("<p>"+text+"</p>");
            }
        }
    });
});

jsfiddle http://jsfiddle.net/p5gsby49/3/

Thanks for your answer, your presentation makes it a lot more clearer and looks to be the stepping stone to fully working - however there are still major issues which is my fault for not knowing the full way to remove the classes properly and such. http://jsfiddle.net/p5gsby49/8/ It's still very confusing on what's happening, when it's first run I need the first tab needs to show the first tabs content (.server-one-info), when I click on other tabs it continuously adds classes and text and overlaps the other code when I need it to clear all the content before it when opening a new tab. — Joe Methven, Mar 18 '15 at 01:54
Check blocks following `if ($('#server-titles .server-two').hasClass('ui-selected'))` , `if ($('#server-titles .server-three').hasClass('ui-selected'))` appear to reference `.server-one` at `$(".server-one-info").addClass("server-one-info-image");` ?, instead of currently selected element `class` ? — guest271314, Mar 18 '15 at 02:02
I'm not quite sure what you edited but when clicking the tabs it still doesn't remove the content, if you go to your jsfiddle results and test clicking the tabs it will add a background below the current, and the text will jump to the bottom and apply the new text on top of it as well as a new button whilst keeping the old background and button above it. I need it to remove ALL the content from one tab and add the new content of the other tab. In reference to the comment previously I had them variables set on a different part of jQuery before the error but it's not being used now. — Joe Methven, Mar 18 '15 at 02:47
@JoeMethven Yes, additional adjustments may possibly be made to render as expected ; cache selectors ?; update `css` , `class` of previous `ui-selected` ? See original Question title _"jQueryUI Selectable (if element hasClass ui-selected) not working?"_ ? `.ui-selected` element appear available at `selected` callback within `.selectable()` at above jsfiddle's ? See http://stackoverflow.com/help/how-to-ask . Perhaps open new Question as to specific topics rendering topics ? — guest271314, Mar 18 '15 at 03:20
guest271314 Thank you for your help, I took your advice and opened a new question as the issue had change and my original provided information wasn't clear enough. I hope my current information helps more. http://stackoverflow.com/questions/29125511/jqueryui-stackable-remove-contents-on-different-tab-click — Joe Methven, Mar 18 '15 at 15:09

jQueryUI Selectable (if element hasClass ui-selected) not working?

1 Answers1