代码之家 › 专栏 › 技术社区 › boatcoder

如何调试jquery对话框

jquery-ui django python jquery

boatcoder · 技术社区 · 15 年前

我有一个非常基本的jquery对话框生成器,它在三个位置中的两个位置工作。在我尝试使用它的第三个实例中,一旦显示对话框,表单中的字段就会被禁用。

代码背后的一般概念是表单位于网站的不同页面上,为了方便起见,当启用javascript时,您可以单击链接,获取对话框,然后执行“on page”任务。“rel”属性具有要在jquery.load方法中使用的选择器,的标题将成为对话框标题,“href”处的页面将加载并成为对话框内容。如果禁用了javascript,则只会得到相同的表单,但包含所有的页眉/页脚/菜单内容。

当对话框显示时,我如何确定发生了什么?火狐变得迟钝(右击菜单弹出速度慢),表单字段被禁用。我不知道如何调试这个,不知道在那个时候发生了什么。选项卡将选择对话框的“关闭”按钮,并将选择其中已经有值的字段,但它的结束位置。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>

2 回复 | 直到 15 年前

TJB 15 年前

只是为了确认一下,你在用 萤火虫 ?
https://addons.mozilla.org/en-US/firefox/addon/1843/

这对调试javascript很有好处,特别是如果你使用的是firefox,它们也有其他浏览器的“lite”版本。据我所知,它实际上是一个JavaScript调试器。

Firebug有一个附加的FireQuery来增强jQuery的调试 https://addons.mozilla.org/en-US/firefox/addon/12632/

Ryan Ginstrom 15 年前

这个 Firebug 火狐的扩展对于调试javascript非常有用。