Invalid regular expression flags error when generating button

Question

I am getting the error

Invalid regular expression flags

From the edit button when I click on it. But HTML output seems to be fine

/* EDIT */ {
    mRender: function (data, type, row) {
        var directlink = '/Products/edit/' + row.ArticleID;
        return "<button type='button' class='btn btn-sm btn-primary' onclick='location.href=" + directlink + "'><i class='fa fa-pencil-square-o'> </i> Edit</button>"

Out come of generated button from JavaScript

<button type="button" class="btn btn-sm btn-primary" onclick="location.href=/Products/edit/11"><i class="fa fa-pencil-square-o"> </i> Edit</button>

Answer 1

The error is in the code onclick='location.href=" + directlink + "'. Here, location.href is assigned a RegEx(Note that regex literal syntax uses / as delimiters).

Here, /Products/edit/11 is read as Regex /Products/ and edit as regex flags, which are Invalid flags(except i).

To solve this, the value of the URL can simply be wrapped inside quotes. As both single and double quotes are already used, the quotes need to be escaped.

onclick='location.href=\"" + directlink + "\"'

If target environment support EcmaScript 6 template literals, you can use

return `<button ... onclick='location.href="${directlink}'>...</button>`;

---

As, yo're using jQuery, I'd suggest to use it to create new element and bind events on it.

Answer 2

Looking at the generated button, you are missing the quotes for the string in the assignment on the onclick handler

So instead of this:

onclick="location.href=/Products/edit/11"

It should be this:

onclick="location.href='/Products/edit/11'"

Since literal regex's uses the / javascript assumed it was a regex, hence the error