Simple theme setting in Angular not working - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 4 replies, has 2 voices, and was last updated by flounder48 9 years, 9 months ago.

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

Author

Simple theme setting in Angular not working Posts

December 29, 2014 at 7:57 pm Simple theme setting in Angular not working #64798

Participant

I feel really stupid because this is about as basic as you can get but it is not working. Obviously it is a simple error someplace but I cannot find it. The theme “orange” is not applied as desired. Here is my snippet:

<link href="/css/color_theme/earth.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/css/site.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/css/jqx.base.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/css/jqx.orange.css" media="screen" rel="stylesheet" type="text/css" >

      <!-- load js functions for standard layout -->
      <script type="text/javascript" src="http://okf/js/lib/jquery-1.11.1.min.js"></script>
      <script type="text/javascript" src="http://okf/js/lib/angular.js" charset="utf-8"></script>
      <script type="text/javascript" src="http://okf/js/lib/jqWidgets/jqxcore.js" charset="utf-8"></script>
      <script type="text/javascript" src="http://okf/js/lib/jqWidgets/jqxbuttons.js" charset="utf-8"></script>
      <script type="text/javascript" src="http://okf/js/lib/jqWidgets/jqxmenu.js" charset="utf-8"></script>
      <script type="text/javascript" src="http://okf/js/lib/jqWidgets/jqxangular.js" charset="utf-8"></script>
      <script type="text/javascript" src="http://okf/js/my/site.js"></script>
    </head>
    
    <body class="bg_color_main_lt" data-ng-app="okfApp">
    <div id="wrapper">
    <div id="page-header">
        <div id="page-title"><span>O</span>ur<span>K</span>in<span>F</span>olk.com</div>
        <div id="page-tagline">A Community Resource for Sharing Family Information</div>
    </div>
    <div>
    	<jqx-button jqx-theme="orange">My Button</jqx-button>
    </div>
    <nav id="bar-menu" class="bg_color_cont_md" data-ng-controller="menuController">
		<jqx-menu jqx-theme="orange">
			<ul>
				<li><a href="http://okf/">Home</a></li>
				<li><a href="#">Search</a>
					<ul>
						<li><a href="#">Individual</a></li>
						<li><a href="#">Member</a></li>
					</ul>
				</li>
				<li><a href="#">Membership</a></li>
				<li><a href="#">Contact Us</a></li>
				<li><a href="#">Links</a></li>
				<li><a href="#">Management</a></li>
				<li><a href="#">Login</a></li>
			</ul>
		</jqx-menu>
	</nav>

December 29, 2014 at 11:18 pm Simple theme setting in Angular not working #64801

Peter Stoev

Keymaster

Hi flounder48,

Strings in AngularJS are expected to be in ” i.e jqx-theme=”‘orange'”, not jqx-theme=”orange” because orange is expected to be String.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

December 30, 2014 at 12:15 am Simple theme setting in Angular not working #64803

flounder48

Participant

I apologize for being obtuse but the characters are not that clear in my browser. Are you saying that the string, “orange” in this case, must be within single quotes that are within double quotes? When I try that it still does not work.

December 30, 2014 at 9:19 am Simple theme setting in Angular not working #64817

Peter Stoev

Keymaster

Hi flounder48,

jqx-theme=”‘orange’” If you do that it will work.

Working demo below:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.orange.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            // init DropDownList's settings object.
            $scope.dropDownListSettings =
                {
                    width: 200,
                    height: 30,
                    animationType: 'fade',
                    autoDropDownHeight: true,
                    selectedIndex: 0,
                    displayMember: "name",
                    valueMember: "id",
                    source: [{
                        id: 1,
                        name: "Pedro",
                        age: 13
                    }, {
                        id: 2,
                        name: "Clara",
                        age: 22
                    }, {
                        id: 3,
                        name: "John",
                        age: 33
                    }, {
                        id: 4,
                        name: "Pier",
                        age: 27
                    }],
                    select: function (event) {
                        alert(event.args.item.label);
                    }
                }
            $scope.click = function () {
                $scope.dropDownListSettings =
               {
                   width: 200,
                   height: 30,
                   animationType: 'fade',
                   autoDropDownHeight: true,
                   selectedIndex: 0,
                   displayMember: "name",
                   valueMember: "id",
                   source: [{
                       id: 1,
                       name: "Pedro",
                       age: 13
                   }, {
                       id: 2,
                       name: "Clara",
                       age: 22
                   }, {
                       id: 3,
                       name: "John",
                       age: 33
                   }, {
                       id: 4,
                       name: "Pier",
                       age: 27
                   }],
                   select: function (event) {
                       alert(event.args.item.label);
                   }
               }
            }
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-drop-down-list jqx-theme="'orange'" jqx-settings="dropDownListSettings"></jqx-drop-down-list>
        <jqx-button ng-click="click()">Click</jqx-button>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

December 30, 2014 at 3:19 pm Simple theme setting in Angular not working #64846

flounder48

Participant

After making the changes you suggested it still did not work. In desperation I downloaded a fresh version of angular.js and now it works fine. Thanks for the help, I had forgotten the rule about angular strings!

Author

Posts

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

You must be logged in to reply to this topic.