如何调试Jquery对话框

Question

我有一个比较简单的对话框制作工具，使用的是jquery，它在三个地方中有两个地方能正常工作。在第三个地方，当我尝试使用它时，显示对话框后，表单中的字段都变成了不可用状态。

这个代码的基本概念是，表单在网站的另一个页面上，为了方便，当启用javascript时，你可以点击链接，弹出一个对话框，然后在当前页面完成操作。'rel'属性里有一个选择器，用于jquery的.load方法，成为对话框标题的内容来自'href'链接的页面，加载后就变成了对话框的内容。如果javascript没有开启，你就只能看到同样的表单，但会有所有的头部、底部和菜单内容。

我该如何弄清楚在对话框显示时发生了什么呢？Firefox变得很慢（右键菜单弹出得很慢），而且表单字段都不能使用。我真的不知道该怎么调试，想弄清楚那时发生了什么。按TAB键可以选择对话框的“关闭”按钮，也可以选择已经有值的字段，但就到这里了。ESC键还是能关闭对话框，所以键盘是正常工作的。我发现还有一个人报告了类似的问题 CkEditor Bug，他们似乎解决了这个问题，但我不知道他们是怎么做到的。

在我忘记之前：JQuery 1.4.2 JQueryUI 1.8.2

这个网址看起来是：

<a class='dialog' href='/messages/compose/fsm92766/' rel = ' #compose-message' title='Send Message to'>Send Message To</a>

设置代码看起来是：

    <script lanaguage='javascript'> 
    $(document).ready(function() {
        $('a.dialog').each(function() {
            var $link = $(this);
            var $dialog = $('<div></div>')
                .dialog({
                    autoOpen: false,
                    title: $link.attr('title'),
                    modal: true,
                    resizable: false,
                    width: 'auto',
                    position: 'center'
                });

            $link.click(function() {
                var $url = $link.attr('href') + $link.attr('rel');
                $dialog.html($url + "<br/>" +"<img src='http://ender.intomec.com/static/images/loading.gif'></img>");
                $dialog.load($url)
                $dialog.dialog('open');
                return false;
            })
        })
    });
</script>

而对话框的html看起来是：

<html>blah blah blah
<body>blah blah blah

-------------- JQuery Selector extracts this part from the page ----------------
<div id='compose-message'>
    <form action="" method="post" class="uniForm">
        <div style='display:none'>
            <input type='hidden' name='csrfmiddlewaretoken' value='3c55a464683748b20a0e6abbcd22225d' />
        </div>      
        <fieldset class="inlineLabels">
            <div id="div_id_recipient" class="ctrlHolder ">
                <label for="id_recipient">Recipient<span>*</span></label>
                <input id="id_recipient" type="text" class="commaseparateduserinput" value="fsm92766" name="recipient" />
            </div>
            <div id="div_id_subject" class="ctrlHolder ">
                <label for="id_subject">Subject<span>*</span></label>
                <input id="id_subject" type="text" class="textinput textInput" name="subject" />
            </div>
            <div id="div_id_body" class="ctrlHolder ">
                <label for="id_body">Body<span>*</span></label>
                <textarea id="id_body" rows="12" cols="55" name="body" class="textarea"></textarea>
            </div>
            <div class="form_block">
                <input type="submit" value="Send &raquo;"/>
            </div>
        </fieldset>
    </form>
</div>
----------------------------------
blah blah blah
</body>
</html>

用户界面 javascript 事件处理调试表单兼容性 jquery 对话框

如何调试Jquery对话框

2 个回答

撰写回答