Yii CJuiDialog isn't being recognized - yii

Question

I've went through this tutorial http://www.yiiframework.com/wiki/561/ajax-login-form-with-validation-errors-inside-jquery-modal-dialog/ It appears to be functioning properly, but instead of the form being in the modal dialog, it just renders it right on the page like zii.widgets.jui.CJuiDialog isn't even there.
<?php $this->beginWidget('zii.widgets.jui.CJuiDialog',array(
'id'=>'login-dialog',
'options'=>array(
'title'=>'Login',
'autoOpen'=>false,
),
));?>
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'user_login_form',
'enableAjaxValidation'=>false,
'enableClientValidation'=>true,
'method' => 'POST',
'clientOptions'=>array(
'validateOnSubmit'=>true,
'validateOnChange'=>true,
'validateOnType'=>false,
),
)); ?>
<h1>
Login</h1>
<p>
Please fill out the following form with your login credentials:</p>
<p class="note">
Fields with <span class="required">*</span> are required.</p>
<div id="login-error-div" class="errorMessage" style="display: none;">
</div>
<div class="row">
<?php echo $form->labelEx($model,'username'); ?>
<?php echo $form->textField($model,'username',array("onfocus"=>"$('#login-error- div').hide();")); ?>
<?php //echo $form->error($model,'username'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'password'); ?>
<?php echo $form->passwordField($model,'password',array("onfocus"=>"$('#login-error- div').hide();")); ?>
<?php //echo $form->error($model,'password'); ?>
<p class="hint">
Hint: You may login with <tt>demo/demo</tt>.
</p>
</div>
<div class="row rememberMe">
<?php echo $form->checkBox($model,'rememberMe'); ?>
<?php echo $form->label($model,'rememberMe'); ?>
<?php echo $form->error($model,'rememberMe'); ?>
</div>
<div class="row submit">
<?php echo CHtml::ajaxSubmitButton(
'Sign In',
array('/site/login.GetLogin'),
array(
'beforeSend' => 'function(){
$("#login").attr("disabled",true);
}',
'complete' => 'function(){
$("#user_login_form").each(function(){ this.reset();});
$("#login").attr("disabled",false);
}',
'success'=>'function(data){
var obj = jQuery.parseJSON(data);
// View login errors!
// alert(data);
if(obj.login == "success"){
$("#user_login_form").html("<h4>
Login Successful! Please Wait...</h4>
");
parent.location.href = "/";
}
else{
$("#login-error-div").show();
$("#login-error-div").html("Login failed! Try again.");$("#login-error-div").append("
");
}
}'
),
array("id"=>"login","class" => "btn btn-primary")
); ?>
</div>
<?php $this->endWidget(); ?>
</div>
<!-- form -->
<?php $this->endWidget('zii.widgets.jui.CJuiDialog'); ?>
Its suppose to render like this above so when i click the link below it opens
echo CHtml::link('Login', array('/site/login.GetLogin'), array('onclick'=>'$("#login-dialog").dialog("open"); return false;'));
Its built in a widget, if you have a look at the tutorial. Here's the complete widget
<?php
class loginProvider extends CWidget{
public static function actions(){
return array(
'GetLogin'=>'application.components.actions.getLogin',
);
}
public function run(){
$this->renderContent();
}
protected function renderContent(){
echo '<span style="float:right;">';
if(Yii::app()->user->isGuest){
echo CHtml::link('Login', array('/site/login.GetLogin'), array('onclick'=>'$("#login-dialog").dialog("open"); return false;'));
echo '</span>';
$this->getController()- >renderPartial('application.components.views.login',array('model'=>new LoginForm));
}
else
echo CHtml::link('Logout ('.Yii::app()->user->name.')', array('site/logout'), array('visible'=>!Yii::app()->user->isGuest));
echo '</span>';
}
}