title: javascript Cannot call method 'replace' of undefined
body: <pre><code>$(document).ready(function() 
  {
      var oldText, newText;
      $(".editable").hover(
          function()
          {
              $(this).addClass("editHover");
          }, 
          function()
          {
              $(this).removeClass("editHover");
          }
      );
  
      $(".editable").bind("dblclick", replaceHTML);
  
  
      $(".btnSave").live("click", 
                      function()
                      {
                          newText = $(this).siblings("form")
                                           .children(".editBox")
                                           .val().replace(/"/g, "&amp;quot;");
  
                          currentId = $(this).parent().attr("id");
                          $.ajax({
                          type:   "POST",
                          url:    "./musa_date_edit_ajax.php",
                          data:   "vidpubdate="+newText+"&amp;id=" + currentId,
                          success: function(msg){
                              //alert("test ok");
                          } 
                          });
  
                          $(this).parent()
                                 .html(newText)
                                 .removeClass("noPad")
                                 .bind("dblclick", replaceHTML);
                      }
                      ); 
  
      $(".btnDiscard").live("click", 
                      function()
                      {
                          $(this).parent()
                                 .html(oldText)
                                 .removeClass("noPad")
                                 .bind("dblclick", replaceHTML);
                      }
                      ); 
  
      function replaceHTML()
                      {
                          oldText = $(this).html()
                                           .replace(/"/g, "&amp;quot;");
                          $(this).addClass("noPad")
                                 .html("")
                                 .html("&lt;form&gt;&lt;input type=\"text\" class=\"editBox\" value=\"" + oldText + "\" /&gt; &lt;/form&gt;&lt;button type=\"button\" class=\"btnSave\" &gt;planifier&lt;/button&gt; &lt;!-- &lt;button type=\"button\" class=\"btnDiscard\" &gt;Annuler&lt;/button&gt; --&gt;")
                                 .unbind('dblclick', replaceHTML);
  
                      }
  }
  ); 
  </code></pre>
  
  <p>IE/Chrome say:<br />
  <b>Cannot call method 'replace' of undefined </b></p>
  
  <p>referring to the following piece of code:</p>
  
  <pre><code>                newText = $(this).siblings("form")
                                   .children(".editBox")
                                   .val().replace(/"/g, "&amp;quot;");
  </code></pre>
  
  <p>Weird thing is that it works perfecly fine on Firefox.<br />
  I guess it has something to do with the $this that seems undefined. But since I'm not a JS/Jquery guru I have no idea how to fix it on Chrome and IE.</p>
  
  <p>Addendum:<br />
  Here's more or less how the HTML looks like:<br /></p>
  
  <pre><code>&lt;form&gt;
      blabla
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;blabla&lt;/td&gt;
              &lt;td class="editable" id="&lt;?php echo $data['id']; ?&gt;" &gt;&lt;?php echo $data['date'];?&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>UPDATE:</strong></p>
  
  <pre><code>&lt;form&gt;
      &lt;table&gt;
          &lt;td&gt;some useless stuff&lt;/td&gt;
          &lt;td class="editable noPad" id="1732"&gt;
              &lt;form&gt;
                  &lt;input class="editBox" value="22/05/13" type="text"&gt;
              &lt;/form&gt;
              &lt;button type="button" class="btnSave"&gt;planifier&lt;/button&gt;
              &lt;!-- &lt;button type="button" class="btnDiscard"&gt;Annuler&lt;/button&gt; --&gt;
          &lt;/td&gt;
      &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>