[Solved] AngularJS Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite

rani

SOLVED CLOSED ACTIVE ANSWERED
User: rani
Posted: on Jul 04, 2019 11:51 PM
Forum: AngularJS
Answer: 1
Views: 11709
Sample Code: Download

I have used below code but getting error

[jqLite:nosel] http://errors.angularjs.org/1.6.9/jqLite/nosel

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope) {
        $scope.OpenPopup = function () {
            var element = angular.element('#MyPopup');
            element.modal('show');
        }
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <input type="button" class="btn btn-primary" value="Open Popup" ng-click="OpenPopup()" />
    <!-- Modal Popup -->
    <div id="MyPopup" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        &times;</button>
                    <h4 class="modal-title">Greetings
                    </h4>
                </div>
                <div class="modal-body">
                    Welcome to ASPSnippets.com
                </div>
                <div class="modal-footer">
                    <input type="button" id="btnClosePopup" value="Close" class="btn btn-default" data-dismiss="modal" />
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Popup -->
</div>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Jul 05, 2019 02:09 AM
Report

Hi rani,

You have loaded jquery script after angularjs script. To fix the error you have to load jquery script before angularjs script.

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" />
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            $scope.Message = "";
            $scope.OpenPopup = function () {
                var element = angular.element('#MyPopup');
                element.modal('show');
            }
            $scope.Ok = function () {
                $scope.Message = "Ok Clicked";
            }
            $scope.Cancel = function () {
                $scope.Message = "Cancel Clicked";
            }
        });
    </script>
    <center>
        <div ng-app="MyApp" ng-controller="MyController">
            <input type="button" class="btn btn-primary" value="Open Popup" ng-click="OpenPopup()" />
            <!-- Modal Popup -->
            <div id="MyPopup" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                &times;</button>
                            <h4 class="modal-title">
                                Greetings
                            </h4>
                        </div>
                        <div class="modal-body">
                            Welcome to ASPSnippets.com
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" type="button" ng-click="Ok()" data-dismiss="modal">Ok</button>
                            <button class="btn btn-warning" type="button" ng-click="Cancel()" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal Popup -->
            <br />
            <span ng-show="Message">{{Message}}</span>
        </div>
    </center>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

[Solved] AngularJS Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite

Company

Explore

Follow us

Contact Us