I have a fairly basic dialog maker for jquery that works in 2 out of 3 places. In the 3rd instance where I try to use it, the fields in the form are disabled once the dialog is displayed.
The general concept behind the code is that the form is on a different page of the website, and for convenience, when javascript is enabled, you can click on the link, get a dialog, and perform the task “on page”. The ‘rel’ attribute has the selector to be used in the jquery .load method, the title of the becomes the dialog title, the page at the ‘href’ loads and becomes the dialog contents. If Javascript is off, you just get the same form, but with all the header/footer/menu stuff.
How can I figure out what is going on when the dialog displays? Firefox becomes sluggish (right click menu is slow to pop up) and the form fields are disabled. I’m just at a loss for how to debug this, to figure out what is going on at that point. TAB wil select the dialog “close” button, and will select the field that already has a value in it, but that is where it ends. ESC will still close the dialog, so the keyboard is working. I found one other person reporting a similar problem CkEditor Bug, and they appear to have fixed it, but I don’t know how they did.
Before I forget: JQuery 1.4.2 JQueryUI 1.8.2
The url looks like:
<a class='dialog' href='/messages/compose/fsm92766/' rel = ' #compose-message' title='Send Message to'>Send Message To</a>
The setup code looks like:
<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>
And the dialog html looks like:
<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 »"/>
</div>
</fieldset>
</form>
</div>
----------------------------------
blah blah blah
</body>
</html>
Just to make sure, are you using Firebug?
https://addons.mozilla.org/en-US/firefox/addon/1843/
Its a boon for debugging javascript especially if you’re using firefox, they have ‘lite’ versions for other browsers as well. Its the de-facto javascript debugger as far as I know.
Firebug has an add on FireQuery to enhance debugging for jQuery https://addons.mozilla.org/en-US/firefox/addon/12632/