Cakephp 2.0 implementing jquery UI - jquery-ui

Question

Okay so I am using cake PHP 2.0..just started using it so I am a total noob. I want to use dialog boxes to show some messages for an application so I am able to include the necessary javascript files and css for the jquery UI.
But when I define the function, It doesnot work instead when i look at the source code the script block in which i define the function looks incomplete as the closing tag '' is not highlighted. i hope i am making sense. here is the code snippet:
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
in 'index.ctp'.
I am certain that the js source files are loaded correctly
I picked it up from the jqueryUi site. I would be really grateful if some on could help me get started with writing javascript in cakePHP2.0. Thanks a ton

Answer 1

You should consider using cake's block or Element "mini-views." for that I'd use an element.
put something like this in app/view/Elements/loginDialog.ctp. I'll explain where the variable is decalred in the next section.
<div id="dialog" title="Basic dialog">
<?php echo $this->Form->create($ModelName); ?>
<?php
$this->Form->input('username');
$this->Form->input('password');
?>
<?php $this->Form->end('Login'); ?>
</div>
In your app/View/ControllerName/action_name.ctp, include something like this. Note that i'm able to pass in variables (Like the one that i used for the 1st Form parameter).
//in the view file
echo $this->element('loginDialog', array('ModelName'=>'User'));
Lastly you'll need to add the js. You could put this in your app/View/Layout/default.ctp. let's just say for instance you have a login link inside your navigation that you want to trigger this dialog:
<script>
$(document).ready(function(){
$("#loginNavLink").on("click", function(event){
$('#dialog').dialog();
});
})
</script>
Hope this helps!