0

I hope someone can help. I am missing some logic and styles while I am running the form in JQuery modal window with the 'modal' property is set to 'true'. I am trying to utilize the form from http://jqueryui.com/dialog/#modal-form.

The same code used outside modal window is running correctly. I am not sure how to fix it and decided to share it with you.

I created a page in JSFiddle - http://jsfiddle.net/vladc77/GcQRg/16 to show the code. However, the modal window cannot be ran from there. As a result, I uploaded the same test in here - http://www.vladcdesign.com/modalWindow

When I set (modal: true) then I am getting the following problems.

1.The check boxes in work hours form should enable/disable menus to set the time

2.“More” check box should show/hide a text field

3.I lost ability to set margins between elements in Hours settings form. Now all menus are touching each other even though I use margins styles. They just don’t apply.

All of these issues are present only while I run this DIV in a modal window. It works OK outside the modal window. I am wondering if someone can help and explain what is wrong with the code. Any advice is highly appreciated.

4

2 回答 2

1

查看小提琴和您在网站上发布的示例，您会收到以下错误：

未捕获的 ReferenceError：未定义 closedHours

问题似乎来自这一行：

$(this).append(' <span class="closed custom-checkbox"><input type="checkbox" name="closed" value="closed" class="closed" id="closedHoursElement" onchange="closedHours()"><span class="box"><span class="tick"></span></span></span>Closed');

此外，您无法在小提琴上加载对话框的原因是您以错误的顺序包含 JS 文件。应该是jquery，jquery ui，然后是jquery ui.selectmenu。

您对复选框的更改功能也有一个错误，应该是这样的：

$('input[type=checkbox]').change(function() {
    if (!this.checked) {
        $(this).parent().siblings('select').removeAttr("disabled");
    }
    else {
        $(this).parent().siblings('select').attr('disabled', 'disabled');
    }
});

即使我改变了所有这些，复选框仍然不起作用，所以我删除了您的自定义 jquery 和 jquery ui 引用。当我这样做时，它们工作得很好，所以您为自定义这些所做的事情就是导致您的问题的原因。您可以在此处查看我的更改。

于 2012-10-13T09:16:48.527 回答
0

第一个 $(document).ready(function(){}); 和第二个 $(function() { }); 是相同的，代码将按照它们在这些块中的顺序执行。

但是$(window).load(function(){ }); 有点不同，它稍后会执行。检查这篇文章，看看有什么不同。

您可以通过将单击事件定义为“打开模式窗口”按钮来进行一些实验，并在触发时执行所有绑定：

$('#create-user').bind('click',function(e){
  // To avoid navigating by link
  e.preventDefault();
  e.stopPropagation();
  // Do every binding / appending 
  // $('.workDayHours').each(function() { ...
});
于 2012-10-13T09:01:23.723 回答