JQuery UI not detecting CSS styles when loading via php

Question

I'm using JQuery UI to generate and load a tab when the user clicks a button using advice from this question that I asked earlier. It loads the data fine, but it is not applying the CSS styles that were present when the page was static.

function createTab2() {
       // this will add a tab
       $("#tabs").tabs("add","#tabs-2","1: Population Density");     
       $("#tabs-2").load('tabs/tab2.php');
       $('#tabs').tabs('select', "#tabs-2");           
}

My original static file contained the following:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab One</a></li>
        <li><a href="#tabs-2">Tab Two</a></li>      
    </ul>
    <div id="tabs-1" style="height:300px;">     <!-- Start Tab 1 -->                
            <form >
                <div id="radio-b1">
                    <input type="radio" id="b1" name="type" value="1"   /><label for="b1">Radio Button 1</label>                        
                </div>
            </form>     
    </div>      <!-- End Tab 1 -->  

    <div id="tabs-2" style="height:250px;">     <!-- Start Tab 2 -->
            <form >
                <div id="radio-p1">
                    <input type="radio" id="radio4" name="pop_den_1" value="1"  /><label for="radio4">Radio Button 2</label>                            
                </div>
            </form>

    </div>      <!-- End Tab 2 -->

I replaced Tab 2 with a button that called the javascript function createTab2() and saved the following code in tab2.php:

<div >          
        <form >
            <div id="radio-p1">
                <input type="radio" id="radio4" name="pop_den_1" value="1"  /><label for="radio4">Radio Button 2</label>                            
            </div>
        </form>             
</div>      <!-- End Tab 2 -->

I don't fully understand if I need to be adding properties to #tab-2 when I create it (such as setting an id value, or other properties.

#tabs-2 means the styles get applied to an element with the id "tabs-2" JQuery imitates CSS selectors so it means the same thing. — Erik Reppen
– Erik Reppen, Commented Apr 2, 2012 at 21:29
Is it necessary to re-apply a style to an object using the object name? I'm unclear why the contents of the tab are not displayed in the same way. — djq
– djq, Commented Apr 2, 2012 at 21:32
CSS is evergreen. JS hits the object so if it gets replaced you'll need to reapply anything applied by JS even if it has the same ID. You can apply to a style sheet with JS (making the style apply to elements it matches as they appear) but it's generally easier to just scoop HTML in and out of a container with the ID/class you want to hit. — Erik Reppen
– Erik Reppen, Commented Apr 2, 2012 at 21:52
I don't quite follow. So I can just re-apply all the styles? I would prefer this as I want all the contents of the tab to appear on demand. — djq
– djq, Commented Apr 2, 2012 at 21:58
If you're just doing .hide and .show, then sure. If it's multiple styles, you should tack them on to a class which you could set styles for in CSS like this: .activeTab { display:block; } Then just add/remove classes with JQuery instead of setting styles with JS/JQ. — Erik Reppen
– Erik Reppen, Commented Apr 2, 2012 at 22:43

Abid · Accepted Answer · 2012-04-02 21:33:01Z

1

The javascript function that you wrote wont automatically add styling to your elements. It will only use the styling that are there in the included jqueryui.css. I see you only have one style line in the tabs-2 in your static markup if this is the only style you want to apply to it you should just write a single js line to add this style.

This is the line that you have in your tab-2 style

style="height:250px;"

to apply this style you can do it the following way

$("#tabs-2").css("height", "250px");

do this before loading the tab or before calling the select on tabs-2

answered Apr 2, 2012 at 21:33

Abid

7,25710 gold badges46 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

djq Over a year ago

Thanks Abid - I'm starting to understand. I actually just want the JQuery UI css to show but it is not doing that (and it is more than one line). It is applied to Tab 1 ok, but not Tab 2.

Collectives™ on Stack Overflow

JQuery UI not detecting CSS styles when loading via php

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related