locked
TypeError: a is null RRS feed

  • Question

  • User81789783 posted

    i have below code and found an error

    TypeError: a is null

    here is code

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Placing HTML inside Bootstrap 4 Popovers</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>
        body {
        padding: 50px;
    }
            .tooltip {
      ;
      display: inline-block;
      border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
     
      width: 120px;
      background-color: black;
      color: #000;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      ;
      z-index: 1;
      bottom: 150%;
      left: 50%;
      margin-left: -60px;
    }
    
    .tooltip .tooltiptext::after {
      content: "";
      ;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: black transparent transparent transparent;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
    
            .bs-example {
                margin: 100px;
            }
            /* Custom styles for popover */
            .custom-title {
                margin: 0;
            }
        </style>
        <script>
            $(document).ready(function () {
                $('.popper').popover({
                    placement: 'bottom',
                    container: 'body',
    
                    html: true,
                    content: function () {
                        $(this).next().attr('display:block')
                        return $(this).next('.popper-content').html();
                    }
                });
                    
    
                //});
                //$("[data-toggle=popover]").popover({
                //    html: true,
                //    content: function () {
                //        return $('#popover-content').html();
                //    }
                //});
    
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-1 popper" title="Note" data_toggle="popover">
                     <div class="popper-content" style="display:none">My note popover content goes here.</div>
                   <i class="ShowToolTip fa fa-eye LabTaskClass28 LabTaskClassforShowHideCol77" style="/*! width: 1px !important; */"></i>
                 
                </div>
                @*<div class="col-lg-1 myclass" title="Review" data_toggle="popover" data_placement="top"    data-html='true' data-original-title="Review" style="/*! width: 1px; */border: 1px solid red;text-align: center;">
                        <i class="ShowToolTip fa fa-eye LabTaskClass28 LabTaskClassforShowHideCol77" style="/*! width: 1px !important; */"></i>
                    </div>*@
    
            </div>
            @*<button class="popper" data-toggle="popover" title=note>Pop me</button>
                <div class="popper-content" style="display:none">My first popover content goes here.</div>
    
                <button class="popper" data-toggle="popover">Pop me</button>
                <div class="popper-content" style="display:none"> My second popover content goes here.</div>
    
                <button class="popper" data-toggle="popover">Pop me</button>
                <div class="popper-content" style="display:none"> My third popover content goes here.</div>*@
    </div>
    </body>
    </html>                            

    any help

    Wednesday, May 8, 2019 7:42 AM

Answers

  • User-893317190 posted

    Hi erum ,

    You should change your html according to the js.

    cart-popover is used  as the id of pop up btn, so you should assign cart-popover to your pop up btn.

    .popover_title is used as the title of popover.

    #popover_content_wrapper is used as content of the pop up.

      <i  id="cart-popover" class="btn  ShowToolTip popper fa fa-eye LabTaskClass28  LabTaskClassforShowHideCol77" data-placement="left" ><span class="close-popover float-right text-danger "></span></i>
    
        <div class="popover_title" style="display: none">
            <h6>No task result for note<span class="close-popover float-right text-danger "><i class="fas fa-times"></i></span></h6>
        </div>
        <div id="popover_content_wrapper" style="display: none">
          
            <div class="form-group text-center">
                <label title="Task name">
                    Task name
                </label>
                <input type="text"
                       class="form-control">
    
    
                <label title="Message">
                    Message
                </label>
                <input type="text"
                       class="form-control" placeholder="Limited to 100 Characters">
                <button class="btn-save btn btn-primary btn-sm" style="background-color:maroon !important">Close</button>
                <button class="btn-save btn btn-primary btn-sm" style="background-color:darkslategrey !important">SAve</button>
            </div>
            <button type="submit" class="btn btn-default btn-block">
                Submit
            </button>
       
        </div>
    
        <script>
            $(document).ready(function () {
                $('#cart-popover').popover({
                    html: true,
                    title: function () {
                        return $('.popover_title').html();
                    },
                    content: function () {
                        return $('#popover_content_wrapper').html();
                    }
    
                });
    
            });
    
            $(document).on('click', '.close-popover', function () {
                $('#cart-popover').popover('hide');
            });
        </script>

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 22, 2019 1:23 AM
  • User-893317190 posted

    Hi erum ,

    Not sure whether this meets your requirement , I have make a little modification to your code.

    And my final js.

     <script type="text/javascript">
    
            $(function () {
                $('.popper').popover({
    
                    placement: 'bottom',
                    container: 'body',
                    html: true,
                    title: function () {
                       
                        var ele = $($(this).next(".popover_title").html().trim());
    
                       
                      
                        return ele;
                    },
    
    
                content: function () {
                  
    
                    var ele = $($(this).nextAll(".popper-content").html().trim());
                 
                    return ele;
                }
            });
               // close other pop up
                $(".ShowToolTip").click(function () {
                    
                    $(".ShowToolTip").not($(this)).popover("hide");
                 
                   
                })
                $('html').on('click', function (e) {
    
                   
                   
                        //did not click a popover toggle or popover
                        if ($(e.target).data('toggle') !== 'popover'
    
                            && $(e.target).parents().is('.close-popover')) {
                            $('[data-original-title]').popover('hide');
                    }
                    // when click outside ,close pop up
                    if (!$(e.target).parents().is(".popover") && (!$(e.target).is(".ShowToolTip"))) {
                        $('[data-original-title]').popover('hide');
                    }
                      
                   
            });
    
                });
    
        </script>

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 23, 2019 7:23 AM

All replies

  • User81789783 posted

    also

    Google Maps JavaScript API error: ExpiredKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#expired-key-map-error

    Wednesday, May 8, 2019 8:14 AM
  • User-893317190 posted

    Hi erum,

    For TypeError: a is null, please specify the width of the element which  holds your google map.

    https://stackoverflow.com/questions/5478450/google-map-error-a-is-null

    For the second error, it means you app key is expired.

    Please regenerate an app key.

    Refer to error message about ExpiredKeyMapError ,https://developers.google.com/maps/documentation/javascript/error-messages

    Please wait a moment for the new app key to work. https://stackoverflow.com/questions/46560859/expiredkeymaperror-on-newly-generated-api-key

    Best regards,

    Ackerly Xu

    Wednesday, May 8, 2019 8:53 AM
  • User81789783 posted

    though i have removed google api link from script section,but getting same error

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Placing HTML inside Bootstrap 4 Popovers</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        
        <script src="~/Scripts/js/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>
        body {
        padding: 50px;
    }
            .tooltip {
      ;
      display: inline-block;
      border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
     
      width: 120px;
      background-color: black;
      color: #000;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      ;
      z-index: 1;
      bottom: 150%;
      left: 50%;
      margin-left: -60px;
    }
    
    .tooltip .tooltiptext::after {
      content: "";
      ;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: black transparent transparent transparent;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
    
            .bs-example {
                margin: 100px;
            }
            /* Custom styles for popover */
            .custom-title {
                margin: 0;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.popper').popover({
                    placement: 'bottom',
                    container: 'body',
    
                    html: true,
                    content: function () {
                        //$(this).next('popper-content').css("display","Block")
                        //return $(this).next('.popper-content').html();
                    }
                });
    
    
                //});
                //$("[data-toggle=popover]").popover({
                //    html: true,
                //    content: function () {
                //        return $('#popover-content').html();
                //    }
                //});
    
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-1 popper" title="Note" data_toggle="popover">
                     <div class="popper-content" style="display:none">My note popover content goes here.</div>
                   <i class="ShowToolTip fa fa-eye LabTaskClass28 LabTaskClassforShowHideCol77" style="/*! width: 1px !important; */"></i>
                 
                </div>
                @*<div class="col-lg-1 myclass" title="Review" data_toggle="popover" data_placement="top"    data-html='true' data-original-title="Review" style="/*! width: 1px; */border: 1px solid red;text-align: center;">
                        <i class="ShowToolTip fa fa-eye LabTaskClass28 LabTaskClassforShowHideCol77" style="/*! width: 1px !important; */"></i>
                    </div>*@
    
            </div>
            @*<button class="popper" data-toggle="popover" title=note>Pop me</button>
                <div class="popper-content" style="display:none">My first popover content goes here.</div>
    
                <button class="popper" data-toggle="popover">Pop me</button>
                <div class="popper-content" style="display:none"> My second popover content goes here.</div>
    
                <button class="popper" data-toggle="popover">Pop me</button>
                <div class="popper-content" style="display:none"> My third popover content goes here.</div>*@
    </div>
    </body>
    </html>                            

    i need this http://jsfiddle.net/isherwood/E5Ly5/ kind of functioanlity ..

    Any work around

    Wednesday, May 8, 2019 12:24 PM
  • User-474980206 posted
    You content function returns undefined rather than actual content.
    Wednesday, May 8, 2019 2:14 PM
  • User-2054057000 posted

    You are using jquery 1.9.1 which is quite old. 

    I suggest you to use the 3.0 or newer version. Because most of the time these type of errors are solved when you use lastest version of jQuery.

    Wednesday, May 8, 2019 2:26 PM
  • User81789783 posted

    here is updated code where i m using updated version of jquery

    
    
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Placing HTML inside Bootstrap 4 Popovers</title>
        @*<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">*@
        
        <script src="~/Scripts/js/jquery-3.2.1.min.js"></script>
    
    <script src="~/Scripts/js/popper.min.js"></script>
        @*<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>*@
        <style>
        body {
        padding: 50px;
    }
            .tooltip {
      ;
      display: inline-block;
      border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
     
      width: 120px;
      background-color: black;
      color: #000;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      ;
      z-index: 1;
      bottom: 150%;
      left: 50%;
      margin-left: -60px;
    }
    
    .tooltip .tooltiptext::after {
      content: "";
      ;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: black transparent transparent transparent;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
    
            .bs-example {
                margin: 100px;
            }
            /* Custom styles for popover */
            .custom-title {
                margin: 0;
            }
        </style>
        <script type="text/javascript">
            $(function () {
                $('.popper').popover({
                    placement: 'bottom',
                    container: 'body',
    
                    html: true,
                    content: function () {
                        //$(this).next('popper-content').css("display","Block")
                        return $(this).next('.popper-content').html();
                    }
                });
    
    
                //});
                //$("[data-toggle=popover]").popover({
                //    html: true,
                //    content: function () {
                //        return $('#popover-content').html();
                //    }
                //});
    
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-1 popper" title="Note" data_toggle="popover">
                     <div class="popper-content" style="display:none">My note popover content goes here.</div>
                   <i class="ShowToolTip fa fa-eye LabTaskClass28 LabTaskClassforShowHideCol77" style="/*! width: 1px !important; */"></i>
                 
                </div>
                @*<div class="col-lg-1 myclass" title="Review" data_toggle="popover" data_placement="top"    data-html='true' data-original-title="Review" style="/*! width: 1px; */border: 1px solid red;text-align: center;">
                        <i class="ShowToolTip fa fa-eye LabTaskClass28 LabTaskClassforShowHideCol77" style="/*! width: 1px !important; */"></i>
                    </div>*@
    
            </div>
            @*<button class="popper" data-toggle="popover" title=note>Pop me</button>
                <div class="popper-content" style="display:none">My first popover content goes here.</div>
    
                <button class="popper" data-toggle="popover">Pop me</button>
                <div class="popper-content" style="display:none"> My second popover content goes here.</div>
    
                <button class="popper" data-toggle="popover">Pop me</button>
                <div class="popper-content" style="display:none"> My third popover content goes here.</div>*@
    </div>
    </body>
    </html>                            

    and here is error

    js?key=AIzaSyAQIiXwFzXuuWnH7A1fgI6JLe9qpvpuBB4:71 Uncaught TypeError: Cannot read property 'firstChild' of null
    at Object._.Ge (js?key=AIzaSyAQIiXwFzXuuWnH7A1fgI6JLe9qpvpuBB4:71)
    at new eh (js?key=AIzaSyAQIiXwFzXuuWnH7A1fgI6JLe9qpvpuBB4:110)

    i want to open popup contained in below div

      <div class="popper-content" style="display:none">My note popover content goes here.</div>

    Wednesday, May 8, 2019 3:21 PM
  • User81789783 posted

    i m using

    <script src="~/Scripts/js/jquery-3.2.1.min.js"></script> this now

    Wednesday, May 8, 2019 3:22 PM
  • User81789783 posted

    well  @Bruce i m getting below error in FF

    ReferenceError: google is not defined[Learn More] popovers:2512:21

        <anonymous> http://localhost:3692/Test/popovers:2512

    Wednesday, May 8, 2019 3:24 PM
  • User475983607 posted

    Put the Google API back or remove all references.

    Wednesday, May 8, 2019 7:25 PM
  • User81789783 posted

    i am still facing same issue ,,

    Tuesday, May 21, 2019 6:15 AM
  • User81789783 posted

    closing all google reference is not ultimate solution that i observed

    Tuesday, May 21, 2019 6:17 AM
  • User-893317190 posted

    Hi erum,

    I copy and paste your  cshtml code into a html page, still could not reproduce your problem.

    But I successfully pop up a div.

    Below is my code.

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Placing HTML inside Bootstrap 4 Popovers</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    
        <script>
            $(document).ready(function () {
                $('.popper').popover({
                    placement: 'bottom',
                    container: 'body',
                    html: true,
                    content: function () {
                        $(this).next().attr('display',"block")
                        return $(this).next().html();
                    }
                });
    
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-1 popper" title="Note" data_toggle="popover">
                    <div class="popper-content" style="display:none">My note popover content goes here.</div>
                    <i class="ShowToolTip fa fa-eye LabTaskClass28 LabTaskClassforShowHideCol77" style="/*! width: 1px !important; */"></i>
    
                </div>
                <div class="col-lg-1 myclass" title="Review" data_toggle="popover" data_placement="top" data-html='true' data-original-title="Review" style="display:none;border: 1px solid red;text-align: center;">
                    <i class="ShowToolTip fa fa-eye LabTaskClass28 LabTaskClassforShowHideCol77" style="/*! width: 1px !important; */"></i>
                </div>
    
            </div>
           
    
        </div>
    </body>
    </html>             

    The result.

    You should put the div which you want to pop up just behind the  .popper div.

    Best regards,

    Ackerly Xu

    Tuesday, May 21, 2019 8:03 AM
  • User81789783 posted

    well Xu , i have already done it without removing google Reference or any thing else ,now i just want close button(X)  with title .here is updated code ,can  help me .

    
    
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Placing HTML inside Bootstrap 4 Popovers</title>
        @*<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">*@
        
        <script src="~/Scripts/js/jquery-3.2.1.min.js"></script>
    
    <script src="~/Scripts/js/popper.min.js"></script>
        @*<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>*@
        <style>
        body {
        padding: 50px;
    }
            .tooltip {
      ;
      display: inline-block;
      border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
     
      width: 120px;
      background-color: black;
      color: #000;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      ;
      z-index: 1;
      bottom: 150%;
      left: 50%;
      margin-left: -60px;
    }
    
    .tooltip .tooltiptext::after {
      content: "";
      ;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: black transparent transparent transparent;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
    
            .bs-example {
                margin: 100px;
            }
            /* Custom styles for popover */
            .custom-title {
                margin: 0;
            }
        </style>
        <script type="text/javascript">
            $(function () {
                $('.popper').popover({
            
                    placement: 'bottom',
                    container: 'body',
                    html: true,
                   
                    @*content: function () {
                        var output = '';
                        $.ajax(
                            {
                                url: "@Html.Action("Client", "Test")",
                                async: true,
                                success: function (response) {
                                    output = response;
                                }
                        });
                    }*@
                    
                   // content:  fetchData() {
                    content: function () { 
                    
                        return $(this).next('.popper-content').html(); 
                    }
                });
    
    
                $('html').on('click', function (e) {
                    if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
                        $('[data-original-title]').popover('hide');
                    }
                });
                //});
                //$("[data-toggle=popover]").popover({
                //    html: true,
                //    content: function () {
                //        return $('#popover-content').html();
                //    }
                //});
    
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                @*<div class="col-lg-1 popper" title="Note" data_toggle="popover">sdsda*@
                <div class="col-lg-1">
                    <i class="ShowToolTip popper fa fa-eye LabTaskClass28  LabTaskClassforShowHideCol77"   title="Note"  data_toggle="popover" style="/*! width: 1px !important; */"></i>
                    <div class="popper-content" style="display:none">
                        <div class="form-group">
                            <label title="Task name">Task name
                            </label>
                                <input type="text"
                                       class="form-control">
                    
                            <label title="Message">
                              Message
                            </label>
                            <input type="text"
                                   class="form-control" placeholder="Limited to 100 Characters">
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:maroon !important">Close</button>
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:darkslategrey !important">SAve</button>
                        </div>
                        <button type="submit" class="btn btn-default btn-block">
                            Submit
                        </button>
                    </div></div>
    
    
                    </div>
                <div class="col-lg-1">
                    <i class="ShowToolTip popper fa fa-eye LabTaskClass28 LabTaskClassforShowHideCol77" title="No task result for review" data_toggle="popover" style="/*! width: 1px !important; */"></i>
                    @*<div class="popper-content" style="display:none">My Review popover content goes here.</div>*@
                    <div class="popper-content" style="display:none">
                        <div class="form-group">
                            <label title="Task name">
                                Task name
                            </label>
                            <input type="text"
                                   class="form-control">
    
                            <label title="Message">
                                Messagessd
                            </label>
                            <input type="text"
                                   class="form-control" placeholder="Limited to 100 Characters">
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:maroon !important">Close</button>
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:darkslategrey !important">SAve</button>
                        </div>
                        <button type="submit" class="btn btn-default btn-block">
                            Submit
                        </button>
                    </div>
    
                </div>
                    @*<div class="col-lg-1 myclass" title="Review" data_toggle="popover" data_placement="top"    data-html='true' data-original-title="Review" style="/*! width: 1px; */border: 1px solid red;text-align: center;">
                    <i class="ShowToolTip fa fa-eye LabTaskClass28 LabTaskClassforShowHideCol77" style="/*! width: 1px !important; */"></i>
                </div>*@
    
                </div>
            @*<button class="popper" data-toggle="popover" title=note>Pop me</button>
                <div class="popper-content" style="display:none">My first popover content goes here.</div>
    
                <button class="popper" data-toggle="popover">Pop me</button>
                <div class="popper-content" style="display:none"> My second popover content goes here.</div>
    
                <button class="popper" data-toggle="popover">Pop me</button>
                <div class="popper-content" style="display:none"> My third popover content goes here.</div>*@
    </div>
    </body>
    </html>                            

    Tuesday, May 21, 2019 8:06 AM
  • User-893317190 posted

    Hi erum,

    Not sure about what you want to do , do you  want to  add a x button at the right of the title?

    If so , you could refer to the link below.

    https://stackoverflow.com/questions/50505952/insert-a-close-button-in-bootstrap-popover-plugin

    Best regards,

    Ackerly Xu

    Tuesday, May 21, 2019 9:54 AM
  • User81789783 posted

    yes need same ,i append code but not working

    <div class="col-lg-1">
                    <i class="ShowToolTip popper fa fa-eye LabTaskClass28  LabTaskClassforShowHideCol77"   title="No task result for note"  data_toggle="popover" style="/*! width: 1px !important; */"><span class="close-popover float-right text-danger "></span></i>
                    <div class="popper-content" style="display:none">
                        <div class="form-group">
                            <label title="Task name">Task name
                            </label>
                                <input type="text"
                                       class="form-control">
                    
                            <label title="Message">
                              Message
                            </label>
                            <input type="text"
                                   class="form-control" placeholder="Limited to 100 Characters">
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:maroon !important">Close</button>
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:darkslategrey !important">SAve</button>
                        </div>
                        <button type="submit" class="btn btn-default btn-block">
                            Submit
                        </button>
                    </div></div>

    Tuesday, May 21, 2019 11:35 AM
  • User-893317190 posted

    Hi erum ,

    You should change your html according to the js.

    cart-popover is used  as the id of pop up btn, so you should assign cart-popover to your pop up btn.

    .popover_title is used as the title of popover.

    #popover_content_wrapper is used as content of the pop up.

      <i  id="cart-popover" class="btn  ShowToolTip popper fa fa-eye LabTaskClass28  LabTaskClassforShowHideCol77" data-placement="left" ><span class="close-popover float-right text-danger "></span></i>
    
        <div class="popover_title" style="display: none">
            <h6>No task result for note<span class="close-popover float-right text-danger "><i class="fas fa-times"></i></span></h6>
        </div>
        <div id="popover_content_wrapper" style="display: none">
          
            <div class="form-group text-center">
                <label title="Task name">
                    Task name
                </label>
                <input type="text"
                       class="form-control">
    
    
                <label title="Message">
                    Message
                </label>
                <input type="text"
                       class="form-control" placeholder="Limited to 100 Characters">
                <button class="btn-save btn btn-primary btn-sm" style="background-color:maroon !important">Close</button>
                <button class="btn-save btn btn-primary btn-sm" style="background-color:darkslategrey !important">SAve</button>
            </div>
            <button type="submit" class="btn btn-default btn-block">
                Submit
            </button>
       
        </div>
    
        <script>
            $(document).ready(function () {
                $('#cart-popover').popover({
                    html: true,
                    title: function () {
                        return $('.popover_title').html();
                    },
                    content: function () {
                        return $('#popover_content_wrapper').html();
                    }
    
                });
    
            });
    
            $(document).on('click', '.close-popover', function () {
                $('#cart-popover').popover('hide');
            });
        </script>

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 22, 2019 1:23 AM
  • User81789783 posted

    well xu ,I am happy u reply and ur code is ok , but i need to make changes in my code as per my requirement

    but its not showing wrapper

      <div class="col-lg-1">
                    <i  class="ShowToolTip popper fa fa-eye LabTaskClass28  LabTaskClassforShowHideCol77" data-placement="left"><span class="close-popover float-right text-danger "></span></i>
    
                    <div class="popover_title" style="display: none">
                        <h6>No task result for note<span class="close-popover float-right text-danger"><i class="fa fa-times"></i></span></h6>
                    </div>
                    <div class="popper-content" style="display:none">
                        <div class="form-group">
                            <label title="Task name">
                                Task name
                            </label>
                            <input type="text"
                                   class="form-control">
    
                            <label title="Message">
                                Message
                            </label>
                            <input type="text"
                                   class="form-control" placeholder="Limited to 100 Characters">
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:maroon !important">Close</button>
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:darkslategrey !important">SAve</button>
                        </div>
                        <button type="submit" class="btn btn-default btn-block">
                            Submit
                        </button>
                    </div>
                </div>
    
                <div class="col-lg-1">
                    <i class="ShowToolTip popper fa fa-eye LabTaskClass28  LabTaskClassforShowHideCol78" data-placement="left"><span class="close-popover float-right text-danger "></span></i>
                    @*<div class="popper-content" style="display:none">My Review popover content goes here.</div>*@
                    <div class="popover_title" style="display: none">
                        <h6>No task result for Review<span class="close-popover float-right text-danger"><i class="fa fa-times"></i></span></h6>
                    </div>
                    <div id="popover_content_wrapper"  class="popper-content" style="display: none">
                        <div class="form-group">
                            <label title="Task name">
                                Task name
                            </label>
                            <input type="text"
                                   class="form-control">
    
                            <label title="Message">
                                Messagessd
                            </label>
                            <input type="text"
                                   class="form-control" placeholder="Limited to 100 Characters">
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:maroon !important">Close</button>
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:darkslategrey !important">SAve</button>
                        </div>
                        <button type="submit" class="btn btn-default btn-block">
                            Submit
                        </button>
                    </div>
    
                </div>
    
    <script type="text/javascript">
          
            $(function () {
                $('.popper').popover({
            
                    placement: 'bottom',
                    container: 'body',
                    html: true,
                    title: function () {
                        return $('.popover_title').html();
                    },
                 
                  
                   
                    @*content: function () {
                        var output = '';
                        $.ajax(
                            {
                                url: "@Html.Action("Client", "Test")",
                                async: true,
                                success: function (response) {
                                    output = response;
                                }
                        });
                    }*@
                    
                   // content:  fetchData() {
                    content: function () {
                     //  return $('#popover_content_wrapper').html();
                       return $(this).next('.popper-content').html();
                    }
                });
    
    
                $('html').on('click', function (e) {
                    if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
                        $('[data-original-title]').popover('hide');
                    }
                });
                //});
                //$("[data-toggle=popover]").popover({
                //    html: true,
                //    content: function () {
                //        return $('#popover-content').html();
                //    }
                //});
    
            });
            $(document).on('click', '.close-popover', function () {
               // $('#cart-popover').popover('hide');
            });
        </script>

    Wednesday, May 22, 2019 5:22 AM
  • User-893317190 posted

    Hi erum,

    I have tested using your code , and actually I have met some problems.

    After some modification, I could realize similar effect to my previous sample.

    Below is my code.

     <script>
            $(document).ready(function () {
                $('.popper').popover({
                    placement: 'bottom',
                    container: 'body',
                    title: function () {
                        return $(this).next(".popover_title").html();
                    },
                    html: true,
                    content: function () {
                            // content is a little special, I trim the html and convert it to a jquery object
    return $($(this).nextAll(".popover_content_wrapper").html().trim()); } }); $(document).on('click', '.close-popover', function () {
    // to close the pop up where current button(x) is
    // to mark the content , I use data-index customized attribute $(".ShowToolTip").eq($(this).parents(".popover").find("[data-index]").data('index')).popover("hide"); }); }); </script> </head> <body> <div class="col-lg-1"> <i class="ShowToolTip popper fa fa-eye LabTaskClass28 LabTaskClassforShowHideCol77" data-placement="left"><span class="close-popover float-right text-danger "></span></i> <div class="popover_title" style="display: none"> <h6>No task result for note<span class="close-popover float-right text-danger" ><i class="fa fa-times"></i></span></h6> </div> <div class="popover_content_wrapper" style="display:none"> <div class="form-group" data-index="0"> <label title="Task name"> Task name </label> <input type="text" class="form-control" /> <label title="Message"> Message </label> <input type="text" class="form-control" placeholder="Limited to 100 Characters" /> <button class="btn-save btn btn-primary btn-sm" style="background-color:maroon !important">Close</button> <button class="btn-save btn btn-primary btn-sm" style="background-color:darkslategrey !important">SAve</button> </div> <button type="submit" class="btn btn-default btn-block"> Submit </button> </div> </div> <div class="col-lg-1"> <i class="ShowToolTip popper fa fa-eye LabTaskClass28 LabTaskClassforShowHideCol78" data-placement="left"><span class="close-popover float-right text-danger "></span></i> <div class="popover_title" style="display: none"> <h6>No task result for Review2<span class="close-popover float-right text-danger" data-index="2" ><i class="fa fa-times"></i></span></h6> </div> <div class="popover_content_wrapper" style="display: none"> <div class="form-group" data-index="1"> <label title="Task name"> Task name </label> <input type="text" class="form-control"> <label title="Message"> Messagessd </label> <input type="text" class="form-control" placeholder="Limited to 100 Characters"> <button class="btn-save btn btn-primary btn-sm" style="background-color:maroon !important">Close</button> <button class="btn-save btn btn-primary btn-sm" style="background-color:darkslategrey !important">SAve</button> </div> <button type="submit" class="btn btn-default btn-block"> Submit </button> </div> </div>

    Best regards,

    Ackerly Xu

    Wednesday, May 22, 2019 7:41 AM
  • User81789783 posted

    well thanks a lot for ur help ,here is updated code

    <div class="col-lg-1">
                    <i  class="ShowToolTip popper fa fa-eye LabTaskClass28  LabTaskClassforShowHideCol77" data-placement="left"><span class="close-popover float-right text-danger "></span></i>
    
                    <div class="popover_title" style="display: none">
                        <h6>No task result for note<span class="close-popover float-right text-danger"><i class="fa fa-times"></i></span></h6>
                    </div>
                    <div class="popper-content" style="display:none">
                        <div class="form-group" data-index="0">
                            <label title="Task name">
                                Task name
                            </label>
                            <input type="text"
                                   class="form-control">
    
                            <label title="Message">
                                Message
                            </label>
                            <input type="text"
                                   class="form-control" placeholder="Limited to 100 Characters">
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:maroon !important">Close</button>
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:darkslategrey !important">SAve</button>
                        </div>
                        <button type="submit" class="btn btn-default btn-block">
                            Submit
                        </button>
                    </div>
                </div>
    
                <div class="col-lg-1">
                    <i class="ShowToolTip popper fa fa-eye LabTaskClass28  LabTaskClassforShowHideCol78" data-placement="left"><span class="close-popover float-right text-danger "></span></i>
                    @*<div class="popper-content" style="display:none">My Review popover content goes here.</div>*@
                    <div class="popover_title" style="display: none">
                        <h6>No task result for Review<span class="close-popover float-right text-danger"><i class="fa fa-times"></i></span></h6>
                    </div>
                    <div   class="popper-content" style="display: none">
                        <div class="form-group" data-index="1">
                            <label title="Task name">
                                Task name
                            </label>
                            <input type="text"
                                   class="form-control">
    
                            <label title="Message">
                                Messagessd
                            </label>
                            <input type="text"
                                   class="form-control" placeholder="Limited to 100 Characters">
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:maroon !important">Close</button>
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:darkslategrey !important">SAve</button>
                        </div>
                        <button type="submit" class="btn btn-default btn-block">
                            Submit
                        </button>
                    </div>
    
                </div>
    <script type="text/javascript">
          
            $(function () {
                $('.popper').popover({
            
                    placement: 'bottom',
                    container: 'body',
                    html: true,
                    title: function () {
                        //  return $('.popover_title').html();
                        //return $("div.popover_title").html();
                        return $(this).next(".popover_title").html();
                    },
                 
                  
                   
                    @*content: function () {
                        var output = '';
                        $.ajax(
                            {
                                url: "@Html.Action("Client", "Test")",
                                async: true,
                                success: function (response) {
                                    output = response;
                                }
                        });
                    }*@
                    
                   // content:  fetchData() {
                    content: function () {
                        // content is a little special, I trim the html and convert it to a jquery object
    
                        return $($(this).nextAll(".popper-content").html().trim());
                    }
                });
    
    
                $('html').on('click', function (e) {
                    if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
                        $('[data-original-title]').popover('hide');
                    }
                });
                //});
                //$("[data-toggle=popover]").popover({
                //    html: true,
                //    content: function () {
                //        return $('#popover-content').html();
                //    }
                //});
                $(document).on('click', '.close-popover', function () {
                    // to   close the pop up where current button(x) is
                    // to mark the content , I use data-index customized attribute
                    $(".ShowToolTip").eq($(this).parents(".popover").find("[data-index]").data('index')).popover("hide");
    
    
                });
    
            });
        
        </script>

    but it closing popover also when click on textbox or any where else ..it should close only in two cases

    1. either click on x button or 2- out side popover
    Wednesday, May 22, 2019 11:07 AM
  • User-893317190 posted

    Hi erum,

    Since you write

     $('html').on('click', function (e) {
                    if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
                        $('[data-original-title]').popover('hide');
                    }
                });

    The pop up will also trigger this click event and close the pop up.

    What I could think out to prevent this it that you could register click event on the pop up and prevent the event to propagate.

    Below is the code.

     $(function () {
                $('.popper').popover({
    
                    placement: 'bottom',
                    container: 'body',
                    html: true,
                    title: function () {
                        //  return $('.popover_title').html();
                        //return $("div.popover_title").html();
                        return $(this).next(".popover_title").html();
                    },
    
                content: function () {
                    // content is a little special, I trim the html and convert it to a jquery object
    
                    var ele = $($(this).nextAll(".popper-content").html().trim());
                    ele.click(function (e) {
                        e.stopPropagation();
    
                    })
                    return ele;
                }
            });

    When you write stopPropagation , the event click will only be dealt with by the ele itself and will not propagate to its ancestor html.

    For more information about event propagation ,  please refer  to https://javascript.info/bubbling-and-capturing

    Best regards,

    Ackerly Xu

    Thursday, May 23, 2019 1:39 AM
  • User81789783 posted

    well xu i changed my code as below ,it work on below condition only

    • when click on X button
    • when click on <i> again on same popover

    but not working on below

    • click out side from popover
    • click on another <i> popover
      $('html').on('click', function (e) {
                    //did not click a popover toggle or popover
                    if ($(e.target).data('toggle') !== 'popover'
                    
                        && $(e.target).parents().is('.close-popover')) {
                        $('[data-original-title]').popover('hide');
                    }
                });

    can u help me what else condition can i put

    Thursday, May 23, 2019 5:56 AM
  • User-893317190 posted

    Hi erum ,

    Not sure whether this meets your requirement , I have make a little modification to your code.

    And my final js.

     <script type="text/javascript">
    
            $(function () {
                $('.popper').popover({
    
                    placement: 'bottom',
                    container: 'body',
                    html: true,
                    title: function () {
                       
                        var ele = $($(this).next(".popover_title").html().trim());
    
                       
                      
                        return ele;
                    },
    
    
                content: function () {
                  
    
                    var ele = $($(this).nextAll(".popper-content").html().trim());
                 
                    return ele;
                }
            });
               // close other pop up
                $(".ShowToolTip").click(function () {
                    
                    $(".ShowToolTip").not($(this)).popover("hide");
                 
                   
                })
                $('html').on('click', function (e) {
    
                   
                   
                        //did not click a popover toggle or popover
                        if ($(e.target).data('toggle') !== 'popover'
    
                            && $(e.target).parents().is('.close-popover')) {
                            $('[data-original-title]').popover('hide');
                    }
                    // when click outside ,close pop up
                    if (!$(e.target).parents().is(".popover") && (!$(e.target).is(".ShowToolTip"))) {
                        $('[data-original-title]').popover('hide');
                    }
                      
                   
            });
    
                });
    
        </script>

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 23, 2019 7:23 AM
  • User81789783 posted

    XU,load of thanks

    SOLVED 100/100

    Thursday, May 23, 2019 7:35 AM