开发者

jquery.ui.dialog options not being set

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.dial开发者_JS百科og('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');

?>


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


In your example above you are spelling resizable wrong. Drop the e before the able

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜