JS Close表单提交窗口

Question

Update at bottom of post:

I have a page where when a button is pressed, a new window will popup with a form. Below is where I open the popup.

<a><span class="add-on"><i class="icon-plus" style="color: green;" onclick="window.open('<?php echo $this->Html->Url(array('controller' => 'customers', 'action' => 'add?popup')); ?>', 'Add Customer', 'height=630, width=430')"></i></span></a>

When the form is submitted, I need to close that window. The problem I am having now is that the window is closing before the form is fully getting submitted.

Popup Window Code:

<fieldset style="padding-left: 15px;">
<legend>Add Customer</legend>

<?php echo $this->Form->create('Customer', array('inputDefaults' => array('div' => false, 'label' => false))); ?>
    <div class="control-group">
        <div class="input-prepend">
            <span class="add-on"><i class="icon-user"></i></span>
            <?php echo $this->Form->input('first_name', array('placeholder' => 'First Name')); ?>
        </div>
    </div>

    <div class="control-group">
        <div class="input-prepend">
            <span class="add-on"><i class="icon-user"></i></span>
            <?php echo $this->Form->input('last_name', array('placeholder' => 'Last Name')); ?>
        </div>
    </div>

    <div class="input-prepend">
        <span class="add-on"><i class="icon-globe"></i></span>
        <?php echo $this->Form->input('location', array('placeholder' => 'Location')); ?>
    </div>

    <div class="control-group">
        <div class="input-prepend">
            <span class="add-on"><i class="icon-phone"></i></span>
            <?php echo $this->Form->input('phone_number', array('class' => 'maskedPhone', 'placeholder' => 'Phone Number')); ?>
        </div>
    </div>

    <div class="control-group">
        <div class="input-prepend">
            <span class="add-on"><i class="icon-envelope"></i></span>
            <?php echo $this->Form->input('email', array('placeholder' => 'Email')); ?>
        </div>
    </div>

    <!-- Close Form -->
<?php echo $this->Form->end(array(
    'label' => 'Save Customer',
    'id' => 'saveCust',
    'class' => 'btn btn-primary',
    'div' => false
)); ?>

<?php echo $this->Html->script('jquery.maskedinput.min', array('inline' => false));
  echo $this->Html->script('maskedinput', array('inline' => false));

$this->start('script'); ?>
    <script type="text/javascript">
        $(document).ready(function () {     
            inputs.maskedInputs();

            // Get queryString to close popup window
            var queryString = window.location.search.substring(1);
            if (queryString == "popup"){
                $('#CustomerAddForm').submit(function() {
                    window.close();                 
                });                 
            }
        });
    </script>
<?php $this->end(); ?>

---

Trying to use Ajax call now with no luck:

$('#saveCust').click(function() {
                    alert("test");
                    $.ajax({
                        type: "POST",
                        url: "<?php echo $this->Html->Url(array('controller' => 'Customers', 'action' => 'add')); ?>",
                        data: $('#CustomerAddForm').serialize(),
                        success: function(data)
                        {
                            alert("Test");
                            window.close();
                        }
                    })
                });
                return false;               

Answer 1

You have a race condition and the window.close will always win. You need to close when the form is DONE submitting.

Either convert it over to use an Ajax call or call the window.close() in the response of the form submission.