Question

I can’t figure out how to get the options set for draggable and resizeable for the jquery.ui.dialog. I have a JS file that is called from the main page:

/js/rental/add.js:

var additempopup = null;     
$(document).ready(function() {
        var $dialog = $('#adddialog').load('additem')
            .dialog({
                autoOpen: false,
                title: 'Add Item',
                width: 'auto',
                position: 'center', 
                resizeable: true,
                modal: true,
                draggable: true,
                closeOnEscape: true,
                closeText: 'close'
            });

        $('.jsAddItemPopup').click(function() {

            $dialog.dialog('open');
            return false;
        });
        $('#modalclose').click(function() {
            $dialog.dialog('close');
            return false;
        });
        additempopup = $dialog;
     } );

It is called from the main page which is a cakephp view.

excerpt from /views/rentals/add.ctp:

<?php
    $javascript->link('jquery/js/jquery-1.4.4.min', false);
    $javascript->link('jquery/ui/jquery.ui.core', false);
    $javascript->link('jquery/ui/jquery.ui.widget', false);
    $javascript->link('jquery/ui/jquery.ui.dialog', false);
    $javascript->link('jquery/rentals/add.js', false);
       echo $html->css('ui-lightness/jquery-ui-1.8.9.custom');

?>
<?php
echo $html->link(
'Add Item', '#', array('title' => 'Add Item', 'class' => 'jsAddItemPopup'));
?>
<div id="adddialog" class="adddialog" style="display: none;"></div>

the pop up is loading the following view.

excerpt from /views/rentals/additem.ctp:

  <div id='ajax-content'>
<?php   
 echo $ajax->form('edit', 'post', array(
                        'model'    => 'RentalLineitem',
                        'url'      => array( 'controller' => 'rentals', 'action' => 'additem')
));   ?>

<table>

    <tr>
        <td style="text-align: left;">
             <?php  echo $this->Form->submit('Cancel', 
                array('name' => 'cancel', 
               'onclick' => "additempopup.dialog('close'); return false;")); ?>
        </td>
        <td style="text-align: right;">
             <?php  echo $this->Form->submit('Add Item', array('name' => 'Save')); ?>
        </td>
    </tr>
    </table>

    <?php   echo $this->Form->end();   ?>
    </div>

Everything works, the Add Item link brings up the modal dialog, the “Cancel” in the modal dialog closes the window, the “Add Item” causes an Ajax post back correctly, but it is poping up on the upper right of the screen, instead of in the center, and the dragging and the resizing is not working. and I’m getting a bit frustrated trying to get this to work. I’ve tried mucking around for a while to no avail.

UPDATE: AS per the solution suggested, I was missing dependencies, I added them to the main page /view/rentals/add.ctp:

<?php
    $javascript->link('jquery/js/jquery-1.4.4.min', false);
    $javascript->link('jquery/ui/jquery.ui.core', false);
    $javascript->link('jquery/ui/jquery.ui.widget', false);
    $javascript->link('jquery/ui/jquery.ui.mouse', false);
    $javascript->link('jquery/ui/jquery.ui.draggable', false);
    $javascript->link('jquery/ui/jquery.ui.resizable', false);
    $javascript->link('jquery/ui/jquery.ui.position', false);
    $javascript->link('jquery/ui/jquery.ui.dialog', false);
    $javascript->link('jquery/rentals/add.js', false);
       echo $html->css('ui-lightness/jquery-ui-1.8.9.custom');

?>

Answer 1

You’re likely missing the ui.mouse, ui.draggable, and ui.resizeable dependencies.
http://jqueryui.com/demos/dialog/