1

I have following html element

<a class="btn-modal" data-modal-window-id="category-add-modal" href="#" data-mode="edit" data-content="{&quot;category_id&quot;:16,&quot;category_name_en&quot;:&quot;Food&quot;,&quot;category_name_ar&quot;:&quot;\u0637\u0639\u0627\u0645&quot;,&quot;category_icon&quot;:&quot;2c5ee2e6fd0d9f379dd85a55bf66e851.png&quot;}">Edit</a>

On click, I want to read the content from data-content attribute and populate the corresponding html elememt.

Here is how I tried

$('.btn-modal').on('click', function() {
    if ($(this).attr('data-mode') && 'edit' == $(this).attr('data-mode')) {
        var content = $(this).data('content');
        $.each(content, function(id, value) {
            var formElement = $('#'+id);
            formElement.val(value);
        });
    }
    return false;
});

Unfortunately, FF gives me following error

SecurityError: The operation is insecure.

When I remove this line of code formElement.val(value); 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?

Any hint on what is happening here?

Ibrahim Azhar Armar
  • 25,288
  • 35
  • 131
  • 207

1 Answers1

0

It turns out I was trying to set val() to input type file resulting in the error.

This thread helped me understand the issue

jQuery: Javascript throws Error "The operation is insecure" when setting value

The issue is fixed now.

Ibrahim Azhar Armar
  • 25,288
  • 35
  • 131
  • 207