jQWidgets Forums
jQuery UI Widgets › Forums › Plugins › AngularJS › jqxtabs-angularJS Issue
Tagged: angularjs tabs
This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 9 years, 2 months ago.
Viewing 4 posts - 1 through 4 (of 4 total)
-
Authorjqxtabs-angularJS Issue Posts
-
Hi,
I had issue using jqx-validator, jqx-input and jqx-passwordinput with in angular SPA and it didn’t work for <div ng-view></div> in index page. I then changed <div ng-view></div> to <ng-view></ng-view> in index.html. It then rendered the corresponding html page (authEnticate.html) with the above jqx controls.
Now i have problem rendering html page (custMaterials.html) with jqx-tabs with in <ng-view></ng-view> of my index.html page. It just displays the content and not the tabs.
Please find the code below.
Thanks,
Keshavanindex.html ---------- <!DOCTYPE html> <html ng-app="mainApp" lang="en"> <head> <title id='Description'>The demo demonstrates the Minimized state of jqxMenu.</title> <link rel="stylesheet" type="text/css" href="/angularjs/jQWidgets/jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="/angularjs/jQWidgets/scripts/jquery-1.11.1.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxtabs.js"></script> <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/mainApp.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/authApp.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/demoApp1.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/menuController.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/mainCtrl.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxvalidator.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/authController.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxpasswordinput.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/register.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/logIn.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/logOut.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/scripts/demos.js"></script> <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/globalization/globalize.js"></script> <script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script> </head> <body ng-controller="mainCtrl"> <div ng-controller="menuController"> <jqx-menu jqx-on-itemclick="itemclick(event)" jqx-settings="menuSettings"> <ul> <li><a ui-sref="Quotations">Quotations</a></li> <li><a ui-sref="Messages">Messages</a></li> <li><a ui-sref="Logout">Logout</a></li> </ul> </jqx-menu> <jqx-check-box ng-model="checked " ng-change="changeState($event) ">Minimized</jqx-check-box> <br/> <ui-view></ui-view> </div> </body> </html> authEnticate.html <!DOCTYPE html> <html ng-app="authApp" lang="en"> <head> <title id="Description">jqxInput directive for AngularJS</title> <link rel="stylesheet" type="text/css" href="/angularjs/jQWidgets/jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="/angularjs/jQWidgets/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcore.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/authApp.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/mainApp.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/demoApp1.js"></script> <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/globalization/globalize.js"></script> <script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script> </head> <body> <div style="overflow: hidden;"> <form jqx-validator jqx-settings="validatorSettings"> <jqx-input ng-model="email" jqx-width="200" jqx-height="25" id="emailInput" placeholder="'Enter your eMail Id'"> </jqx-input>{{email}} <br /> <br /> <jqx-password-input ng-model="password" jqx-width="200" jqx-height="25" type="password" placeholder="'Enter your Password'" id="passwordInput"></jqx-password-input> <br /> <jqx-toggle-button jqx-settings="settings" ng-click="register()">register</jqx-toggle-button> <jqx-toggle-button jqx-settings="settings" ng-click="logIn()">logIn</jqx-toggle-button> <jqx-toggle-button jqx-settings="settings" ng-click="logOut()">logOut</jqx-toggle-button> </form> </div> <div ng-if="error" <strong> error !! {{error}}</strong> </div> <div ng-if="authData" <strong> success !! UID : {{ authData.uid }}</strong> </div> </body> </html> custMaterials.html ------------------ <!DOCTYPE html> <html ng-app> <head> <title id="Description">jqxTabs Directive for AngularJS</title> <meta name="description" content="AngularJS Tabs example. This demonstrates Tabs widget built with AngularJS" /> <link rel="stylesheet" type="text/css" href="/angularjs/jQWidgets/jqwidgets/styles/jqx.base.css" /> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/scripts/demos.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/mainApp.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/authApp.js"></script> <script type="text/javascript" src="/angularjs/jQWidgets/demoApp1.js"></script> <script type="text/javascript"> // var demoApp1 = angular.module("demoApp1", ["jqwidgets"]); angular.module("demoApp1").controller("demoController1", function ($scope) { var people = new Array(); var firstNames = ["Bed Room", "Living", "Dining", "Kitchen", "Children", "Sitout", "Bath Room" ,"Car", "Bike"]; var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"]; var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"]; var titleofcourtesy = ["Ms.", "Dr.", "Ms.", "Mrs.", "Mr.", "Mr.", "Mr.", "Ms.", "Ms."]; var birthdate = ["08-Dec-48", "19-Feb-52", "30-Aug-63", "19-Sep-37", "04-Mar-55", "02-Jul-63", "29-May-60", "09-Jan-58", "27-Jan-66"]; var hiredate = ["01-May-92", "14-Aug-92", "01-Apr-92", "03-May-93", "17-Oct-93", "17-Oct-93", "02-Jan-94", "05-Mar-94", "15-Nov-94"]; var address = ["507 - 20th Ave. E. Apt. 2A", "908 W. Capital Way", "722 Moss Bay Blvd.", "4110 Old Redmond Rd.", "14 Garrett Hill", "Coventry House", "Miner Rd.", "Edgeham Hollow", "Winchester Way", "4726 - 11th Ave. N.E.", "7 Houndstooth Rd."]; var city = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "London", "London", "Seattle", "London"]; var postalcode = ["98122", "98401", "98033", "98052", "SW1 8JR", "EC2 7JR", "RG1 9SP", "98105", "WG2 7LT"]; var country = ["USA", "USA", "USA", "USA", "UK", "UK", "UK", "USA", "UK"]; var homephone = ["(206) 555-9857 FREE", "(206) 555-9482 FREE", "(206) 555-3412 FREE", "(206) 555-8122 FREE", "(71) 555-4848", "(71) 555-7773", "(71) 555-5598", "(206) 555-1189 FREE", "(71) 555-4444"]; for (var i = 0; i < firstNames.length; i++) { var row = {}; row["firstname"] = firstNames[i]; row["lastname"] = lastNames[i]; row["title"] = titles[i]; row["titleofcourtesy"] = titleofcourtesy[i]; row["birthdate"] = birthdate[i]; row["hiredate"] = hiredate[i]; row["address"] = address[i]; row["city"] = city[i]; row["postalcode"] = postalcode[i]; row["country"] = country[i]; row["homephone"] = homephone[i]; // row["url"] = "../../../images/" + firstNames[i].toLowerCase() + ".png"; people[i] = row; } $scope.people = people; }); </script> </head> <body> <div> <jqx-tabs jqx-width="'800px'" jqx-height="'200px'"> <ul> <li style="margin-left: 30px;">{{people[0].firstname}}</li> <li>{{people[1].firstname}}</li> <li>{{people[2].firstname}}</li> <li>{{people[3].firstname}}</li> <li>{{people[4].firstname}}</li> <li>{{people[5].firstname}}</li> <li>{{people[6].firstname}}</li> <li>{{people[7].firstname}}</li> <li>{{people[8].firstname}}</li> </ul> <div> <div style="margin: 15px;"> <div style="float: left; width: 15%;"> <div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div> <div style='margin-top: 10px;'> <img height="60" ng-src={{people[0].url}}> </div> </div> <div style="float: left; width: 45%;"> <div style='margin: 10px;'><b>First Name:</b>{{people[0].firstname}}</div> <div style='margin: 10px;'><b>Last Name:</b>{{people[0].lastname}}</div> <div style='margin: 10px;'><b>Title:</b>{{people[0].title}}</div> <div style='margin: 10px;'><b>Address:</b>{{people[0].address}}</div> </div> <div style="float: left; width: 40%;"> <div style='margin: 10px;'><b>Postal Code:</b>{{people[0].postalcode}}</div> <div style='margin: 10px;'><b>City:</b>{{people[0].city}}</div> <div style='margin: 10px;'><b>Phone:</b>{{people[0].homephone}}</div> <div style='margin: 10px;'><b>Hire Date:</b>{{people[0].hiredate}}</div> </div> </div> </div> <div> <div style="margin: 15px;"> <div style="float: left; width: 15%;"> <div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div> <div style='margin-top: 10px;'> <img height="60" ng-src={{people[1].url}}> </div> </div> <div style="float: left; width: 45%;"> <div style='margin: 10px;'><b>First Name:</b>{{people[1].firstname}}</div> <div style='margin: 10px;'><b>Last Name:</b>{{people[1].lastname}}</div> <div style='margin: 10px;'><b>Title:</b>{{people[1].title}}</div> <div style='margin: 10px;'><b>Address:</b>{{people[1].address}}</div> </div> <div style="float: left; width: 40%;"> <div style='margin: 10px;'><b>Postal Code:</b>{{people[1].postalcode}}</div> <div style='margin: 10px;'><b>City:</b>{{people[1].city}}</div> <div style='margin: 10px;'><b>Phone:</b>{{people[1].homephone}}</div> <div style='margin: 10px;'><b>Hire Date:</b>{{people[1].hiredate}}</div> </div> </div> </div> <div> <div style="margin: 15px;"> <div style="float: left; width: 15%;"> <div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div> <div style='margin-top: 10px;'> <img height="60" ng-src={{people[2].url}}> </div> </div> <div style="float: left; width: 45%;"> <div style='margin: 10px;'><b>First Name:</b>{{people[2].firstname}}</div> <div style='margin: 10px;'><b>Last Name:</b>{{people[2].lastname}}</div> <div style='margin: 10px;'><b>Title:</b>{{people[2].title}}</div> <div style='margin: 10px;'><b>Address:</b>{{people[2].address}}</div> </div> <div style="float: left; width: 40%;"> <div style='margin: 10px;'><b>Postal Code:</b>{{people[2].postalcode}}</div> <div style='margin: 10px;'><b>City:</b>{{people[2].city}}</div> <div style='margin: 10px;'><b>Phone:</b>{{people[2].homephone}}</div> <div style='margin: 10px;'><b>Hire Date:</b>{{people[2].hiredate}}</div> </div> </div> </div> <div> <div style="margin: 15px;"> <div style="float: left; width: 15%;"> <div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div> <div style='margin-top: 10px;'> <img height="60" ng-src={{people[3].url}}> </div> </div> <div style="float: left; width: 45%;"> <div style='margin: 10px;'><b>First Name:</b>{{people[3].firstname}}</div> <div style='margin: 10px;'><b>Last Name:</b>{{people[3].lastname}}</div> <div style='margin: 10px;'><b>Title:</b>{{people[3].title}}</div> <div style='margin: 10px;'><b>Address:</b>{{people[3].address}}</div> </div> <div style="float: left; width: 40%;"> <div style='margin: 10px;'><b>Postal Code:</b>{{people[3].postalcode}}</div> <div style='margin: 10px;'><b>City:</b>{{people[3].city}}</div> <div style='margin: 10px;'><b>Phone:</b>{{people[3].homephone}}</div> <div style='margin: 10px;'><b>Hire Date:</b>{{people[3].hiredate}}</div> </div> </div> </div> <div> <div style="margin: 15px;"> <div style="float: left; width: 15%;"> <div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div> <div style='margin-top: 10px;'> <img height="60" ng-src={{people[4].url}}> </div> </div> <div style="float: left; width: 45%;"> <div style='margin: 10px;'><b>First Name:</b>{{people[4].firstname}}</div> <div style='margin: 10px;'><b>Last Name:</b>{{people[4].lastname}}</div> <div style='margin: 10px;'><b>Title:</b>{{people[4].title}}</div> <div style='margin: 10px;'><b>Address:</b>{{people[4].address}}</div> </div> <div style="float: left; width: 40%;"> <div style='margin: 10px;'><b>Postal Code:</b>{{people[4].postalcode}}</div> <div style='margin: 10px;'><b>City:</b>{{people[4].city}}</div> <div style='margin: 10px;'><b>Phone:</b>{{people[4].homephone}}</div> <div style='margin: 10px;'><b>Hire Date:</b>{{people[4].hiredate}}</div> </div> </div> </div> <div> <div style="margin: 15px;"> <div style="float: left; width: 15%;"> <div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div> <div style='margin-top: 10px;'> <img height="60" ng-src={{people[5].url}}> </div> </div> <div style="float: left; width: 45%;"> <div style='margin: 10px;'><b>First Name:</b>{{people[5].firstname}}</div> <div style='margin: 10px;'><b>Last Name:</b>{{people[5].lastname}}</div> <div style='margin: 10px;'><b>Title:</b>{{people[5].title}}</div> <div style='margin: 10px;'><b>Address:</b>{{people[5].address}}</div> </div> <div style="float: left; width: 40%;"> <div style='margin: 10px;'><b>Postal Code:</b>{{people[5].postalcode}}</div> <div style='margin: 10px;'><b>City:</b>{{people[5].city}}</div> <div style='margin: 10px;'><b>Phone:</b>{{people[5].homephone}}</div> <div style='margin: 10px;'><b>Hire Date:</b>{{people[5].hiredate}}</div> </div> </div> </div> <div> <div style="margin: 15px;"> <div style="float: left; width: 15%;"> <div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div> <div style='margin-top: 10px;'> <img height="60" ng-src={{people[6].url}}> </div> </div> <div style="float: left; width: 45%;"> <div style='margin: 10px;'><b>First Name:</b>{{people[6].firstname}}</div> <div style='margin: 10px;'><b>Last Name:</b>{{people[6].lastname}}</div> <div style='margin: 10px;'><b>Title:</b>{{people[6].title}}</div> <div style='margin: 10px;'><b>Address:</b>{{people[6].address}}</div> </div> <div style="float: left; width: 40%;"> <div style='margin: 10px;'><b>Postal Code:</b>{{people[6].postalcode}}</div> <div style='margin: 10px;'><b>City:</b>{{people[6].city}}</div> <div style='margin: 10px;'><b>Phone:</b>{{people[6].homephone}}</div> <div style='margin: 10px;'><b>Hire Date:</b>{{people[6].hiredate}}</div> </div> </div> </div> <div> <div style="margin: 15px;"> <div style="float: left; width: 15%;"> <div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div> <div style='margin-top: 10px;'> <img height="60" ng-src={{people[7].url}}> </div> </div> <div style="float: left; width: 45%;"> <div style='margin: 10px;'><b>First Name:</b>{{people[7].firstname}}</div> <div style='margin: 10px;'><b>Last Name:</b>{{people[7].lastname}}</div> <div style='margin: 10px;'><b>Title:</b>{{people[7].title}}</div> <div style='margin: 10px;'><b>Address:</b>{{people[7].address}}</div> </div> <div style="float: left; width: 40%;"> <div style='margin: 10px;'><b>Postal Code:</b>{{people[7].postalcode}}</div> <div style='margin: 10px;'><b>City:</b>{{people[7].city}}</div> <div style='margin: 10px;'><b>Phone:</b>{{people[7].homephone}}</div> <div style='margin: 10px;'><b>Hire Date:</b>{{people[7].hiredate}}</div> </div> </div> </div> <div> <div style="margin: 15px;"> <div style="float: left; width: 15%;"> <div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div> <div style='margin-top: 10px;'> <img height="60" ng-src={{people[8].url}}> </div> </div> <div style="float: left; width: 45%;"> <div style='margin: 10px;'><b>First Name:</b>{{people[8].firstname}}</div> <div style='margin: 10px;'><b>Last Name:</b>{{people[8].lastname}}</div> <div style='margin: 10px;'><b>Title:</b>{{people[8].title}}</div> <div style='margin: 10px;'><b>Address:</b>{{people[8].address}}</div> </div> <div style="float: left; width: 40%;"> <div style='margin: 10px;'><b>Postal Code:</b>{{people[8].postalcode}}</div> <div style='margin: 10px;'><b>City:</b>{{people[8].city}}</div> <div style='margin: 10px;'><b>Phone:</b>{{people[8].homephone}}</div> <div style='margin: 10px;'><b>Hire Date:</b>{{people[8].hiredate}}</div> </div> </div> </div> </jqx-tabs> </div> </body> </html>Hi,
jQWidgets version 4.0
Thanks,
KeshavanISSUE SORTED, PLEASE IGNORE POST
Hi Keshavan,
Could you post the solution for the benefit of the others in the forum?
Regards,
Peter -
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.