jQuery Mobile SimpleDialog: "Uncaught SyntaxError: Unexpected token }" - jquery-plugins

Question

I'm currently implementing a blankContent SimpleDialog for jQuery Mobile.
This is the html:
<li>
<a href="#page1" id="searchdialog" data-theme="" data-icon="search">Search Routes
</a>
</li>
And this is the jQuery:
<script type="text/javascript">
$(document).delegate('#searchdialog', 'click', function() {
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'Route Search',
headerClose: true,
blankContent :
'<div id="content" data-role="content"><label>Enter Your Search:</label><div data-role="fieldcontain"><fieldset data-role="controlgroup">' +
'<label for="textinput7">Start</label><input id="start" placeholder="" value="" type="text"/></fieldset></div>'+
'<div data-role="fieldcontain"><fieldset data-role="controlgroup"><label for="textinput9">End</label>'+
'<input id="end" placeholder="" value="" type="text" /></fieldset></div>'+
'<a data-role="button" data-transition="fade" data-theme="b" href="#page6" data-icon="search" data-iconpos="left" onclick="alert($("#start").val(),$("#end").val())">Search</a>'
})
});
</script>
I can not for the life of me figure out what is causing this error:
Uncaught SyntaxError: Unexpected token }
The error only occurs when the Search Routes link is clicked, which leads me to believe it's an error in the jquery. Interestingly, if I make it
onclick="alert()"
instead of
onclick="alert($("#start").val(),$("#end").val())"
Then it works, but I need to have a varient of the other along the lines of:
onclick="location.href = "/search/?start=" + $("#start").val() + "&end=" + $("#end").val()"
Thoughts on how I can accomplish this? Any quick and dirty solution will work. Thanks

Answer 1

your line:
'onclick="alert($("#start").val(),$("#end").val())"'
is causing the errors. You have conflicting quotes in your onclick attribute ( and a non-string comma! )
You would be better off creating a hidden / display:none element w/this hard coded info in it then simply referring to it.
OR assigning a handler # time that html is created (similar to your already delegated handler )
edit: Basically take this:
'<a data-role="button" data-transition="fade" data-theme="b" href="#page6" data-icon="search" data-iconpos="left" onclick="alert($("#start").val(),$("#end").val())">Search</a>'
and do this instead:
'<a class="some-wonky-alert" data-role="button" data-transition="fade" data-theme="b" href="#page6" data-icon="search" data-iconpos="left" >Search</a>'
$('a .some-wonky-alert').on('click', function()
{
alert($("#start").val() + $("#end").val());
});
Season as delegated # your convenience
edit2 : Or of course you could try to escape the quotes - but while that might work - it won't solve the bad practices being engaged in :)