Destroy Bootstrap Modal

Question

I want to Destroy Bootstrap modal on close/hide and when reopen open the new content every time.Im trying to implement this in .net. Please read before marking this as duplicate.

In my master page, Markup for Modal as

<div id="modal" class="modal fade">
        <div class="modal-dialog" role="dialog">
            <div class="modal-content" data-backdrop="static">
                <div id="modalContent">
                </div>
            </div>
        </div>
    </div>

The code to open modal as

 $("a[data-modal]").on("click", function (ev) {
                BlockPage("Loading Dialog");
                $("#modalContent").load(this.href, function () {
                    $("#modal").modal({
                        cache:false,
                        backdrop: 'static',
                        keyboard: false
                    }, "show");
                });
                ev.preventDefault();
                return false;
            });        

In my aspx page, i have following code to open modal as below.

<a runat="server" id="lnkAssignInformed" data-modal="" class="btn btn-info hidden-print assignInformed">Assign Informed</a>&nbsp;

And for shown and hidden events i have following code. for the hidden event inorder to destroy the modal i followed the answer from answer in this post. Stackoverflow Post

  $("#modal").on('show.bs.modal', function (e) {
                $(this).find('.modal-body').css({
                    width: 'auto',
                    height: 'auto',
                    'max-height':'100%'
                });               
            });

            $('body').on('hidden.bs.modal', '#modal', function () {                                
                $('#modal').removeData('bs.modal');
            });

The problem is even after trying to destroy the modal on hidden event, when i re-open the modal i still see the data in modal that was shown when its opened for the first time.

I also tried the following code, but didnt see any difference.

 $("#modal").on('hide.bs.modal', function () {
                $('#modal').data('bs.modal', null);
            });

I'm currently trying this in IE-11. Haven't tested in other browsers.

Is there any way i can get load to trigger on every time the anchor tag is clicked? Any help would be appreciated.

Answer 1

I was able to resolve it my self. the problem was with Jquery.load() caching the results. i was able to destroy cache using the following code. After this the dialog shows new content every time.

 $("a[data-modal]").on("click", function (ev) {
            BlockPage("Loading Dialog");
            $("#modalContent").load(this.href,'f' + (Math.random()*1000000), function () {
                $("#modal").modal({
                    cache:false,
                    backdrop: 'static',
                    keyboard: false
                }, "show");
            });
            ev.preventDefault();
            return false;
        });