Binding a js action to a submit button? - how to handle this on a clean way?

Yii 1.1 General Discussion
1

Hey guys!

What I want to do, is using a submit button (or ajaxSubmitButton, or whatever) to submit a POST to a controller, but on the same button I want to bind a "colorbox" open up (yii plugin) http://www.yiiframework.com/extension/jcolorbox#hh1 .

So finally: clicking the submit button should result in a POST and in the same moment a "lightbox" / "colorbox" or however you call it should open … anyone got a nice solution for this issue? Would be awesome!

I’ve tried some things out so far, but I cant make both actions run. Always just one of them. It seems like binding the colorbox to the submit button prevents submiting the POST …

This was one tryout with an ajaxSubmitButton (didn’t do anything at all in the end):




<?php

    //Create an instance of ColorBox

    $colorbox = $this->widget('application.extensions.colorpowered.JColorBox');

    $colorbox

            ->addInstance('.dialog-modal', array('width' => "390px", 'inline' => true, 'href' => "#comment_dialog" . $entry->entry_id, 'transition' => 'elastic', 'speed' => 100));

    ?>

<?php echo CHtml::ajaxSubmitButton('OK', 'comment/create', array(), array('class' => 'dialog-modal')); ?>

The normal submit button seems to just handle 1 action (either the submit, or if the class is set, it just opens the colorbox


<?php echo CHtml::submitButton('Submit'/*, array('class' => 'dialog-modal')*/); ?>

Would be so great, if you could help me once again … I’m stuck! :frowning:

Edit: Or is it maybe possible to start opening the colorbox from the controller (at the end of the action method?) … instead of a redirect or something …

2

Have you thought about showing the colorbox when the form has been submitted, for example:

The form is submitted via an ajax call to your controller

You set up a listener to wait for confirmation/ a callback function

If all is good, show the colorbox:


$.colorbox({href:"thankyou.html"});

I’m not sure how you would use the jcolorbox Yii extension to show the colorbox without binding it to anything, but the ColorBox website says this is possible behaviour.

3

Thanks for your reply georgebuckingham,

this sounds like a sloution. I’m just not really sure how to set up the listener and tell the colorbox plugin to open this in a colorbox. Anyone got experience with this? Would be great … I’m a bit stuck in this point.

4

My solution means you don’t use the jcolorbox extension, as I’m not familiar with it - but it’s probably very easy to add it in later.

Your CHtml.ajaxSubmitButton needs to be configured a bit differently:


echo CHtml.ajaxSubmitButton('Submit Form', array(

    'success'=>"function(data, textStatus, jqXHR) {

       $.colorbox({href:\"" . Yii::app()->baseUrl . "/thankyou.html\"});

 	   return true;

    }",

));

If I’ve written it correctly, if the form is submitted successfully, and if you have jQuery and the colorbox script being included into the page, the colorbox should show up with the URL you specify in its href property.

5

Thanks a lot georgebuckingham for your help.

I finally solved it (not a final solution, but it works like I want it) like this:


<?php

echo CHtml::ajaxSubmitButton('Posten', 'comment/create', array(

     'success' => 'js:function(data, textStatus, XMLHttpRequest) { $(".dialog-modal").colorbox({open:true}); }'

)); ?>
6

You can also avoid to use ajaxSubmitButton, use a simple submit button and trigger the ajax request on the onSubmit of the form.

In this way is easier to manage, and works even if the user press enter on a textbox.

7

Thanks for your reply zaccaria! I guess i’ll give this a try … the only thing i can’t figure out, is how can I add the js code to the CActiveForm? and where?

js code would be:


$("#comment_dialog_box' . $entry->entry_id . '").colorbox({open:true});

CActiveForm looks like this:


$form = $this->beginWidget('CActiveForm', array(

                'id' => 'comment-form' . $entry->entry_id,

                'enableAjaxValidation' => true,

                'enableClientValidation' => true,

            ));

is it also possible to wait for a "success" message on submit? and then after the success message run the js code?