No themes - but no obvious errors - Javascript, HTML5, jQuery Widgets

This topic contains 2 replies, has 2 voices, and was last updated by DavidRa 11 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

No themes, but no obvious errors Posts

March 13, 2013 at 2:20 pm No themes, but no obvious errors #16977

Member

I’m trying to get started with jqWidgets for a personal project (not a publicly accessible web server, but might eventually be a “product” if I can get it all working). I figured the best thing to do was set up the admin web site the way I want it – but I can’t get any styles to apply. I started with the “UI Start” theme but common behaves the same way.

I’m reasonably sure the HTML is valid, but it’s worth checking:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta charset="UTF-8">
    <title>Tree View</title>
    <link rel="stylesheet" href="/js/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="/js/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/js/jqxcore.js"></script>
    <script type="text/javascript" src="/js/jqx-all.js"></script>
    <script type="text/javascript" >
        $('#jqxTree').jqxTree({ height: '400px', width: '300px', theme: 'classic' });
    </script>
</head>
<body class="default" style="margin: 0px; align: center;">
  <div style="border: none;" id="jqxTree">
    <ul>
      <li id="Root1" item-expanded="true">
        <img style="float: left; margin-right: 5px;" src="/images/folder.png" /><span item-title="true">Root Item 1</span>
        <ul>
          <li id="Root1Item1">
            <img style="float: left; margin-right: 5px;" src="/images/folder.png" /><span item-title="true">Root 1 Child 1</span>
          </li>
          <li id="Root1Item2">
            <img style="float: left; margin-right: 5px;" src="/images/folder.png" /><span item-title="true">Root 1 Child 2</span>
          </li>
        </ul>
      </li>
      <li id="Root2" item-expanded="true">
        <img style="float: left; margin-right: 5px;" src="/images/folder.png" /><span item-title="true">Root 2</span>
        <ul>
          <li id="Root2Item1">
            <img style="float: left; margin-right: 5px;" src="/images/folder.png" /><span item-title="true">Root 2 Child 1</span>
          </li>
          <li id="Root2Item2">
            <img style="float: left; margin-right: 5px;" src="/images/folder.png" /><span item-title="true">Root 2 Child 2</span>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>
</html>

There are no errors in the web server log and Firefox debugger shows all items load successfully (and the folder icon is shown). The styles folder is located under /js/styles, so the relative path of styles to the JS is the same. I see the folder icons – but no colours, it’s the default typeface etc. So I know I’ve done something silly – but I can’t for the life of me work out what.

Any pointers?

March 13, 2013 at 2:26 pm No themes, but no obvious errors #16983

Peter Stoev

Keymaster

Hi DavidRa,

The page is missing

<!DOCTYPE html>

In addition, the widgets are expected to be initialized in the:

   <script type="text/javascript">
        $(document).ready(function () {

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 13, 2013 at 2:53 pm No themes, but no obvious errors #16990

DavidRa

Member

Oh for crying out loud … see I said it’d be obvious. Thanks!

(Related memo to self: Stop trying to write code at 2 in the morning)

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.