Apply data mask to DatePicker after GET request from server using jQuery Input mask plugin in ASP.Net

hansheun...

SOLVED CLOSED ACTIVE ANSWERED
User: hansheung
Posted: on Jul 28, 2017 06:44 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 7084

I created the main page that has 2 datepickers and 1 input mask for time. A button will trigger a GET request for a page with the same content to be loaded within a div. I have put all the js, CSS and function script on the main page.

At the main page, all the datepickers and input mask work correctly but the GET request got trigger and the new page is loaded, all the datepickers and input mask are not working.

Please help.

The MAIN PAGE Code

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- ALL script in subfolder plugins -->
   
     <!-- Date Picker -->
    <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
    <!-- JQuery 2.2.3 Compressed -->
    <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!-- datepicker -->
    <script src="plugins/datepicker/bootstrap-datepicker.js"></script>
    <!-- InputMask -->
    <script src="plugins/input-mask/jquery.inputmask.js"></script>
    <script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
    <script src="plugins/input-mask/jquery.inputmask.extensions.js"></script>
</head>
<body>
    <form name="form1">
        <label>Date : </label>
            <div>From :<input name="dt_DateFr" type="text" date-picker></div>
            <div>To : <input name="dt_DateTo" type="text" date-picker></div>
            <div>Time: <input id="txtOTOut" name="txtOTOut" type="text" 
                data-inputmask="'alias': 'hh:mm'" data-mask>
            </div>
            <button type="submit" id="btnShow" name="btnShow" 
                onclick="showContent();return false;">
                Show</button>
    </form>
    <br />
    <br />


    <div id="content2" style="display: none">
        <!-- CONTENT HERE -->
    </div>

    <script>
    $(function () {
    //Date picker
    $("[date-picker]").datepicker({
        format: "dd/mm/yyyy",
        autoclose: true,
        }).datepicker("setDate", new Date());
    });

    $(function () {
    //Time mask
        $("[data-mask]").inputmask();
    });

    $(function () {
        $("#btnShow").click(function () {
            $("#content2").show();
        });
    });
    </script>

    <script>
    function showContent() {
  	    var xhttp;

  	    xhttp = new XMLHttpRequest();
  	    xhttp.onreadystatechange = function() {
    	    if (xhttp.readyState == 4 && xhttp.status == 200) {
      	    document.getElementById("content2").innerHTML = xhttp.responseText;
    	    }
  	    };
  	
  	    xhttp.open("GET", "ax_test.asp?", true);
  	    xhttp.send();
    }
    </script>

</body>
</html>

The GET REQUEST Page ax_test.asp

<form name="form2">
        <label>Date : </label>
            <div>From :<input name="dt_DateFr" type="text" date-picker></div>
            <div>To : <input name="dt_DateTo" type="text" date-picker></div>
            <div>Time: <input id="txtOTOut" name="txtOTOut" type="text" 
                data-inputmask="'alias': 'hh:mm'" data-mask>
            </div>
            
    </form>

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

AnandM

0 2

Reply
User: AnandM
Replied: on Aug 03, 2017 04:49 AM
Report

Hi hansheung,

You need to do workaround for maintaining the functionality of plugins.

I have created a sample which full fill your requirement you need to modify the code according to your need.

HTML

<html>
<head>
    <title></title>
    <!-- ALL script in subfolder plugins -->
    <!-- Date Picker -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.min.css" />
    <!-- JQuery 2.2.3 Compressed -->
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <!-- datepicker -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
    <!-- InputMask -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/inputmask.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/inputmask.date.extensions.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/inputmask.extensions.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/css/inputmask.css"
        rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="dvCopy">
        <form name="form1">
        <label>
            Date :
        </label>
        <div>
            From :<input name="dt_DateFr" type="text" date-picker /></div>
        <div>
            To :
            <input name="dt_DateTo" type="text" date-picker /></div>
        <div>
            Time:
            <input id="txtOTOut" name="txtOTOut" type="text" data-inputmask="'alias': 'hh:mm'"
                data-mask />
        </div>
        <button type="submit" id="btnShow" name="btnShow" onclick="showContent();return false;">
            Show</button>
        </form>
    </div>
    <br />
    <br />
    <div id="content2" style="display: none">
        <!-- CONTENT HERE -->
    </div>
    <script type="text/javascript">
        function ApplyFunctionality() {

            //Date picker
            $("[date-picker]").datepicker({
                format: "dd/mm/yyyy",
                autoclose: true
            }).datepicker("setDate", new Date());

            //Time mask
            var selector = $('[data-mask]');
            var im = new Inputmask("hh:mm");
            im.mask(selector);

            //$("[data-mask]").inputmask();
            $("#btnShow").click(function () {
                $("#content2").show();
            });
        }
        $(function () {
            ApplyFunctionality();
        });
    </script>
    <script type="text/javascript">
        function showContent() {
            document.getElementById("content2").innerHTML = document.getElementById("dvCopy").innerHTML;
            ApplyFunctionality();
        }
    </script>
</body>
</html>

Demo

hansheun...

0 3

Reply
ANSWER
User: hansheung
Replied: on Aug 08, 2017 08:36 PM
Report

Manage to get it working by including the jquery in the showContent/

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- ALL script in subfolder plugins -->
   
     <!-- Date Picker -->
    <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
    <!-- JQuery 2.2.3 Compressed -->
    <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!-- datepicker -->
    <script src="plugins/datepicker/bootstrap-datepicker.js"></script>
    <!-- InputMask -->
    <script src="plugins/input-mask/jquery.inputmask.js"></script>
    <script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
    <script src="plugins/input-mask/jquery.inputmask.extensions.js"></script>
</head>
<body>
    <form name="form1">
        <label>Date : </label>
            <div>From :<input name="dt_DateFr" type="text" date-picker></div>
            <div>To : <input name="dt_DateTo" type="text" date-picker></div>
            <div>Time: <input id="txtOTOut" name="txtOTOut" type="text" 
                data-inputmask="'alias': 'hh:mm'" data-mask>
            </div>
            <button type="submit" id="btnShow" name="btnShow" 
                onclick="showContent();return false;">
                Show</button>
    </form>
    <br />
    <br />


    <div id="content2" style="display: none">
        <!-- CONTENT HERE -->
    </div>

    <script>
    $(function () {
    //Date picker
    $("[date-picker]").datepicker({
        format: "dd/mm/yyyy",
        autoclose: true,
        }).datepicker("setDate", new Date());
    });

    $(function () {
    //Time mask
        $("[data-mask]").inputmask();
    });

    $(function () {
        $("#btnShow").click(function () {
            $("#content2").show();
        });
    });
    </script>

    <script>
    function showContent() {
  	    var xhttp;

  	    xhttp = new XMLHttpRequest();
  	    xhttp.onreadystatechange = function() {
    	    if (xhttp.readyState == 4 && xhttp.status == 200) {
      	    document.getElementById("content2").innerHTML = xhttp.responseText;
    	    $("[data-mask]").inputmask();
		    $("[date-picker]").datepicker({
			format: "dd/mm/yyyy",
			autoclose: true,
			}).datepicker("setDate", new Date());
        
        
            }
  	    };
  	
  	    xhttp.open("GET", "ax_test.asp?", true);
  	    xhttp.send();
    }
    </script>

</body>
</html>

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

Apply data mask to DatePicker after GET request from server using jQuery Input mask plugin in ASP.Net

Company

Explore

Follow us

Contact Us