Cakephp 2.0 implementing 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

i got it working..I need to show a view in that dialog. I got this view for login called ../users/login.ctp. But i am not using the js helper. How can I do it? — Vivek Pradhan
– Vivek Pradhan, Commented May 17, 2012 at 16:47

Todd · Accepted Answer · 2013-03-22 11:04:19Z

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!

answered Mar 22, 2013 at 11:04

Todd

5,4843 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vivek Pradhan Over a year ago

Thank you so much Todd, your solution really helped! Its great to see people respond to old questions like these. Helped improve my understanding of cakePHP! Thanks again :D

Todd Over a year ago

no problem! I'm just learning cake, as well. So, believe me, i understand how confusing/lacking the docs are!

Collectives™ on Stack Overflow

Cakephp 2.0 implementing jquery UI

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related