0

I am writing a site in PHP and I have written an index page that swaps its content tag. When I include the default.php inside of the The button is not being styled.

Jquery UI works properly everywhere else in the site however the buttons and icons do not work.

Here is the index code that switches the page

<?php
    include_once 'config.php';
    session_start();
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >

    <title><?php echo $siteName; ?></title>
    <link href="css/themes/<?php echo $theme; ?>" rel="stylesheet" type="text/css"/>
    <link href="<?php echo $jqCSS;?>" rel="stylesheet" type="text/css"/>
    <script src="<?php echo $jsCommon;?>"></script> 
    <script src="<?php echo $jqJS;?>"></script>
    <script src="<?php echo $jqJSUI;?>"></script>


</head>

<body>

<div class="header">
    <?php include 'menu.php';?>
</div>  
<div class="content" id="main_content"><br/><br/>
    <?php 
        $page = $_SESSION['currentpage'];
        echo $page;
        switch ($page)
        {
            case 'messaging':
                include 'controls/shared/messaging/messaging.php';
                break;
            default:
                include 'pages/default.php';
                break;
        }       
    ?>
</div>

<div class="footer">
</div>
<div id="myLogin" title="Login"></div>
<div id="myForgotPass" title="Forgot Password"></div>
<div id="myReg" title="Register"></div>

Here is the Default.php that is loaded after the check

<?php 
 session_start();
$_SESSION['currentpage'] = 'default';

?>
<br/><br/>
<h1>Default</h1>

<button id="button">Test Button</button>

Here is the javascript i'm using to determine this is a button:

$('#button').button();

When I look at the code in firebug its showing that it is under the content class. I can style the button using the content class however I want it to use the theme that is from the jquery ui.

Thanks.

Darkside
  • 1
  • Check jQuery UI CSS files , it might be corrupted or missing – Seder Feb 11 '13 at 21:52
  • I thought that however all the other dialogs and tabs all function properly even nested inside other places. – Darkside Feb 11 '13 at 21:53
  • Is the css attributes applied check console maybe the button have another CSS – Seder Feb 11 '13 at 21:54
  • The JQuery has properly added everything for the dialogs however it is applying no styles to the buttons even when calling it a button. For some reason its ignoring the buttons completely. I have even linked it to the google css testing that theory everything else works as expected it just hates icons and buttons. Its adding it to the class I made in my css and not applying the JQuery classes – Darkside Feb 11 '13 at 21:56
  • Maybe the images is not there or there is something else applied to buttons – Seder Feb 11 '13 at 21:57
  • Sorry was making an edit as you posted. What its doing is using the
    and not applying the jquery classes
     – Darkside Feb 11 '13 at 21:58
  • Did you try with $.ready? – talabes Feb 11 '13 at 22:00
  • create a demo in jsfiddle.net that replicates problem – charlietfl Feb 11 '13 at 22:06
  • I'm still learning JQuery at the moment not sure how I would use it. I am guessing $(document).ready(function(){ $('#button').button();}); However this doesn't work it still just applies
    and not the jquery ui
     – Darkside Feb 11 '13 at 22:06

1 Answers1

0

I figured it out.

The biggest issue is that my own custom.js file was being called before jquery was called so jquery wasn't even loaded when trying to make a button.

Once I did that I used $('button').button(); and it started to work properly.

Darkside
  • 1