Javascript syntax error not sure what I am doing wrong

Question

I'm rather new to JavaScript but I am learning.. But now I am stuck, I made this JavaScript Except I get Syntax error

$(function () {
    $(function () {
        $('#date').datepicker({
            showButtonPanel: true,
            changeMonth: true,
            changeYear: true,
            dateFormat: "yy-mm-dd",
            firstDay: 1,
            onSelect: function (dateText) {
                $('#EndDate').datepicker('option', 'minDate', new Date(dateText));
            }
        });
    });
});

if (!((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)))) {

    $(function () {
        $("#startTime").timePicker({
            step: 15,
            endTime: "23:45"
        });
    });
    $(function () {
        $("#endTime").timePicker({
            step: 15,
            endTime: "23:45"
        });
    });
    $(function () {
        $("#breakTime").timePicker({
            step: 5,
            endTime: "03:00"
        });
    });
}
function SetDate(dt) {
    $('#date').val(dt);
}

var n = @(Model.Projects.Count);

function AddProject() {
    n++;
    $.ajax({
        type: "GET",
        url: "@(Url.Action("Project"))/" + n + "/?showDescription=false",
        dataType: "html",
        success: function(data) {
            $('#projects').append(data);
        }
    });
}

It is on my AddProject function I get my error, how ever I can't see what could be wrong?

And this is the view I want to use the script on.

                            @if (ViewData["posted"] != null)
                            {
                                <div class="alert alert-success">
                                    <strong>Inställningar sparade</strong>
                                </div>
                            }

                            @using (Html.BeginForm("Settings", "Reports", FormMethod.Post, new { enctype = "multipart/form-data" }))
                            {
                                <div class="portlet light">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <span class="caption-subject font-green-sharp bold uppercase">Inställngar</span>
                                        </div>
                                    </div>
                                    <table class="table table-striped table-bordered table-hover">
                                        <tr>
                                            <td>Starttid:</td>
                                            <td>@Html.TextBox("startTime", Model.Times.StartTime)</td>
                                        </tr>
                                        <tr>
                                            <td>Sluttid:</td>
                                            <td>@Html.TextBox("endTime", Model.Times.EndTime)</td>
                                        </tr>
                                        <tr>
                                            <td>Rastlängd:</td>
                                            <td>@Html.TextBox("breakTime", Model.Times.BreakTime)</td>
                                        </tr>
                                    </table>
                                </div>

                                        <div id="projects">
                                            @foreach (var data in Model.Projects)
                                            {
                                                Html.RenderPartial("Project", data, ViewData["vd"] as ViewDataDictionary);
                                                var viewDataDictionary = ViewData["vd"] as ViewDataDictionary;
                                                if (viewDataDictionary != null)
                                                {
                                                    viewDataDictionary["id"] = (int)viewDataDictionary["id"] + 1;
                                                }
                                            }
                                        </div>
                                            <a href="javascript:AddProject()" class="btn btn-primary">Lägg till projekt</a>
                                            <button type="submit" class="btn btn-primary">Spara</button>
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

Javascript files do not support Razor compilation. Only views do that. You cannot have Razor in separate JS files.

Instead inject any required information into the view (e.g. into the elements as data- or other attributes) and have your JS pick up those values from the elements (or from a few global vars you set in the view).

I will add some examples for you...

Example HTML (attribute injection):

<a id="addProject" href="@(Url.Action("Project") + "/{id}/?showDescription=false")" class="btn btn-primary">Lägg till projekt</a>

JQuery

 $('#addProject').click(function(){
      var url = $(this).attr('href');
      url = url.replace("{id}", myNewId);
      $.ajax({ 
         url: url
         ...
      });
 });

I strongly recommend never using inline event handlers (like onclick="") with jQuery as the separate the event code from the registration aking maintenance harder and do not have all the same features as jQuery event handling.

Example HTML (global var injection)

Place this code snippet in the view

<script type="text/javascript>
     var projectCount = @(Model.Projects.Count);
     // or
     window.projectCount = @(Model.Projects.Count);
</script>

Then you can access projectCount from other JS files with:

  var count = projectCount + 1;

or

  var count = window.projectCount + 1;