I am attempting to use CKEditor with jQuery and an not having the best luck. I am loading a form (going to switch to div tags) via ajax calls using jQuery. In this code that is loaded is the javascript that handles the events clicks/etc. for the form. Right now I have a div tag that when clicked opens a jQuery dialog box with a CKEditor instances in it. (that part works). However, when I close the dialog box my div tag disappears. Not just hidden but is totally gone from existences (verified with firebug in firefox). I've spent the better part of two days trying to figure this one out and have decided to turn to the forums with hopes that someone can point me in the right direction. I'm going to post partial portions of the code, hopefully enough for debugging purposes.
html/smarty template (loaded via the jQuery ajax call):
the javascript file that gets loaded with the above html:
html/smarty template (loaded via the jQuery ajax call):
<div style="border: 1px solid">
<form action="" id="hptfrmAddAnnouncement">
<table border="0">
<tr>
<td>brief description</td>
<td>url</td>
<td>open date/time</td>
<td>close date/time</td>
<td>active</td>
<td> </td>
</tr>
<tr>
<td>
<div style="display:inline; border:1px solid; width:100px" id="hptfrmBriefDesc">test</div>
</td>
<td>
<input type="text" id="hptfrmUrl" />
</td>
<td>
<input type="text" id="hptfrmOpenDate" size="18" />
</td>
<td>
<input type="text" id="hptfrmCloseDate" size="18" />
</td>
<td>
<input style="text-align:center;" type="checkbox" id="hptfrmActive" />
</td>
<td>
<input type="submit" value="add" id="hptfrmSubmit" />
</td>
</tr>
</table>
</form>
</div>
{if $rows ne ""}
<div style="border: 1px solid; margin-top: 10px;">
<table>
{foreach name=loop item=row from=$rows}
<tr>
<td>
<input type="text" id="desc{$row.id}" value="{$row.briefdesc}" size="50" />
</td>
<td>
<input type="text" id="url{$row.id}" value="{$row.url}" size="50" />
</td>
<td>
<input type="checkbox" id="active{$row.id}" value="active" {if $row.active eq 1}checked="checked"{/if} />
</td>
</tr>
{/foreach}
</table>
</div>
{/if}
{foreach name=outer item=customJs from=$page.customJs}
{foreach name=inner item=path from=$customJs}
<script src="{$machine}{$path}" type="text/javascript"></script>
{/foreach}
{/foreach}
the javascript file that gets loaded with the above html:
var editor_config =
{
toolbar:
[
['Source','Maximize'],
['Cut','Copy','Paste','PasteText','PasteFromWord','RemoveFormat'],
['Undo','Redo'],
['Bold','Italic','Underline','Strike','Subscript','Superscript',
'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['NumberedList','BulletedList','Outdent','Indent'],
['Link','Unlink','Image','SpecialChar']
],
height: 260,
startupFocus: true,
removePlugins: 'scayt'
};
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#hptfrmAddAnnouncement").submit(function(event) {
event.preventDefault();
alert("looks like you're submitting a form!");
return false;
})
jQuery("#hptfrmBriefDesc").click(function() {
jQuery(this).dialog({
bgiframe: true,
width: 600,
height: 500,
modal: true,
draggable: false,
resizable: false,
open: function() {
jQuery(this).ckeditor(editor_config);
},
close: function() {
jQuery(this).ckeditorGet().destroy();
},
buttons: {
'Close': function() {
jQuery(this).dialog('close');
}
}
});
});
});