title: Javascript - SecurityError: The operation is insecure
body: <p>I have following html element</p>
  
  <pre><code>&lt;a class="btn-modal" data-modal-window-id="category-add-modal" href="#" data-mode="edit" data-content="{&amp;quot;category_id&amp;quot;:16,&amp;quot;category_name_en&amp;quot;:&amp;quot;Food&amp;quot;,&amp;quot;category_name_ar&amp;quot;:&amp;quot;\u0637\u0639\u0627\u0645&amp;quot;,&amp;quot;category_icon&amp;quot;:&amp;quot;2c5ee2e6fd0d9f379dd85a55bf66e851.png&amp;quot;}"&gt;Edit&lt;/a&gt;
  </code></pre>
  
  <p>On click, I want to read the content from <code>data-content</code> attribute and populate the corresponding html elememt.</p>
  
  <p>Here is how I tried</p>
  
  <pre><code>$('.btn-modal').on('click', function() {
      if ($(this).attr('data-mode') &amp;&amp; 'edit' == $(this).attr('data-mode')) {
          var content = $(this).data('content');
          $.each(content, function(id, value) {
              var formElement = $('#'+id);
              formElement.val(value);
          });
      }
      return false;
  });
  </code></pre>
  
  <p>Unfortunately, FF gives me following error</p>
  
  <p><code>SecurityError: The operation is insecure.</code></p>
  
  <p>When I remove this line of code <code>formElement.val(value);</code> the error is no more displayed. why is firefox complaining about security issue on me wanting to set the value attribute of an element from JSON?</p>
  
  <p>Any hint on what is happening here?</p>