Apostrophe in first/last/nickname causes JS error on user profile page

[johnbillion]

If you have an apostrophe in your first name, last name or nickname then tabbing between (or focusing/blurring) those fields on your user profile page throws a JavaScript error. The result is that the dropdown menu for selecting your display name doesn't get populated correctly.

JS error seen in Firefox 3.6:

uncaught exception: Syntax error, unrecognised expression: value=O'Hare]

Looks like the expression needs to be escaped and/or enclosed in quotes.

[andrewryno]

Convert single quotes to HTML entity

[andrewryno]

Didn't seem like it would be possible to just change the single quotes in the jQuery selector/function to double quotes because either way it would screw up with jQuery or the HTML. So just converted the quote to an HTML entity. Not sure if it needs to be done for the first name as well.

[jacobwg]

Patch to fix quoting of jQuery attribute selectors for the Display Name drop down in user profile

[jacobwg]

According to ​http://api.jquery.com/category/selectors/, there are certain characters that need to be escaped in the selector:

!"#$%&'()*+,./:;<=>?@[\]^`{|}~

And according to ​http://api.jquery.com/attribute-equals-selector/, attribute equals selectors must always be quoted:

// wrong:
[attr=value]
// right:
[attr="value"]

Also, .children() does some special stuff that breaks when you have escaped characters in your selector, so all .children() calls were replaced with .find() calls.

My patch should address these issues.

[nacin]

Probably happened in [13539]. What happens if " is used in a name?

[andrewryno]

The patch by jacobwg should take care of any special characters inserted into a name. Mine would only take care of single quotes.

[azaozz]

@jacobwg 17004.2.diff looks good, I was with the impression that similar functionality already was in jQuery. Maybe consider opening an enhancement ticket on jQuery's trac, it would be useful to have a native way of escaping selectors as that's a limitation in jQuery (in HTML option value can contain CDATA).

However I think #10030 and [13539] that brought this issue in the first place can be optimized a bit. Perhaps that block of code can be simplified to compare the user entered values instead of repeatedly checking for duplicates in the already created <option value="...">. That will also resolve this ticket.

[andrewryno]

I'm working on trying to get it to only compare user inputs. The problem is that if the user leaves one of the fields blank, it's hard to compare the inputs because you would need a lot more comparisons to account for blank fields. Also if someone puts in a nickname that is the same as either the first and last or last and first combination. I honestly think that the way it's done now will be the best it could be done, unfortunately. Someone feel free to correct me, however.

[johnbillion]

Replying to andrewryno:

I'm working on trying to get it to only compare user inputs. The problem is that if the user leaves one of the fields blank, it's hard to compare the inputs because you would need a lot more comparisons to account for blank fields. Also if someone puts in a nickname that is the same as either the first and last or last and first combination. I honestly think that the way it's done now will be the best it could be done, unfortunately. Someone feel free to correct me, however.

Personally I wouldn't spend time on this. It works as it is and you'd just be refactoring code on a feature that's rarely used more than once or twice. We should just fix the JS error and we'll be done :)

[andrewryno]

I spoke too soon on my previous comment. Worked it a little more and got the above patch. Works well from my testing and doesn't require any regex or much traversing of the DOM. Just builds an array and deletes duplicate values. Definitely needs some testing just to ensure that it works in all cases.

[azaozz]

Replying to andrewryno:

Yes, that's what I had in mind. However think instead of array we should use a simple object (associative array) there. It preserves the IDs and the currently selected option in the drop-down like in 17004-4.patch.

@johnbillion don't think this is a "real" refactoring. We already have the logic for this in the PHP version, just needed to use the same logic in the JS.

[andrewryno]

Replying to azaozz:

+1 on your patch. I didn't even think about using an object there. I knew I couldn't do a true associative array and I don't do too much features of JS to think about using an object.

[nacin]

Would not mind seeing this fix in a point release given it's a recent regression.

[azaozz]

(In [17587]) Fix display of apostrophes in the user's first and last names on the User Profile page, partial props andrewryno, see #17004

[azaozz]

Replying to nacin:

Agreed. Just would need a bit more testing especially in non-Roman and RTL languages.

Removed the option values from the patch: this only concerns the browser and as we are capturing user input, there's no need to copy it there as well with JS. Also switched the places of username and nickname so we show nickname by default when no selection.

[nacin]

For review.

[nacin]

The fixed-major keyword will hide this ticket from reports 5 and 6, as it is fixed for the major release.

[jacobwg]

Looks good... removes a lot of the regex stuff.

Sorry I haven't commented earlier... I though I would get an email notification for comments, but I guess you have to tell Trac what your email address is first, don't you? :)

Anyway, glad to see it fixed.

[SergeyBiryukov]

[18363]

[downloadbook]

Nothing.

[info2grow]

Still having this problem, could it be a BuddyPress issue? It's show up in the user table (nicename) and usermeta (last_name).

Was this fixed?

WordPress database error You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 's Physio' /* From [webpage] in [directory] at line 1 for query SELECT ID FROM wp_users WHERE display_name ='The Mama's Physio' /*