Question

Possible Duplicate:
How to select html nodes by ID with jquery when the id contains a dot?

I have an jquery modal, the function is to show profile box.

<a rel="Modal" href="#<?php echo $username; ?>">Profile</a>

So far is ok if username isn’t using ID dot (.)

<div id=<?php echo $username; ?>

The problem is coming when username using ID dot (.), example john.doe. The box can’t show anything.

So how can I set that ?

Thanks for kind help.

Answer 1

The quick and dirty solution would be to transform the problem characters to something less problematic. For example

<?php $normalisedUsername = htmlspecialchars(
    str_replace('.', '_', $username), ENT_QUOTES); ?>

<a rel="Modal" href="#<?php echo $normalisedUsername; ?>">Profile</a>

<!-- snip -->

<div id="<?php echo $normalisedUsername ?>"> ...

I say this is dirty because the . is perfectly valid inside an ID attribute. The better solution would be to alter the jQuery code used to find the modal contents. The scope to do this depends entirely on whether or not your modal utility is one you have written yourself or part of a library like jQueryUI or Bootstrap.

For example, if you were using Bootstrap’s Modal, you could add the appropriate escapes to the trigger’s data-target attribute, eg

<button type="button" data-toggle="modal" data-target="#john\\.doe">Launch modal</button>