Editor in a dialog not working

Editor in a dialog not working

Hi
 
I want to build a little note editor using the dialog widget. I have coded the following but whilst it works in IE8 it doesn't work in FireFox 3.5.8. In FF, saves don't show up and, once you edit the text in the dialog, all new dialogs show that edited text.
 
What am I doing wrong?
 
Chris
 
  1. <html>
  2. <head>
  3. <title>Note editing</title>
  4. <!--- include jQuery --->
  5. <link type="text/css" href="/jQuery/css/sunny/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="/jQuery/jquery-1.4.1.js"></script>
  6. <script type="text/javascript" src="/jQuery/jquery-ui-1.7.2.js"></script>
  7. <script type="text/javascript">
  8.  $(document).ready(function() {
  9.   setNotes();
  10.  });
  11. </script>
  12. </head>
  13. <body>
  14. <h1>Notes editing example</h1>
     <script language="JavaScript">
  15.  var currentlyEditingNoteID = 0; // keep track of which note is being edited
  16.  var newNoteID = 100;   // used to number new notes
  17.  function setNotes() {
  18.   // add initial notes as anchors inside divs in the notesPane div
  19.   $("#notesPane").append("<div class='notes'><a href='javascript:;' onClick='editNote(1001)' id='history.note.n1001'>Test note number one</a></div>" )    
  20.   $("#notesPane").append("<div class='notes'><a href='javascript:;' onClick='editNote(1002)' id='history.note.n1002'>Test note number two</a></div>" )    
  21.   $("#notesPane").append("<div class='notes'><a href='javascript:;' onClick='editNote(1003)' id='history.note.n1003'>Another test note</a></div>" )    
  22.  }
  23.  function addNote() {
  24.   // get the next new note id
  25.   var anID = newNoteID;
  26.   // increment the id
  27.   newNoteID++;
  28.   // add a new note, concatenating the new id to the id of the anchor
  29.   $("#notesPane").append("<div class='notes'><a href='javascript:;' onClick='editNote(" + anID + ")' id='history.note.n" + anID + "'>A new note</a></div>" )
  30.   // open the new note for editing
  31.   editNote(anID);   
  32.  }
  34.  function editNote(anID) {
  35.   // remeber which note we are on
  36.   currentlyEditingNoteID = anID;
  37.   // start with the current contents of the relevant note div in the noteEditor textarea
  38.   var target = "#history\\.note\\.n" + currentlyEditingNoteID;
  39.   $("#noteEditor").html($(target).html());
  40.   // create the dialog afresh
  41.   $("#pnlEditNotes").dialog({ height: 330, width: 400,
  42.          modal: true, title: "Notes",
  43.          close: function(event, ui) { killNoteDialog(); }
  44.           });
  45.  }
  46.  function cancelNote() {
  47.   // close and kill the dialog
  48.   $("#pnlEditNotes").dialog("close");
  49.   killNoteDialog();
  50.  }
  51.  
     function saveNote() {
  52.   // get the editted text out of the noteEditor textarea
  53.   var newNoteText = $("#noteEditor").html();
  54.   // put the new note text in the relevant anchor
  55.   var target = "#history\\.note\\.n" + currentlyEditingNoteID;
  56.   $(target).html(newNoteText);
  57.   // close and kill the dialog
  58.   $("#pnlEditNotes").dialog("close");
  59.   killNoteDialog();
  60.  }
  61.  
     function killNoteDialog() {
  62.   // remove the dialog from the DOM
  63.   $("#pnlEditNotes").dialog("destroy");
  64.  } 
  65. </script>  
  66. <style>
  67.  .notes {background-color: Honeydew; border: 1px solid silver; width: 100%}
  68. </style>
  69. <div id="pnlEditNotes" style="display:none" class="addDialog">
    <!--- the hidden dialog definition --->
    <table width="100%">

  70.  <tr><td>Click on a note to edit it, or type a new note</td></tr>
  71.  <tr><td><textarea id="noteEditor" style="width: 90%"></textarea></td></tr>
  72.  <tr><td align="right">
  73.  <input type="Button" value="Save" onclick="saveNote()">
  74.  <input type="Button" value="Cancel" onclick="cancelNote()">
  75.  </td></tr>
  76. </table>
  77. <!--- end of dialog definition --->
  78. </div>
  79. <div id="tNotes" class="tab" >
  80.  <strong>Notes</strong> <input type="Button" value="+" class="buttonActive" title="Add new note..." onclick="addNote()"><br>
  81.  <div id="notesPane"></div>
  82. </div>
  83. </body>
  84. </html>