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
精彩评论