#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    1
    Rep Power
    0

    $(document).ready(function() not work in AJAX Tabs


    Hi,
    I'm using AJAX tabs to load a page that only contains a javascript called quovolver . The problem is that the quovolver's script doesn't work at all. I've been told that since document is already loaded by the AJAX tabs , there's a conflict when I put another $(document).ready(function() in the quovolver's script. Can anyone please give me some direction on how to tweak the codes to get the script to work? (Can't post links as a new user,sorry for the inconvenience)

    quovolver script:
    Code:
    <script type="text/javascript">
        $(document).ready(function() {
    
            $('blockquote').quovolver();
    
        });
    </script>
    AJAX Tabs script:

    Code:
    var containerId = ‘#tabs-container’;
    var tabsId = ‘#tabs’;
    
    $(document).ready(function(){
    // Preload tab on page load
    if($(tabsId + ‘ LI.current A’).length > 0){
    loadTab($(tabsId + ‘ LI.current A’));
    }
    
    $(tabsId + ‘ A’).click(function(){
    if($(this).parent().hasClass(’current’)){ return false; }
    
    $(tabsId + ‘ LI.current’).removeClass(’current’);
    $(this).parent().addClass(’current’);
    
    loadTab($(this));
    return false;
    });
    });
    
    function loadTab(tabObj){
    if(!tabObj || !tabObj.length){ return; }
    $(containerId).addClass(’loading’);
    $(containerId).fadeOut(’fast’);
    
    $(containerId).load(tabObj.attr(’href’), function(){
    $(containerId).removeClass(’loading’);
    $(containerId).fadeIn(’fast’);
    });
    }
    AJAX HTML:

    Code:
    <ul class="ajaxtabs" id="tabs">
        <li class="current"><a href="./music-list.html">Videos</a></li>
        <li><a href="./tab-2.html">Audio</a></li>
        <li class="third-child"><a href="./tab-3.html">Texte</a></li>
        <li>
            <form id="vod_select_nav">
              <select id="standard-dropdown" name="standard-dropdown" class="bigbox" onchange="window.open(this.options[this.selectedIndex].value,'_top')">
                <option value="index.php?id=48/#" class="test-class-1">NAVIGUER PAR SERIES &amp; EPISODES</option>
                <option value="./tab-2.html">Past. Ghislain Lukunku, Rév. Jacques Maluma &mdash; Alume La Lampe</option>
            <option value="index.php?id=91">Past. Ghislain Lukunku, Rév. Jacques Maluma &mdash; State Of The Church</option>
            <option value="index.php?id=97">Past. Ghislain Lukunku, Rév. Jacques Maluma &mdash; Non Le Feu Ne S'eteindra…</option>
              </select>
            </form> 
        </li>
    </ul>
    <div class="ajaxtabs-container" id="tabs-container">
        Loading. Please Wait...
    </div>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,169
    Rep Power
    184
    Do you have your page linked to the Quovolver Plugin; like so:
    Code:
    <script src="jquery.quovolver.js"></script>
    I have never used this plugin before, but here is a demo page; that you may find helpful:http://www.poseidondiveadventures.co...1.0/index.html. Also, make sure you are linked to the jQuery Library, as well (sounds like something anyone would remember, but it is a simple mistake, that seems to be overlooked quit often).

    Good Luck
    Last edited by web_loone08; January 5th, 2014 at 03:02 AM.

IMN logo majestic logo threadwatch logo seochat tools logo