CODEWITHSUNDEEP
google-apps-scriptjquery-mobile
TulsaNewbie
TulsaNewbie

Reputation: 401

Google Apps Script not loading jquery mobile css

I'm trying to learn to use jquery mobile with Google Apps Script, and my hosted page isn't loading the CSS for it, it seems like. This code should have a gray header and footer bar, and if I copy and paste the dev data-page section, it should still only show up once. Neither of those things happen.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>Testing</h1>
      </div>
      <div data-role="main" class="ui-content">
        <h1>Hello, World!</h1>
        <p>Welcome to my page</p>
      </div>
      <div data-role="footer">
        <h2>Testing More</h2>
      </div>
    </div>
  </body>
</html>

What am I missing to make this work?

Note: I also tried with jquery 2.2.4 instead of 3.4.1.. no difference...

Upvotes: 0

Views: 141

Answers (2)

Cooper
Cooper

Reputation: 64140

I think you should be using .ui-header or .ui-footer there are only two instances in the css that use data-role and they are here .ui-mobile [data-role=page],.ui-mobile [data-role=dialog],.ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0 } if you add .ui-header {background-color:gray } to the css then the background of the header is gray.

You can see all of this very clear if you view sources and prettify the code in Chrome Developer Tools

enter image description here

Upvotes: 0

TulsaNewbie
TulsaNewbie

Reputation: 401

Figured it out... it's two part:

First, the hosted version of jquery mobile is 1.4.5, which is still incompatible with jquery 3.

Second, jquery has to be loaded BEFORE jquery mobile, so it had to go above it on the page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">

Upvotes: 2

Related Questions