Added jQuery UI and JQuery Mobile cdns to project but themes won;t work

Question

<link rel="stylesheet" href="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.css">
<link rel="stylesheet" href="mileTracker.css">

<script src="jQuery/jquery-3.6.0.min.js"></script>
<script src="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.js"></script>
<script src="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"></script>
<script src="mileTracker.js"></script>

<header data-role="header" data-theme="b">
        <h1>Tracker</h1>
</header>

This is code that I have and I just can't seem to get the theme to be applied to the html code.

Answer 1

I have found a solution that allows for the set-up to work, the css links were added after the jQuery mobile css link.

Also when using the jQuery links, the mobile css file was placed first followed by the 2 javascript files, first the jquery.min.js then the jquery.mobile.1.4.5.min.js.

With the js files they were added after the css and in the order listed below.

Also I used a local deployment.

    <link rel="stylesheet" type="text/css"
        href="jQuery/jquery.mobile-1.4.5/demos/css/themes/default/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" type="text/css" href="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.css">    

    <script src="jQuery/jquery.mobile-1.4.5/demos/js/jquery.min.js"></script>
    <script src="jQuery/jquery.mobile-1.4.5/demos/js/jquery.mobile-1.4.5.min.js"></script>
    <script src="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.js"></script>