jQuery Mobile CSS issues

Question

I have a page within jQuery mobile that I have some customized css within the page itself however when I call this page via ajax it doesn't load with the custom css. However if I refresh the page the page loads with the custom css. How can I stop this from happening as I only want the custom css to show when the page is called. My code is below:

<!doctype html>
<html lang="en">
<head>
    <title>Player</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <style>     
        #navgroup {text-align:center;}
        #navgroup div {display:inline-block;}

            .containing-element .ui-slider-switch
        {
            width: 100%;
        }

        input.ui-slider-input {display: none;}

        .slider-shit .ui-btn
        {
            margin-left: -15px;
            margin-top: -15px;
        }

        .slider-shit .ui-slider
        {
            width: 100%;
            top: 3px;
            margin: 0;
            opacity: 1;
        }

        .slider-shit
        {
            padding: 0 20px 0 0;
        }

        .ui-slider div {
            margin:  0 15px 0 38px !important;
        }

        .ui-slider div div {
            margin:  0 !important;
        }

        #posSlider {
             display: none;           
        }

        #nextSong {
            border-right-width: 1px !important;   
            border-bottom-right-radius: inherit;
            border-top-right-radius: inherit;    
        }

        #songOptionsButton {
            position: absolute;
            bottom: 10px;
            right: 10px;
            border-left-width: 1px !important;
            border-bottom-left-radius: inherit;
            border-top-left-radius: inherit;      
        }

        .ui-header .ui-btn-icon-top .ui-btn-inner, .ui-footer .ui-btn-icon-top .ui-btn-inner {
            padding: 37px 20px 0.5em;
        }
    </style>
</head>
<body>
    <!--Player for indivdual and playlist songs-->
    <div data-role="page" data-add-back-btn="true" id="player">
        <div data-role="header" data-position="fixed">
            <h1 id="songName">Nothing Playing...</h1>
            <a href="#" id="favourite" data-role="button" data-icon="star" data-iconpos="notext" class="ui-btn-right">mark as favourite</a>
        </div>
        <div data-role="content" style="height: 100%;" id="songPicture">
        </div>
        <div data-role="footer" data-position="fixed">
            <table style="margin-left: 5px; margin-right: 5px;">
                <tr>
                    <td><p id="songCurrentpos">0:00</p></td>
                    <td width="100%" class="slider-shit"><input type="range" name="slider" id="posSlider" value="0" min="0" max="100" width="100%" data-theme="d" data-highlight="true"/></td>
                    <td><p id="songDuration">0:00</p></td>
                </tr>
            </table>
            <div id="navgroup">
                <div data-role="controlgroup" data-type="horizontal">
                    <a data-role="button" data-iconpos="top" data-icon="back" id="previousSong" data-inline="true">Previous</a>
                    <a data-role="button" data-iconpos="top" data-icon="arrow-r" id="playSong" data-inline="true">Play</a>
                    <a data-role="button" data-iconpos="top" data-icon="forward" id="nextSong" data-inline="true">Next</a>
                    <a href="#songOptionsPage" id="songOptionsButton" data-role="button" data-iconpos="top" data-icon="gear" data-iconpos="notext" data-rel="dialog" data-inline="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                </div>
            </div>
        </div>
    </div>
</body>

score 1 · Accepted Answer · edited May 23 '17 at 12:28

If I understood you correctly, you are using ajax to load this page into the DOM? If this is true then I understand your problem. You see, when ajax is used for page loading only BODY content is loaded into the DOM.

You can fix your problem if you load your css inside a first HTML file or move your STYLE block inside a BODY content.

Here's an example how you can include your styles inside a BODY block:

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>  
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <style>
        #content-test {
            background: red !important;
        }
    </style>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="index3.html#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content" id="content-test">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>  
</body>
</html>

Also, I have described this problem in my other answer with more details and few examples: https://stackoverflow.com/a/15431229/1848600

Yes you described it great however how can I move it to the body of the content? — Kern Elliott, Mar 31 '13 at 21:23
I will make you an example, in a mean time take a look at my other answer that describes this problem + examples: http://stackoverflow.com/a/15431229/1848600 — Gajotres, Mar 31 '13 at 21:24
putting the style in the first page worked. I never knew that is how ajax worked very interesting so I am guessing the additional headers I have in my other html files is just wasted code then if its loading via ajax — Kern Elliott, Mar 31 '13 at 23:13

jQuery Mobile CSS issues

1 Answers1