CODEWITHSUNDEEP
javascriptjquerycssjquery-mobiledatebox
user3889963
user3889963

Reputation: 477

jQuery mobile Datebox CSS not loading properly

I have a simple two page website developed using jQuery mobile framework. I had the need to use Datebox plugin for selection of times. Both pages of my website are in the same .php file separated by divs with data-role="page" appropriately.

My only problem is that if the datebox exists in the first page of the webpage, it loads properly, but in any other page, its icons are messed up.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Home</title> 
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link href="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.css" rel="stylesheet" type="text/css">
    <script src="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.js" type="text/javascript"></script>


</head> 
<body> 

    <div data-role="page" id="index">
        <header data-role="header" data-position="fixed">
            <h1>Home</h1>
        </header>

        <div data-role="main" class="ui-content">
            <div class="ui-field-contain">
                <label for="datebox">Time (seconds)</label>
                <input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
            </div>
        </div>

        <footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a">
            <div data-role="navbar">
                <ul>
                    <li><a href="#index" data-direction="reverse" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-active ui-state-persist">Home</a></li>
                    <li><a href="#onoff" class="ui-btn ui-icon-plus ui-btn-icon-left">ON/OFF</a></li>
                    <li><a href="#timer" class="ui-btn ui-icon-plus ui-btn-icon-left">Timer</a></li>
                    <li><a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Scheduler</a></li>
                </ul>
            </div>
        </footer> 
    </div>

    <div data-role="page" id="onoff">
        <header data-role="header" data-position="fixed">
            <h1>ONOFF</h1>
        </header>

        <div data-role="main" class="ui-content">

            <div class="ui-field-contain">
                <label for="datebox">Time (seconds)</label>
                <input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
            </div>
        </div>

        <footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a">
            <div data-role="navbar">
                <ul>
                    <li><a href="#index" class="ui-btn ui-icon-plus ui-btn-icon-left">Home</a></li>
                    <li><a href="#onoff" data-direction="reverse" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-active ui-state-persist">ON/OFF</a></li>
                    <li><a href="#timer" class="ui-btn ui-icon-plus ui-btn-icon-left">Timer</a></li>
                    <li><a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Scheduler</a></li>
                </ul>
            </div>
        </footer>

    </div>

</body>
</html>

The following images show the issue. On page load, the first div with page-role="page" and id="index" is loaded and the datebox icon works as intended:

Home Page

But if I navigate to the second page using the footer navbar ON/OFF tab, I get this weird icon placement:

ON/OFF page

Please help me figure out what is going wrong here.

Upvotes: 2

Views: 295

Answers (3)

Andy Donegan
Andy Donegan

Reputation: 915

user3889963 hit the nail on the head.

Download the source files for JQM for Datebox and then call them directly within your head.

<script src="../jtsage-datebox.min.js" type="text/javascript"></script>
<link href="../jtsage-datebox.min.css" rel="stylesheet">

This previous question shows there is a problem with using the plugin via the CDN Jquery Mobile DateBox plugin only working when linked directly to page

Here is it working with the files installed directly. enter image description here

Upvotes: 0

user3889963
user3889963

Reputation: 477

Hmm, I'm not sure why this is but using local files instead of the CDN links in the head enabled me to use the datebox plugin across pages. The files were generated using the download builder found here:

http://dev.jtsage.com/DateBox/builder/

Upvotes: 1

Andy Donegan
Andy Donegan

Reputation: 915

Unique Naming is the problem.

Within both pages you are calling the datebox item by the same name, so only the first one gets styled correctly.

Just rename the second page as datebox2 this should fix the problem. As the label for searches for the first unique ID of "datebox" and styles that one.

<div data-role="main" class="ui-content">
            <div class="ui-field-contain">
                <label for="datebox2">Time (seconds)</label>
                <input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
            </div>
        </div>

Upvotes: 0

Related Questions