CODEWITHSUNDEEP
javascriptjqueryjquery-uiselectable
Joe Methven
Joe Methven

Reputation: 23

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

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.

Upvotes: 0

Views: 698

Answers (1)

guest271314
guest271314

Reputation: 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/

Upvotes: 1

Related Questions