I have a CJuiDialog and below is the code
<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mymodal',
'options'=>array(
'title'=>'Your 10 seconds take you into ....',
'width'=>700,
'height'=>400,
'autoOpen'=>true,
'resizable'=>false,
'modal'=>true,
'closeOnEscape' => false,
),
)); ?>
In this dialog I have form and in the form I have below submit button
<?php echo CHtml::submitButton('Submit', array('onclick'=>'js:function(){ alert("test"); $(#mymodal).dialog("close");}',
)); ?>
on clicking on this button, I want to close this dialog and submit the form . But the above code what I wrote in Button is not working . any syntax errors ?
Other way I tried is , I used buttons in the dialog box and able to close the dialog using
`js:function(){$(this).dialog("close")`
But I am not able to submit the form there . So took the first approach .
Could any one help me the correct solution ?
Thanks and Regards
Kiran
First of all you have to understand/remember that by default a html submit button navigates to or loads the action url of the form. So, provided your action url is correctly specified, the default button will simply submit the form and navigate to that url.
If this happens and the action url and the current page url are not the same, you'll not be seeing the dialog box again anyway(due to the navigation).
But incase your action url and current url are the same*, then obviously after default submission the same url will be loaded again, and since your dialog is
'autoOpen'=>true
, it will open again.So the best course of action i can see for you is using jquery's ajax to submit your form. This can be done in 3 ways:
Use
ajaxSubmitButton()
directly in the form:Use a button of the dialog to submit the form. The sample below uses
$.post()
shorthand to post an ajax request, and.serialize()
to serialize the form data:You can also use the normal submit button but you'll have to use ajax again:
[*] if you are using CActiveForm and haven't specified the
'action'
this happens by defaultFirstly, don't put
js:
in youronclick
value. The right prefix isjavascript:
and it is unneeded inon*
whose values are always scripts, by default in Javascript.Secondly, you defined an anonymous JS function that is never called.
Then learn to use a JS console to see the errors, and a JS debugger to run your code step by step. In Firefox, you can use the firebug extension. In Chrome or Opera, press
Ctrl-Shift-I
to open the developer block that contains the JS tools. Then it will be easy to fix your JS code that is currently:See the errors? There should be no function as noted above, and you forgot to quote a text.