title: Jquery UI resizable, get attribute value of image being resized
body: <p>This is my image:</p>
  
  <pre><code> echo "&lt;img src='articles/$article_id/$image' style='width:inherit;' id='image' data-articleid='$article_id' data-boxid='$box_id'&gt;";
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  var startW = 0;
  var startH = 0;
  
  $('#image').resizable({
      start : function(event,ui) {
          startW = $(this).outerWidth();
          startH = $(this).outerHeight();
      },
      stop : function(event,ui) {
          w = $(this).outerWidth();
          h = $(this).outerHeight();
  
          boxid = $(this).attr("data-boxid");
          articleid = $(this).attr("data-articleid");
  
          $.post("processforms/process_techtools.php", { boxid:boxid, articleid:articleid, width:w, height:h, resize_image_submit:0}, function (data) {     
            $("#progress").hide();             
            $("#success").show().fadeOut(1500);          
          });     
      }
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>In the resizable stop function, boxid and articleid return undefined.  How can I get it to see these attributes?</p>
  
  <p>Thanks.</p>