jQuery UI Widgets Forums Plugins AngularJS Simple theme setting in Angular not working

Tagged: ,

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

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

  • flounder48
    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>
    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/

    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.


    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/


    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!

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

You must be logged in to reply to this topic.