Modal work only first time

Yii 2.0 General Discussions
1

I’m using a Bootstrap Modal to display the details relating to employees. This works fine the first time, but subsequent calls load properly, but when you click the close button instead of hiding the modal popup it seems to redirect to the employee controller and echos the json reply.

The button in my main view to open the modal performs the following js

$(document).on("click", '.viewEscortDetails', function(event) { 
    var row = $(this).attr('id').split("-")[2];
    var empid = $('#projectslegs-'+row+'-empid option:selected').val();
    var empname = $('#projectslegs-'+row+'-empid option:selected').text();
    if(empid!==''){
        $('#modalPopup3').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
        $('#modalPopup3 #modalHeader #modalHeaderTitle').html('<h4>' + empname + '</h4>');
    }else{
        alert("No escort selected.\\n\\nPlease make a selection and try again.");
    }
    return false;
});

The Modal looks like

Modal::begin([
        'id'=>'modalPopup3',
        'size'=>'modal-xlg',
        'header' => '<span id="modalHeaderTitle"></span>',
        'headerOptions' => ['id' => 'modalHeader'],
        'closeButton' => false,
        'options' => ['class' => 'centered-modal modal3',],
        'clientOptions' => [
            'backdrop' => 'static', //true,
            'keyboard' => false, // true,
        ]
    ]);
    echo '  <div id="modal-system-messages" style="opacity: 1; display: none"></div>';
    echo '  <div id="passInfo" style="opacity: 1; display: none"><input type="hidden" name="refBtn" id="refBtn" value=""/></div>';
    echo "<div id='modalContent'></div>";
Modal::end();

This is the js for the employee form’s (the modal view) close

$('form#{$model->formName()}').on('beforeSubmit', function(e){
    var \$form = $(this);
    $.post(
        \$form.attr("action"), //serialize Yii2 form 
        \$form.serialize()
    )
    .done(function(result){
        result = JSON.parse(result);
        if(result.status == 'Success'){
            $(\$form).trigger("reset");
            if($('#modalReportButton').length){
                $.pjax.reload({container:'#grid'}); //requery the main form's grid with the new addition
                $(document).find('#modal').modal('hide');
            }else{
                $(document).find('#modalPopup3').modal('hide');
            }
        }else{
            $(\$form).trigger("reset");
            if($('#modalReportButton').length){
                $("#message").html(result.message);
            }
        }
    })
    .fail(function(){
        console.log("server error");
    });

    return false;
});

Why does it work once, but fail subsequently?
How can I resolve this?

2

I’ve fixed the issue by adding to the employee form’s (the modal view) close jQuery that resets the modal popup so it is basically empty as it was at first load.

I’d still love to know if there is a standard, better way of dealing with this as this feel odd to need to do this.