0

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

João Costa
  • 487
  • 2
  • 6
  • 19
  • 1
    please please don't use live. http://stackoverflow.com/questions/11115864/whats-wrong-with-the-jquery-live-method also if you read the docs on live() you will see it is deprecated and even the jQuery team suggests you use `delegate()` over live for older versions of jQuery (all else use on() method) – rlemon Jul 23 '12 at 12:05
  • 1
    Why is placed the term codeigniter in the title and also inside the tags as well as I wonder how that is related to PHP at all. So what are you asking about? Codeiniter, PHP, jquery, ajax? ?? – hakre Jul 23 '12 at 12:08
  • I used method .on instead of .live, thanks rlemon And hakre, i did put tag codeigniter since its the framework im using, content is a diferent view being loaded, trough ajax.. sorry its first time im using stackoverflow to ask for help... – João Costa Jul 23 '12 at 17:57

1 Answers1

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;
        });
christian.thomas
  • 1,122
  • 1
  • 8
  • 19
  • It still won't work. if i use $('#submenu li').addClass('active'); It turns all '#submenu li' into active, and not only the one i cick thanks – João Costa Jul 23 '12 at 17:47