Question 52164 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to change a button style if it is inside a popover? – Javascript

I have this popover:

.dashboardViews-btnActive {
    background-color: #ffa500 !important;
    color: #fff;
}

<button data-toggle="popoverB" id="bookmarkB" style="background:#0070c0; border: 0px !important; color:white;" data-placement="bottom" title="Quarter Selection">
     <i class="fa fa-bookmark bookmarkIcon"></i>
</button>

<div id="popover-baseline" style="display:none;">
    <div class="row" style="height: 25px;margin: 0px;">
        <div class="col-3" style=" padding-left: 5px; height:100%;">
            <button id="btn_Q1_B" class="dashboardViews-btn dashboardViews-btnActive" style="height:100%; width:46px;" onclick="Q1_BClick();">
            Q1
            </button>
        </div>
        <div class="col-3" style=" padding-left: 5px; height:100%;">
            <button id="btn_Q2_B" class="dashboardViews-btn dashboardViews-btnActive" style="height:100%; width:46px; margin-left:3px;" onclick="Q2_BClick();">
            Q2
            </button>
        </div>
        <div class="col-3" style=" padding-left: 5px; height:100%;">
            <button id="btn_Q3_B" class="dashboardViews-btn dashboardViews-btnActive" style="height:100%; width:46px; margin-left:5px;" onclick="Q3_BClick();">
            Q3
            </button>
        </div>
        <div class="col-3" style=" padding-left: 5px; height:100%;">
            <button id="btn_Q4_B" class="dashboardViews-btn dashboardViews-btnActive" style="height:100%; width:46px; margin-left:7px;" onclick="Q4_BClick();">
            Q4
            </button>
        </div>
    </div>
</div>

And it is rendered in JavaScript with this code:

$('#bookmarkB').on('click', function () {
        // Set the options for the popover
        var popoverOptions = {
            content: $('#popover-baseline').html(),
            html: true,
            placement: 'bottom',
            trigger: 'click',
            sanitize: false,
            id: 'popover_baseline'
        };

        // Initialize the popover
        $('#bookmarkB').popover(popoverOptions);
        // Show the popover
        $('#bookmarkB').popover('show');
    });

And I am trying to change the class of each button when clicked. The class is supposed to change its color, but it’s not working.

function Q1_BClick() {

        if ($('#btn_Q1_B').hasClass('dashboardViews-btnActive')) {
            $('#btn_Q1_B').removeClass('dashboardViews-btnActive');
        }
        else {
            $('#btn_Q1_B').addClass('dashboardViews-btnActive');
        }   
    }

Here it the screenshot of the popover:

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I used this code to toggle the classes. I discovered that since the div that is rendered inside the popover is just hidden, it created a duplicated elements. One from inside the popover content and one from the hidden div.

    $('.popover-body').find('#btn_Q1_B').toggleClass('dashboardViews-btnActive');

  2. 0

    you can use toggleClass from jQuery, and I really think there is not need to define a different onclick function for each of the buttons:

    Maybe you can try:

        <div class="col-3" style=" padding-left: 5px; height:100%;">
                <button id="btn_Q1_B" class="dashboardViews-btn dashboardViews-btnActive" style="height:100%; width:46px;" onclick="clicked(this)">
                Q1
                </button>
            </div>
            <div class="col-3" style=" padding-left: 5px; height:100%;">
                <button id="btn_Q2_B" class="dashboardViews-btn dashboardViews-btnActive" style="height:100%; width:46px; margin-left:3px;" onclick="clicked(this)">
                Q2
                </button>
            </div>
            <div class="col-3" style=" padding-left: 5px; height:100%;">
                <button id="btn_Q3_B" class="dashboardViews-btn dashboardViews-btnActive" style="height:100%; width:46px; margin-left:5px;" onclick="clicked(this)">
                Q3
                </button>
            </div>
            <div class="col-3" style=" padding-left: 5px; height:100%;">
                <button id="btn_Q4_B" class="dashboardViews-btn dashboardViews-btnActive" style="height:100%; width:46px; margin-left:7px;" onclick="clicked(this)">
                Q4
                </button>
            </div>
</div>

    and js

    function clicked(element) {
      $('#'+element.id).toggleClass('dashboardViews-btnActive')
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search