I have used below code but getting errorjqLitenosel httperrorsangularjsorg169jqLitenoselltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs169angularminjs34gtltscriptgtltscript type34textjavascript34 src34httpsajaxaspnetcdncomajaxjQueryjquery183minjs34gtltscriptgtltscript type34textjavascript34 src34httpscdnjscloudflarecomajaxlibstwitterbootstrap303jsbootst

Hi raniYou have loaded jquery script after angularjs script To fix the error you have to load jquery script before angularjs scriptCheck this example Now please take its reference and correct your codeHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegtltheadgtltbodygt ltscript type34textjavascript34 src34httpsajaxaspnetcdncomajaxjQueryjquery183minjs34gtltscriptgt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs169angularminjs34gtltscriptgt ltscript type34textjavascript34 src34httpscdnjscloudflarecomajaxlibstwitterbootstrap303jsbootstrapminjs34gtltscriptgt ltlink rel34stylesheet34 media34screen34 href34httpscdnjscloudflarecomajaxlibstwitterbootstrap303cssbootstrapmincss34 gt ltscript type34textjavascript34gt

[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: 12544
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