[b]SOLVED
[/b]
Hi,
I tried to search a lot using this forum and google but I haven’t found a solution to my problem.
I’m trying to load dialogs such as register and login from external php file and not storing their code on main page layout, so it will be loaded each time a user call a page but only on request.
The problem is that when I click on a button it opens correctly the dialog so I can see my form but the validation doesn’t work.
This is what I did:
[b]1. create a file called modals.php inside the views/layouts folder of my theme
[/b]
<?php $this->beginWidget('bootstrap.widgets.TbModal', array('id'=>'registerModal')); ?>
<div class="modal-body ext-height">
<a class="close close-sign-up" data-dismiss="modal">×</a>
<?php /** @var BootActiveForm $form */
$form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
'id'=>'registration-form',
'enableAjaxValidation'=>true,
'htmlOptions' => array('name'=>'Registration'),
'action'=>$this->createUrl('registration/Create'),
'enableClientValidation'=>true,
'clientOptions'=>array(
'validateOnSubmit'=>true,
'afterValidate'=>'js:function(form,data,hasError){
if(!hasError){
$.ajax({
"type":"POST",
"url":"'.CHtml::normalizeUrl(array("registration/Create")).'",
"data":form.serialize(),
"dataType":"json",
"beforeSend":function() {
$(".modal-body").css("opacity","0.1");
$(".preloader").show();
},
"success":function(data){
if(data.status == "success") {
setTimeout(function() {
$("div.preloader").hide();
$("div.success").show();
}, 3000);
setTimeout(function() {
$("div.success").hide();
$("#registration-form")[0].reset();
$(".modal-body").css("opacity","1");
$("#registerModal").modal("hide");
window.location.reload(true);
}, 6000);
}
else if (data.status == "ok")
{
alert(data.city);
}
else {
setTimeout(function() {
$("div.preloader").hide();
$(".modal-body").css("opacity","1");
$("#formResult").html("<p style=\'color:red;\'>Database Registration Error, please Contact Us to solve the problem</p>");
}, 4000);
}},
});
}}'
),
));
/*
*
*/
echo '<h4>Sign Up using your Facebook Account</h4>';
$fbsignup=CHtml::image(Yii::app()->theme->baseUrl.'/images/ext_logo/fb-signup.png', 'Sign Up with Facebook',array('id'=> 'fb-signup'));
echo CHtml::link($fbsignup, '/eo');
echo '<br /><p>Or fill out the form below...</p>';
echo '<div class="errorMessage" id="formResult"></div>';
echo $form->textFieldRow($regrmodel, 'first_name', array('class'=>'span4'));
echo $form->textFieldRow($regrmodel, 'last_name', array('class'=>'span4'));
echo $form->textFieldRow($regrmodel, 'username', array('class'=>'span3'));
echo $form->passwordFieldRow($regrmodel, 'password', array('class'=>'span3'));
echo $form->passwordFieldRow($regrmodel, 'password_repeat', array('class'=>'span3'));
echo $form->textFieldRow($regrmodel, 'email', array('class'=>'span4'));
echo $form->labelEx($regrmodel,'city');
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'name'=>'city',
'source'=>CController::createUrl('/registration/cities'),
'options'=>array(
'showAnim'=>'fold',
'minLength'=>'3',
'select'=>'js:function( event, ui ) {
var state1 = "";
if(ui.item.state) {
var state1 = ui.item.state+", ";
}
$("#city").val(ui.item.name+", "+state1+ui.item.country);
$("#Registration_city_id").val(ui.item.id);
return false;
}',
),
'htmlOptions'=>array(
//'onfocus' => '',
'class' => 'span3',
),
));
echo $form->hiddenField($regrmodel,'city_id');
echo $form->error($regrmodel,'city_id',
array('clientValidation'=>'js:
if(jQuery.trim(value)!= \'\' && $("#city").val().length <= 0)
{
$("#Registration_city_id").val("");
}
if(jQuery.trim(value)==\'\' && $("#city").val().length > 0)
{
messages.push("You must select one of the city proposed!");
}
'),true,true);
Yii::app()->clientScript->registerScript('registercity', '
$("#city").data("autocomplete")._renderItem = function( ul, item ) {
if (item.state === "") {
var state = "";
}
else {
var state = item.state+", ";
}
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a href=\'#\' id=\'"+item.id+"\'>"+item.name+", "+state+item.country+"</a>")
.appendTo(ul);
};
$(".close-sign-up").click(function() {
$("#registration-form")[0].reset();
});');
echo '</div>
<div class="preloader" style="display:none;position:absolute;width:42px;height:42px;top:50%;left:50%;margin-top:-21px;margin-left:-21px;z-index:999;opacity:1">'.CHtml::image(Yii::app()->theme->baseUrl.'/images/preload/sign-up-red.gif', 'Loading').'</div>
<div class="success" style="display:none;position:absolute;width:64px;height:64px;top:50%;left:50%;margin-top:-32px;margin-left:-32px;z-index:999;opacity:1">'.CHtml::image(Yii::app()->theme->baseUrl.'/images/preload/sign-up-success.png', 'Success').'</div><div class="modal-footer">';
echo CHtml::submitButton('Submit',array('id' => 'send-link-'.uniqid(),'class'=>'btn btn-primary'));
$this->widget('bootstrap.widgets.TbButton', array(
'label'=>'Close',
'url'=>'#',
'htmlOptions'=>array('class'=> 'close-sign-up', 'data-dismiss'=>'modal'),
));
$this->endWidget();?>
</div>
<?php $this->endWidget(); ?>
2. Then in the RenderModalController.php file …
class RenderModalController extends Controller
{
public function actionRegistration() {
Yii::app()->clientScript->scriptMap['jquery.js'] = false;
$this->renderPartial('//layouts/modals',array('regrmodel' => new Registration));
}
}
3. So in the main.php file inside views/layout
<?php $this->widget('bootstrap.widgets.TbButton', array(
'label'=>'Register',
'type'=>'primary',
'htmlOptions'=>array(
'id'=>'open_modal',
),
)); ?>
Yii::app()->clientScript->registerScript('openmodal', "
$('#open_modal').click(function(e) {
e.preventDefault();
var tag = $('#dialogplace');
$.ajax({
'url': '/eo/renderModal/registration',
'success': function(data) {
tag.html(data);
$('#registerModal').modal('show');
}
});
});");
and obviously I also created the div with ID dialogplace inside main.php
It worked before when I did’t use the renderpartial so the code inside modals.php was included in the main.php file, but now it doesn’t…
thanks!