Trying to remove cache problem

I am using a modal dialog, html for the dialog is as follows:

<div id="mydialog" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog " role="document">
            <div class="modal-content">
                            <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
                                    <div class="modal-title" id="myDialog_title">Document</div>
                            </div>

                            <div class="modal-body">
                                    <div id="my_document_contents"></div>

                            </div>
                            <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="ac.closeDialog('mydialog');">Close</button>
                            </div>
             </div>
        </div>
</div>

Clicking Close button is calling the below closeDialog function:

// Close the dialog specified by the modalID_.
    this.closeDialog = function (modalID__) {

        if (isEmpty(modalID__)) { self.displayError("Invalid modalID_", "closeDialog()"); return false; }

        jQuery(modalID__).modal("hide");
        
    };

The dialog is getting popped up everytime a user clicks on a particular row of a table and the problem I am facing is that when a user clicks on second time on the same row or other row, the contents of previous ajax call isn’t getting removed. I have tried using cache : false in my ajax call which basically adds a timestamp in the GET url which didn’t work. I have tried using cache: false in my ajax call which eventually added a timestamp in the GET URL but it didn’t work. Is there any other approach you guys would suggest to get rid of previous contents?

Here is how my ajax call is defined which is making the modal dialog work:

.done (function (// some parameters here) {
        $('<pre/>').html(doc_contents[1].text_content).appendTo('#mycontents');
        $('#mydialog').modal("show"); 
        

});

The problem doesn’t seem to be the cache but that you’re always appending the new content to the modal, rather than replacing the old content. Maybe try something like

var content = $('<pre/>').html(doc_contents[1].text_content);

$('#my_document_contents').html(content);

instead. If you want that content at the very bottom of the modal (below the footer as with appendTo()), you might need another dedicated container element for this.

Thanks. That worked !!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.