CODEWITHSUNDEEP
jquerytwitter-bootstrap
user3817538
user3817538

Reputation: 15

jquery datepicker not showing boostrap modal 3

I open the bootstrap modal by clicking on a button. The modal opens and there is a input field that is hooked to datepicker. I click in the textbox and I see the calendar. I close the modal. I open the modal again, then click in the textbox, the calendar doesn't show up. Why isn't the datepicker showing up second time i open the modal and click in the textbox?

i have a partial view _RequestAppointment with the following javascript at bottom.

<script>
    $(function () {

        $(".requestedAppointmentDate").datepicker();

        $('#myModal').on('hidden.bs.modal', function () {
            //alert('hello');
            //$(".requestedAppointmentDate").datepicker("destroy");
            //$(".requestedAppointmentDate").removeClass("hasDatepicker").removeAttr('id');
            $(".requestedAppointmentDate").datepicker("destroy");
        });

        $('#myModal').on('show.bs.modal', function () {
            //$('.HomeContainer').addClass('blur');
            $(".requestedAppointmentDate").datepicker({});
        })

    });
</script>

This is the javascript in home page. I am only showing the code relevant to the _RequestAppointment partial view. 

$(function () {
    function onRequestAppt() { var url = '@Url.Action("_RequestAppointment", "Home")'; ResetModal(); LaunchModal(url); }



    function ResetModal() {      // Resets the popup
                $('body').on('hidden.bs.modal', '.modal', function () {
                    $(this).removeData('bs.modal');
                });
            }
        function LaunchModal(url) {
            $('#myModal').modal({
                remote: url,
                backdrop: 'static'
            });
        }


    $('#myModal').on('show.bs.modal', function () {
                    $('.HomeContainer').addClass('blur');
                    //$(".requestedAppointmentDate").datepicker({});
                })

                $('#myModal').on('hide.bs.modal', function () {
                    $('.HomeContainer').removeClass('blur');

                });
}

I have searched on google regarding this and found no solution. Please help.

Upvotes: 0

Views: 366

Answers (3)

user3817538
user3817538

Reputation: 15

thanks to LiverPoolOwen for pointing out the bs.modal.shown() event. All i had to do was initialize my datepicker in shown() event and thats it. By mistake I was initializing the datepicker in bs.modal.show() event.

I didn't have to destroy the datepicker or anything like that.

Upvotes: 0

LiverpoolOwen
LiverpoolOwen

Reputation: 816

I searched the jquery ui datepicker and found this:

$('#myModal').on('hidden.bs.modal', function () {
    $("#datepicker").datepicker( "destroy" );
})

Try calling it on close.

Also where is your on open script to initialise the calender?

$('#myModal').on('shown.bs.modal', function (e) {
  $("#datepicker").datepicker({});
})

Upvotes: 1

dbrin
dbrin

Reputation: 15673

Without seeing the code the issue is most likely in the location of the call to initialize the calendar plugin.

If your view does get destroyed then onShow method is fine, because you are guaranteed that it will be called for a fresh showing. However Modal views typically do not get destroyed properly (intentionally) unless you manage the lifecycle of those views on your own.

A common issue in these cases are the Ghost Views (they don't fully get destroyed) that hold on to the listeners on DOM elements, you may also have repeated dom elements from showing the view multiple times. (inspect your DOM)

Using Backbone with Marionette in my case I moved the initialization of the plugin to onDomRefresh method from the render method, because I was using ModelBinder to re-render the view on model change and vice versa. On subsequent re-rendering of the same view the onShow method was not getting called but onDomRefresh was.

Hope this helps.

Upvotes: 0

Related Questions