CODEWITHSUNDEEP
phpjavascriptjqueryescaping
Constantin.FF
Constantin.FF

Reputation: 697

jQuery escape white spaces

Inside the selectmenu from https://github.com/fnagel/jquery-ui I have set a title for each option do be displayed as an icon. Working fine except the icons which filename contains white space. No icon is shown if the file name is like African Union.png

the jquery:

        $('select.flags').selectmenu({
            icons: [
                {find: '.icon'}
            ],
            bgImage: function() {
                return 'url(' + $(this).attr("title") + ')';
            }
        });

html:

<option value="African Union.png" class="icon" title="/img/icons/flags/African Union.png" >African Union</option>

If I am not able to get it working inside the jQuery - How to escape the white spaces using php? Is the str_replace the only option?

Upvotes: 1

Views: 2912

Answers (3)

Gumbo
Gumbo

Reputation: 655609

URLs in CSS can either be unquoted or quoted in single or double quotes. If unquoted, as in your case, you need to escape certain characters:

Some characters appearing in an unquoted URI, such as parentheses, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '\(', '\)'.

So:

'url(' + $(this).attr("title").replace(/(?=[()\s'"])/g, '\\') + ')'

Or you put the URL in quotes, preferably double quotes as plain single quotes are allowed in URLs:

'url("' + $(this).attr("title") + '")'

Upvotes: 1

Quentin
Quentin

Reputation: 944171

Use urlencode. You can't have spaces in a URL in the first place.

$filename = "African Union.png";
$url = urlencode($filename);
$html_safe_url = htmlspecialchars($url);

echo "<option value='$html_safe_url' class='icon' title='/img/icons/flags/$html_safe_url'>African Union</option>

Upvotes: 1

Milap
Milap

Reputation: 7221

Try this one

$("#text_box_id").change(function() {
var name = $(this).val();
var dname_without_space = $("#text_box_id").val().replace(/ /g, "");
var name_without_special_char =      dname_without_space.replace(/[^a-zA-Z 0-9]+/g, "");
$(this).attr("value", name_without_special_char );
});

It will remove white space as well as special characters. see this post

http://patelmilap.wordpress.com/2011/08/17/using-jquery-remove-space-special-characters-while-typing/

Upvotes: 0

Related Questions