CODEWITHSUNDEEP
jquery-pluginsjquery-mobile
cvocvo
cvocvo

Reputation: 1636

jQuery Mobile SimpleDialog: "Uncaught SyntaxError: Unexpected token }"

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

Upvotes: 0

Views: 1638

Answers (1)

Brandt Solovij
Brandt Solovij

Reputation: 2134

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 :)

Upvotes: 2

Related Questions