UI page : jquery datepicker not working inside bootstrap modal

Gaurav Bajaj · ‎06-29-2017

Hi,

I am currently facing an issue with the upgrade (Geneva to Istanbul).

I had a datepicker (Jquery UI) inside the Bootstrap modal in a UI page which was working fine till now but since after the upgrade, its functionality has been broken.

Although the datepicker appears on the modal but click is not working on it.

I tried below steps to debug the issue:

1) I checked console and its not even showing anything there.

2) I thought of trying it in developer instance with a sample code and found negative output there as well.

3) I checked the direct checkbox on UI page and added the entire HTML markups and guess what, it started working.

It seems like some JS library(from UI page) is conflicting with the datepicker JS.

I have tried different ways to counter it but all in vain. Please help me out with this

I have copied the entire code over here.

<head>

<title>Bootstrap Example</title>

</head>

<body>

$( function() {

$( "#datepicker" ).datepicker();

} );

</script>

<h2>Modal Example</h2>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<h4 class="modal-title">Modal Header</h4>

</div>

<p>Some text in the modal.</p>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

</body>

</html>

Message was edited by: Gaurav Bajaj

Justin Abbott · ‎06-29-2017

Gaurav,

I was able to get this working by using the ServiceNow platform's version of jQuery and using $j_custom as a variable to prevent conflicts.

Here's the code I was working with.

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

       <html lang="en">

       <head>

               <title>Bootstrap Example</title>

               <meta charset="utf-8" />

               <meta name="viewport" content="width=device-width, initial-scale=1" />

               <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

               <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

               <script>https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

               <!-- Commenting out the third-party jQuery load and using the platform jQuery version.-->

               <!--<script>https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->

               <g:requires name="scripts/lib/jquery_includes.js" />

               <script>https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

       </head>

       <body>

               <script>

                       // Prevent jQuery from conflicting with ServiceNow

                       var $j_custom = jQuery.noConflict(true);

                       $j_custom(function() {

                               $j_custom("#datepicker").datepicker();

                       });

               </script>

               <div class="container">

                       <h2>Modal Example</h2>

                       <!-- Trigger the modal with a button -->

                       <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

                       <!-- Modal -->

                       <div class="modal fade" id="myModal" role="dialog">

                               <div class="modal-dialog">

                                       <!-- Modal content-->

                                       <div class="modal-content">

                                               <div class="modal-header">

                                                       <h4 class="modal-title">Modal Header</h4>

                                               </div>

                                               <div class="modal-body">

                                                       <p>Some text in the modal.</p>

                                                       <p>Date: <input type="text" id="datepicker" /></p>

                                               </div>

                                               <div class="modal-footer">

                                                       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                                               </div>

                                       </div>

                               </div>

                       </div>

               </div>

       </body>

       </html>

</j:jelly>

View solution in original post

Justin Abbott · ‎06-29-2017

Gaurav,

I was able to get this working by using the ServiceNow platform's version of jQuery and using $j_custom as a variable to prevent conflicts.

Here's the code I was working with.

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

       <html lang="en">

       <head>

               <title>Bootstrap Example</title>

               <meta charset="utf-8" />

               <meta name="viewport" content="width=device-width, initial-scale=1" />

               <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

               <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

               <script>https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

               <!-- Commenting out the third-party jQuery load and using the platform jQuery version.-->

               <!--<script>https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->

               <g:requires name="scripts/lib/jquery_includes.js" />

               <script>https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

       </head>

       <body>

               <script>

                       // Prevent jQuery from conflicting with ServiceNow

                       var $j_custom = jQuery.noConflict(true);

                       $j_custom(function() {

                               $j_custom("#datepicker").datepicker();

                       });

               </script>

               <div class="container">

                       <h2>Modal Example</h2>

                       <!-- Trigger the modal with a button -->

                       <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

                       <!-- Modal -->

                       <div class="modal fade" id="myModal" role="dialog">

                               <div class="modal-dialog">

                                       <!-- Modal content-->

                                       <div class="modal-content">

                                               <div class="modal-header">

                                                       <h4 class="modal-title">Modal Header</h4>

                                               </div>

                                               <div class="modal-body">

                                                       <p>Some text in the modal.</p>

                                                       <p>Date: <input type="text" id="datepicker" /></p>

                                               </div>

                                               <div class="modal-footer">

                                                       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                                               </div>

                                       </div>

                               </div>

                       </div>

               </div>

       </body>

       </html>

</j:jelly>

Gaurav Bajaj · ‎06-29-2017

Thanks much Justin 🙂

I was struggling with this one. I tried adding noConflict earlier but didn't remove the external jquery.

Thanks for the enlightenment.

Gaurav

G Balaji · ‎04-05-2018

I have a similar requirement. I need to place bootstrap datetimepicker in UI Page. I tried to use your code but datetimepicker is not showing up when I click modal. What am i missing? I simply copied your code and Im working on kingston instance.

Thanks.