Question

I’m using Ajax loader with codeigniter.
Im loading another view with ajax but im having an issue to add active class to pressed button.

This is the Ajax script.
its working beside this step

$(this).addClass('active');

It removes the other active class button but wont insert into the one im pressing

<script type="text/javascript">

    $(document).ready(function(){
        var baseurl = "<?php echo base_url() ?>";

                //$('#submenu li a').click(function() {
                //$('#submenu li').removeClass('active');    
                //$(this).addClass('active');
                //});   

        // Ajax Slide & Fade Content with jQuery
        $('.more').live('click',function(){
            var href = $(this).attr('href');
            if ($('#ajax').is(':visible')) {
                $('#ajax').css('display','block').animate({height:'1px'}).empty();
            }
            $('#ajax').html('<img class="loader" src="'+baseurl+'assets/img/ajax-loader.gif" alt="">');
            $('#ajax').css('display','block').animate({height:'500px'},function(){
                $('#ajax').load(baseurl +'index.php/andreiaclinicaestetica/content #'+href,function(){
                    $('#ajax').hide().fadeIn();
                    $('#submenu li a').click(function() {
                    $('#submenu li').removeClass('active');    
                    $(this).addClass('active');
                    }); 
                });
            });
            return true;
        });
    });
</script>

This is the view being loaded

    <div class="content" id="page_01">
        <h3>Lorem ipsum dolor</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
    </div>
    <div class="content" id="page_02">
        <ul class="nav nav-tabs" id="submenu">
            <li class="active"><a href="#">Corpo</a></li>
            <li><a href="#">Rosto</a></li>
            <li><a href="#">Depilação</a></li>
            <li><a href="#">Maquilhagem</a></li>
            <li><a href="#">Rádiofrequência Bipolar</a></li>
            <li><a href="#">Spa</a></li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
    </div>
    <div class="content" id="page_03">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
    </div>
    <div class="content" id="page_04">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
    </div>

Div is loaded inside main view div with id=”ajax”.

Im using Codeigniter framework…everything runnning great beside (this).addclass won’t work but removes the class before. Thanks

Answer 1

Target it specifically with $('.more').addClass('active');

Or assign it as a variable to call with something like this:

$('.more').live('click',function(){
            var $this = $(this);
            var href = $this.attr('href');
            if ($('#ajax').is(':visible')) {
                $('#ajax').css('display','block').animate({height:'1px'}).empty();
            }
            $('#ajax').html('<img class="loader" src="'+baseurl+'assets/img/ajax-loader.gif" alt="">');
            $('#ajax').css('display','block').animate({height:'500px'},function(){
                $('#ajax').load(baseurl +'index.php/andreiaclinicaestetica/content #'+href,function(){
                    $('#ajax').hide().fadeIn();
                    $('#submenu li a').click(function() {
                    $('#submenu li').removeClass('active');    
                    $this.addClass('active');
                    }); 
                });
            });
            return true;
        });