Uncaught SyntaxError: Unexpected token ILLEGAL onclick mvc

Question

I know that this is question has been asked many times before but I can't find any similar case like mine.

I want to call a javascript function on an input type button control I'm doing it like so:

<input type="button" onclick="FormatApplicationMessage(@application.StatusID, '@application.IssueMessage')" class="fa fa-search fa-lg" />

but I always got this error:

Uncaught SyntaxError: Unexpected token ILLEGAL

This is the generated html :

<input type="button" onclick="FormatApplicationMessage(5, 'Please provide a copy of your CV')" class="fa fa-search fa-lg" />

I tried to do this:

<input type="button" onclick='FormatApplicationMessage(@application.StatusID, "@application.IssueMessage")' class="fa fa-search fa-lg" />

But I get the same error message

any hacks ?

EDIT

Here is FormatApplicationMessage implementation:

function FormatApplicationMessage(statusID, issueMsg) {
    //declined
    if (statusID == 4) {
        $('#ApplicationMessageLabel').val("Message");
    }
        //Update Required
    else if (statusID == 5) {
        $('#ApplicationMessageLabel').val("Message");
    }
    //Approved
    else if (statusID == 6) {
        $('#ApplicationMessageLabel').val("Message");
    }
    $('#ApplicationMessage').show();
}

Is `application` defined as a symbol? Does it show up on intellisense? Or rather: what is `application` supposed to be? Is `FormatApplicationMessage` defined as a `function`? — bash.d, Aug 30 '15 at 14:09
When you type `@application` in your view, does intellisense show it or suggest it as a name? — bash.d, Aug 30 '15 at 14:12
@bash.d and yes FormatApplicationMessage is defined as a function — Ibrahim Amer, Aug 30 '15 at 14:31
Its a bit hard to understand what your trying to do here. You pass `issueMsg` to a function and then never use it. And no matter what the value of `statusID` is, you just set the value of the input with `id="ApplicationMessageLabel"` to exactly the same value. Add the message as a `data-` attribute and use [Unobtrusive Javascript](https://en.wikipedia.org/wiki/Unobtrusive_JavaScript) - refer [this fiddle](http://jsfiddle.net/d1uoowpe/) — , Aug 31 '15 at 00:46

bash.d · Answer 1 · 2015-08-30T15:13:35.027

1

Here is what I think might go wrong:

FormatApplicationMessage is not defined as a function. Define this function with two parameters. And reference the script or define the function inline.
Make sure that in your view you can access @application and it contains your properties StatusID and IssueMessage
Make sure that @application is not part of your @Model or @ViewBag. If either is true use either @Model.application.XYZ or @ViewBag.application.XYZ

If all is defined, and you want to use @application inside parenthesis, use @(application.XYZ) otherwise the parser might get an error, so try:

 <input type="button" onclick='FormatApplicationMessage(@(application.StatusID), "@(application.IssueMessage)")' class="fa fa-search fa-lg" />

See http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx/ and look for Explicit Expression

EDIT

If @Infas is a C# class and you want to use this in JavaScript you must create the script inline in your view. You cannot use Razor @-syntax in a pure .js-file.

edited Aug 30 '15 at 15:13

answered Aug 30 '15 at 14:31

bash.d

13,029
3
29
42

I already checked all your points: 1- FormatApplicationMessage is defined as a function 2- I can access application and its properties using intelliSene 3- Model is a list of applications @application is an entry in Model – Ibrahim Amer Aug 30 '15 at 14:36
See the last part of my answer – bash.d Aug 30 '15 at 14:38
I tried to but parenthesis but I got the same error :( – Ibrahim Amer Aug 30 '15 at 14:38
– Ibrahim Amer Aug 30 '15 at 14:41
Try to exchange the " with ' in your HTML -> `` – bash.d Aug 30 '15 at 14:44
What does the generated HTML look like? Please retrieve it from the browser's debugger and post it here. – bash.d Aug 30 '15 at 14:48
here you go – Ibrahim Amer Aug 30 '15 at 14:49
Please post the implementation of your `FormatApplicationMessage` function. Please add it to your question. – bash.d Aug 30 '15 at 14:50
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/88308/discussion-between-ibrahim-amer-and-bash-d). – Ibrahim Amer Aug 30 '15 at 14:53
What is `@Infas`? Are you generating the script using MVC or is it a normal JavaScript file? If it is normal JS you **cannot** use Razor syntax in the .js file! Please replace all strings with test string constants like `'test'` and see if it works. – bash.d Aug 30 '15 at 14:57
I am typing from mobile phone, can't chat. Please try what I suggested in my last comment. – bash.d Aug 30 '15 at 14:58
I don't think the problem is with this function anyway I tried your suggestion but unfortunately I'm getting the same problem – Ibrahim Amer Aug 30 '15 at 15:00
Try to debug your application in the browser and find where it throws the error. – bash.d Aug 30 '15 at 15:02
Ok sir I will try it and I will keep you updated. Thank you sir for your precious time and help I owe you a lot. +1 for being very collaborative :)) – Ibrahim Amer Aug 30 '15 at 15:04
Good luck and please keep me up about your progress. – bash.d Aug 30 '15 at 15:14

score 0 · Accepted Answer · edited May 23 '17 at 11:58

After days of investigation finally I found the problem. The problem was very silly and quite annoying

The rendered HTML was like so:

<i  class="mywarning fa fa-warning (alias) fa-lg" onclick="FormatApplicationMessage(5,&quot;Return Message 
&quot;)"></i>

as you can see this part ")"></i> is rendered on the next line because the string contains endlines which for some reasons it isn't legal to do so.

So to solve the problem I'd just replaced endlines by '< br >' (you can replace it by whatever symbol you like) when calling FormatApplicationMessage for the second parameter. Inside FormatApplicationMessage I restored those '< br >' to "\n" then displayed it in a text area.

USEFUL THREADS:

Uncaught SyntaxError: Unexpected token ILLEGAL onclick mvc

2 Answers2