Bootstraps Modal Popup not deleting displayed content when closed?

Bootstraps Modal Popup not deleting displayed content when closed?

Asked on October 26, 2018 in Bootstrap.
Add Comment


  • 2 Answer(s)

    Am displaying dynamic content from php server side on a Bootstraps 3 Modal view. when I display the first dynamic content and close the modal. the displayed data is not deleted.

    If I click on the second the second modal button. I will still be seeing the previous displayed data along the the new content for dynamic data 2.

    Each time modal button is clicked, it keeps on appending new content in the modal.

    I need to delete all displayed dynamic content each time modal button is closed

    I have tried solution here: Delete the existing content/data when bootstrap modal is closed

    // when modals shown
    $('#confirm-delete').on('shown.bs.modal', function(e) {
        var url = $(e.relatedTarget).data('href');
    $('button.delete').click(function(){
        alert(url);
    });
    });
    // when modals closed
    $('#confirm-delete').on('hidden.bs.modal', function(e) {
        $(this).removeData('bs.modal');
    });
    
    Answered on October 26, 2018.
    Add Comment

    This is one more solution to the problem

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
        $(document).ready(function(){
            $("#modal").on('hidden.bs.modal', function () {
               $(this).data('bs.modal', null);
            });
        });
        </script>
        <script>
        $(document).ready(function(){
            $(".myModalink_video").click(function(){
     
        var rec_uid = $(this).attr("id");
        $('#loader_video').fadeIn(400).html('<span class="alerts alert-info"><img src="loader.gif" align="absmiddle"> Please Wait,Video is Loading.....</span>');
        $.ajax({
            type: 'POST',
            url: 'video.php',
            data: { rec_uid: rec_uid},
            success: function (data) {
                $('#loader_video').hide();
                $('#alertbox_video').fadeIn('slow').prepend(data);
            }
        });
    })
        });
        </script>
     
        <button id="89" data-toggle="modal" data-target="#myModal_video" class="btn btn-default myModalink_video">View Youtube Videos 1</button><br>
        <button id="90" data-toggle="modal" data-target="#myModal_video" class="btn btn-default myModalink_video">View Youtube Videos 2</button><br>
     
        <div class="modal fade" id="myModal_video" role="dialog">
            <div class="modal-dialog">
     
        <!-- Modal content-->
        <div class="modal-content">
            <div style="background:#3B5998;color:white" class="modal-header">
            <button type="button" class="pull-right btn btn-danger" data-dismiss="modal" style="color:white">Close</button>
            <h4 class="modal-title">Hi Welcome</h4>
        </div>
        <div class="modal-body">
            <!--display dynamic content Starts-->
            <h3>Propertises video</h3>
            <div id="loader_video"></div>
            <div id="alertbox_video"></div>
     
            <!-- Ends-->
        </div>
            <div style="20%" class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel/Close</button>
            </div>
        </div>
    </div>
        </div>
     
    </body>
    </html>
    video.php
     
    <?php
    $rec_uid = $_POST['rec_uid'];
    ?>
     
    <?php
    if($rec_uid =='89'){
        ?>
        Video 1:<br>
        <iframe id="yVideo" width="420" height="315" src="https://www.youtube.com/embed/hiHpzhyG6x4"> </iframe>
        <?php
    }
    ?>
    <?php
    if($rec_uid =='90'){
        ?>
        Video 2: <br>
        <iframe id="yVideo" width="420" height="315" src="https://www.youtube.com/embed/xv6l1vOUZTg"></iframe>
        <?php
    }
    ?>
    <br>
    <br>
    
    
    
    
    Answered on October 26, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.