Yii - How to open Jquery Dialog widget and submit form

Question

I have looked around and found various examples, yet I am unsure if I am implementing them correctly. I assume not as anytime I click on the submit button, it reloads the page and does not submit anything.

Source: Yii, attaching a javascript function on submit button

The intended goal is the following: I want to have it that after a user enters their message, they click "Fire!". Upon doing so the message will be validated and if validated correctly the script will be executed.

What I want the Jquery Dialog box to do is pop open while the script executes. (since it takes a few moments) Once the script completes it will take the user to the main page.

Here is how I have it setup currently with the various attempts commented out:

Jquery

bouncing = '<?php echo CJavaScript::encode($isbouncing);?>';

    $(function() {
        $( "#dialog-message" ).dialog({
            modal: true,
            draggable: false,
            resizable: false,
            autoOpen: false,
            show: {effect: "blind", duration: 500},
            hide: {effect: "explode", duration: 500},
            buttons: { Ok: function() {$( this ).dialog( "close" );} }
        });
        if(bouncing = 1)
            $( "#dialog-message").dialog( "open" );

        $("#bouncing-message").dialog({
            modal: true,
            draggable: false,
            resizable: false,
            autoOpen: false,
            show: {effect: "blind", duration: 500},
            hide: {effect: "explode", duration: 500}
        });
 $("#bounce-log-form").submit(function() {
                $('#bouncing-message').dialog('open');
            });

            //Grab closest form
                //var form = ($this).closest("bounce-log-form");
            //Freeze submission
                //e.preventDefault();
            //Get the action-url of the form
                //var actionurl = e.currentTarget.action;
            //Display the dialog box
                //$('#bouncing-message').dialog('open');
            //Now we can submit our form
                //form.submit();
            /*$.ajax({
                url: actionurl,
                type: 'post',
                dataType: 'json',
                success:  function(){
                    $('#bouncing-message').dialog('close');
                }
            })*/

        });

Form

<div id="NB_messagebox" class="NB_console_content form">
    <?php
    $form = $this->beginWidget('CActiveForm', array(
        'id' => 'bounce-log-form',
        'focus' => array($logmodel, 'reasonBounced'),
        'enableAjaxValidation' => true,
        'clientOptions' => array(
            'validateOnSubmit' => true,
            'validateOnChange' => false,
            'validateOnType' => true,
        ),
    ));
    ?>
    <p class="note">Fields with <span class="required">*</span> are required.</p>
    <?php echo $form->errorSummary($logmodel); ?>

    <div class="row">
        <?php echo $form->labelEx($logmodel, 'reasonBounced'); ?>
        <?php echo $form->textArea($logmodel, 'reasonBounced', array('rows' => 6, 'cols' => 50)); ?>
        <?php echo $form->error($logmodel, 'reasonBounced', array(), true, true); ?>
    </div>
    <div class="row buttons">
        <?php echo CHtml::submitButton($label = 'Fire!', array('name' => 'BounceButton', 'class' => 'NB_bounce_Button', 'submit' => Yii::app()->createUrl("/whammy/confirm", array("id" => $model->id)))) ?>
    </div>
    <?php $this->endWidget(); ?>
    <?php echo CHtml::endForm(); ?>

    <div id="dialog-message" title="Multi-Bounce Safety">
        <p>
            <span class="ui-icon ui-icon-flag" style="float:left; margin:0 7px 50px 0;"></span>
            A node is currently being bounced, proceed with caution!
        </p>
        <p>
            <b>Press "Ok" to continue</b>.
        </p>
    </div>
    <div id="bouncing-message" title="Bouncing Node">
        <p>
            <span class="ui-icon ui-icon-flag" style="float:left; margin:0 7px 50px 0;"></span>
            Bouncing node:  <?php echo $model->name; ?>
        </p>
    </div>

</div>

I've notice that you have excess string in your example <?php echo CHtml::endForm(); ?> — SiZE
– SiZE, Commented Dec 9, 2015 at 5:30
My apologies, but could you clarify I am not understanding what you mean by excess string. — JamesC
– JamesC, Commented Dec 9, 2015 at 17:47

SiZE · Accepted Answer · 2015-12-10 07:03:10Z

1

Updated. Open window while form sending.

$("#bounce-log-form").submit(function(e){
    e.preventDefault(); // prevent form submiting and page reload
    $('#bouncing-message').dialog('open');
    $.ajax({
       type: 'POST',
       url: $("#bounce-log-form").attr('action'), // or location.href or <?= Yii::app()->createUrl()
       data: $("#bounce-log-form").searialize(),
       cache: false
    });

    return false;
});

edited Dec 10, 2015 at 7:03

answered Dec 9, 2015 at 5:28

SiZE

2,2671 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JamesC Over a year ago

This somewhat works, however as I have attempted before, this will open the dialog box as I need but the form itself never submits. So now I just have a button that submits nothing and opens a box. I'm looking to have it submit the form and then open the dialog box while the script that gets executed is running in the background.

SiZE Over a year ago

I've just update code example on your needs. @JamesC

Collectives™ on Stack Overflow

Yii - How to open Jquery Dialog widget and submit form

Jquery

Form

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Jquery

Form

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related