Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Escape quotes in value for radio matcher #309

Merged
merged 1 commit into from
Sep 28, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Escape quotes in value for radio matcher.
Under jQuery 1.12, the provided expression for matching a radio
button when the value containers a quote throws a Syntax error,
unrecognized expression.

This resolves that by properly escaping quote characters in the
value before building the matching expression.
  • Loading branch information
jeremywadsack committed Sep 28, 2016
commit a5beff3592397bd4e01b1b32109cb916fe77cc41
6 changes: 5 additions & 1 deletion backbone.stickit.js
Original file line number Diff line number Diff line change
Expand Up @@ -449,7 +449,11 @@
selector: 'input[type="radio"]',
events: ['change'],
update: function($el, val) {
$el.filter('[value="'+val+'"]').prop('checked', true);
// Because we use " in the value descriptor, we need to escape any
// quotes in the value itself otherwise jQuery/Sizzle complain that
// the selector is invalid.
var escapedVal = val.toString().replace(/"/g, '\\"');
$el.filter('[value="'+escapedVal+'"]').prop('checked', true);
},
getVal: function($el) {
return $el.filter(':checked').val();
Expand Down
3 changes: 3 additions & 0 deletions test/bindData.js
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,9 @@ $(document).ready(function() {

view.$('.test4[value=fountain]').prop('checked', true).trigger('change');
assert.equal(model.get('water'), 'fountain');

model.set({'water':'"Fountain of Youth"'});
assert.equal(view.$('.test4:checked').val(), '"Fountain of Youth"');
});

QUnit.test('div', function(assert) {
Expand Down
2 changes: 2 additions & 0 deletions test/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

<head>
<title>Backbone.Stickit Test Suite</title>
<meta charset="UTF-8">

<link rel="stylesheet" href="vendor/qunit.css" type="text/css"/>

Expand Down Expand Up @@ -44,6 +45,7 @@ <h1>Test</h1>
<script id="jst4" type="text/jst">
<input type="radio" name="water" value="fountain" class="test4">
<input type="radio" name="water" value="evian" class="test4">
<input type="radio" name="water" value='"Fountain of Youth"' class="test4">
</script>

<script id="jst5" type="text/jst"><div id="test5"></div></script>
Expand Down
Loading