Question

link to page exhibiting problem

hi,
My jq script, assembled from tuts on the web, is being overridden by the main tabbing jQ and its associated styling. This is the part of my script that is being overridden $(reff2+' li:first').addClass('ui-tabs-selected'); The rest of the script below:

$(document).ready(function() {

    $("#propagin a").live('click', function(eve) {
        eve.preventDefault();

        var link = $(this).attr('href');
        var reff = $(this).attr('href').replace(/^.*?(\d+)\/.*$/g, "$1");
        var reff2 = '#fragment-' + reff ;

        $.ajax({
            url: link,
            type: "GET",
            dataType: "html",
            success: function(html) {
                $(reff2).html(html);
            }
        });

        $(reff2 + ' li:first').addClass('ui-tabs-selected');
    });
});

The behaviour I want is that the first sub-tab should be selected or in other words have the correct class assigned to it by my jq script. Clicking the pagination links brings into view the right set of new sub-tabs which means that the ajax part of my script is working. But the first sub-tab of the new set doesn’t have the right class e.g ui-tabs-selected.

You can see the process unfolding in the browser. The new set of sub-tabs appears on clicking the pagination links, and for a moment the first sub-tab is correctly styled, before the more senior tabbing jq with its styling kicks in and removes the style that I want.

What can I do about this that doesn’t clobber the senior jquery and its associated CSS which together make possible the slightly convoluted tabbing scheme that I have ?

Tom

Answer 1

Much of the code in the page you provided is still linking to localhost.

    <link type="text/css" href="http://localhost/gopag//css/ui.tabs.css" rel="stylesheet"> 
    <link type="text/css" href="http://localhost/gopag//css/nested-jquery-yui.css"  rel="stylesheet"> 

Once those are fixed, then it’ll be easier to see what the issues might be.

You may also want to fix the #propagin div – having three divs with the same ID can cause unpredictable behaviour (each element should have a unique id). You can either change the div to a class (and update your CSS/jQuery to .propagin), or have ids like #propagin1, #propagin2 etc.

EDIT:

Hi Tom,
Sorry I wasn’t able to get back to you right away. I scraped a copy of your website and found the same issue you had, until I moved the addClass inside the $.ajax function. The style applied properly after that:

$.ajax({
    url: link,
    type: "GET",
    dataType: "html",   
    success: function(html){
        $(reff2).html(html);
        $(reff2 + ' li:first').addClass('ui-tabs-selected');
    }
}); 

Hopefully, that works for you.