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
– guest271314, Commented Mar 18, 2015 at 0:34
@guest271314 sorry I was giving an example id and forgot to change it round, my original hasn't got that error. — Joe Methven
– Joe Methven, Commented Mar 18, 2015 at 0: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
– Kirill Slatin, Commented Mar 18, 2015 at 0:46
See api.jqueryui.com/selectable . Can create stacksnippets blog.stackoverflow.com/2014/09/… , jsfiddle jsfiddle.net ? — guest271314
– guest271314, Commented Mar 18, 2015 at 0:46
@guest271314 I added it since the classes col-md-12 are from bootstrap — Arun P Johny
– Arun P Johny, Commented Mar 18, 2015 at 1:01

guest271314 · Accepted Answer · 2015-03-18 01:35:54Z

1

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/

answered Mar 18, 2015 at 1:35

guest271314

1

Sign up to request clarification or add additional context in comments.

5 Comments

Joe Methven Over a year ago

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. 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.

guest271314 Over a year ago

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 ?

Joe Methven Over a year ago

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.

guest271314 Over a year ago

@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 stackoverflow.com/help/how-to-ask . Perhaps open new Question as to specific topics rendering topics ?

Joe Methven Over a year ago

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. stackoverflow.com/questions/29125511/…

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related