Uncaught SyntaxError Invalid or unexpected token

Question

User1912965948 posted

Hi All,

I'm getting the following error:

Uncaught SyntaxError: Invalid or unexpected token

<a class='btn btn-default btn-sm btn-warning btn-margin'; title='Edit' style='color: #fff'; onclick=PopupForm('@Url.Action("AddEdit", "Customer")/" + data + "')><i class='glyphicon glyphicon-pencil'></i> Edit</a>

When I code onclick function then it happens.

Script

<script type="text/javascript">
        var dataTable, popUp;
        jQuery(document).ready(function () {
            dataTable = jQuery('#cusTble').DataTable({
                'ajax': {
                    url: '@Url.Action("GetCustomerList", "Customer")',
                    type: 'GET',
                    dataType: 'JSON'
                },
                pageLength: 25,
                bLengthChange: false,
                'columns': [
                    {
                        data: null,
                        render: function (data, type, full, meta) {
                            return data.cusName;
                        }
                    },
                    {
                        searchable: false,
                        orderable: false,
                        data: null,
                        render: function (data, type, full, meta) {
                            return data.contactNo;
                        }
                    },
                    {
                        searchable: false,
                        orderable: false,
                        data: null,
                        render: function (data, type, full, meta) {
                            return data.email;
                        }
                    },
                    {
                        
                        width: '26%',
                        searchable: false,
                        orderable: false,
                        data: null,
                        render: function (data) {
                            debugger;
                            return "<a class='btn btn-sm btn-warning btn-margin'; title='Edit' style='color: #fff'; 
                             onclick=PopupForm('@Url.Action("AddEdit", "Customer")/" + data + "')>
                             <i class='glyphicon glyphicon-pencil'></i> Edit</a>";
                        }
                    }
                ]
            });
         });

        function PopupForm(url) {
            debugger;
            var formDiv = jQuery('<div/>');
            jQuery.get(url)
                .done(function (response) {
                    formDiv.html(response);
                    popUp = formDiv.dialog({
                        autoOpen: true,
                        resizable: false,
                        title: 'Add New Customer',
                        height: 500,
                        width: 700,
                        modal: true,
                        close: function () {
                            popUp.dialog('destroy').remove();
                        }
                    });
                });
        }

        function SubmitForm(form) {
            debugger;
            jQuery.validator.unobtrusive.parse(form);
            if (jQuery(form).valid()) {
            
                jQuery.ajax({
                    type: 'POST',
                    url: form.action,
                    data: jQuery(form).serialize(),
                    success: function (data) {
                        if (data.success) {
                            popUp.dialog('close');
                            dataTable.ajax.reload();

                            jQuery.notify(data.message, {
                                globalPosition: 'top center',
                                className: 'success'
                            });
                        }
                    }
                });
            }
            return false;
        }
    </script>

HTML

@model Project.Models.CustomerModel
@{
    Layout = null;
}

@using (Html.BeginForm("AddEdit", "Customer", FormMethod.Post, new { onsubmit = "return SubmitForm(this)"}))
{

    @Html.HiddenFor(model => model.cusId)

    <div class="form-control">
        @Html.LabelFor(model => model.cusName, new { @class = "control-label" })
        @Html.EditorFor(model => model.cusName, new { htmlAttributes = new { @calss = "form-control" }})
        @Html.ValidationMessageFor(model => model.cusName)
    </div>

    <div class="form-control">
        @Html.LabelFor(model => model.contactNo, new { @class = "control-label" })
        @Html.EditorFor(model => model.contactNo, new { htmlAttributes = new { @calss = "form-control" } })
        @Html.ValidationMessageFor(model => model.contactNo)
    </div>

    <div class="form-control">
        @Html.LabelFor(model => model.email, new { @class = "control-label" })
        @Html.EditorFor(model => model.email, new { htmlAttributes = new { @calss = "form-control" } })
        @Html.ValidationMessageFor(model => model.email)
    </div>

    <div class="form-control">
        @Html.LabelFor(model => model.address, new { @class = "control-label" })
        @Html.EditorFor(model => model.address, new { htmlAttributes = new { @calss = "form-control" } })
        @Html.ValidationMessageFor(model => model.address)
    </div>

    <div class="form-control">
        <input type="submit" value="Submit" class="btn" />
        <input type="reset" value="Reset" class="btn" />
    </div>

Thanks in advance

Answer 1

User475983607 posted

You have not shared enough information to provide an accurate solution.  I'll assume "data" is a single C# variable and you are trying to create a route parameter.

    <a class='btn btn-default btn-sm btn-warning btn-margin'; 
       title='Edit' style='color: #fff'; 
       onclick="PopupForm('@Url.Action("AddEdit", "Customer", new { id = data }))")>
    <i class='glyphicon glyphicon-pencil'></i> Edit</a>

Answer 2

User-719153870 posted

Hi fungus.00,

fungus.00

Uncaught SyntaxError: Invalid or unexpected token

<a class='btn btn-default btn-sm btn-warning btn-margin'; title='Edit' style='color: #fff'; onclick=PopupForm('@Url.Action("AddEdit", "Customer")/" + data + "')><i class='glyphicon glyphicon-pencil'></i> Edit</a>

When I code onclick function then it happens.

I think this could show you the syntax error already in VS with many green and red wavy lines.

First of all, there should be no semicolons(;) between the attributes of your html tags.

Another thing is that single('') or double("") quotation marks are needed for the value of these attributes.

You can refer to below code to modify it:

<a class='btn btn-default btn-sm btn-warning btn-margin' title='Edit' style='color: #fff' onclick="PopupForm('@Url.Action("AddEdit", "Customer")'+'/'+data)"><i class='glyphicon glyphicon-pencil'></i> Edit</a>

Also please check below demo for more information:

cshtml:

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>SyntaxErrorDemo</title>
    <script>
        function PopupForm(url) {
            alert(url);
        }
    </script>
</head>
<body>
    <div>
        <a title='Edit' onclick="PopupForm('@Url.Action("AddEdit", "Customer")'+'/'+'data')">aaaa</a>
    </div>
</body>
</html>

Below is the result of this demo:

Best Regard,

Yang Shen

Answer 3

User1912965948 posted

Another thing is that single('') or double("") quotation marks are needed for the value of these attributes.

First of all I wana say thx for replying. I fixed it.

{
                        searchable: false,
                        orderable: false,
                        data: "cusId",
                        render: function (data) {
                            return "<a class='btn btn-default' onclick=PopupForm('@Url.Action("AddEdit", "Customer")/" + data +"')>Edit</a>"
                        }
                    }

Error gone Uncaught SyntaxError: Invalid or unexpected token

I was thinking that my code would work fine because this code is being used for insertion.

Now I'm facing another error "error 500" :( 

Answer 4

User475983607 posted

Now I'm facing another error "error 500" :( 

A 500 error is a server error.  Since a link does an HTTP GET this should be very easy to debug.   If you want the community to debug your code, share the action and a URL that causes the error.  Just the basic information forum members need to help you.

Answer 5

User1912965948 posted

A 500 error is a server error.  Since a link does an HTTP GET this should be very easy to debug.   If you want the community to debug your code, share the action and a URL that causes the error.  Just the basic information forum members need to help you.

That's why I'm here its helps a lot, where people like you, who always ready to help others.

What's more, its great to have senior people check out the code professionally.

I appreciate you guys

CODE

public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetCustomerList() {
            using (DBSalamCoTestEntities db = new DBSalamCoTestEntities())
            {
                List<Customer> customerList = db.Customers.ToList();
                List<Address> addressList = db.Addresses.ToList();

                var data = (from c in customerList
                            join a in addressList on c.CusId equals a.CusId
                            select new CustomerModel
                            {
                                cusId = c.CusId,
                                cusName = c.CusName,
                                contactNo = c.ContactNo,
                                email = c.Email,
                                address = a.Address1
                            }).ToList();
                return Json(new { data = data }, JsonRequestBehavior.AllowGet);
            }
        }

        [HttpGet]
        public ActionResult AddEdit(int Id = 0) {
            if (Id == 0)
            {
                return View(new CustomerModel());
            }
            else {
                using (DBSalamCoTestEntities db = new DBSalamCoTestEntities()) {
                    return View(db.Customers.Where(x => x.CusId == Id).FirstOrDefault<Customer>());
                }
            }
        }

        [HttpPost]
        public ActionResult AddEdit(CustomerModel customerModel)
        {
            using (DBSalamCoTestEntities db = new DBSalamCoTestEntities()) {
                Customer customer = new Customer();
                if (customerModel.cusId == 0)
                {
                    customer.CusName = customerModel.cusName;
                    customer.ContactNo = customerModel.contactNo;
                    customer.Email = customerModel.email;
                    db.Customers.Add(customer);
                    db.SaveChanges();

                    int newCustomerId = customer.CusId;
                    Address address = new Address();
                    address.Address1 = customerModel.address;
                    address.CusId = newCustomerId;
                    db.Addresses.Add(address);
                    db.SaveChanges();
                    return Json(new { success = true, message = "Customer saved successfuly" }, JsonRequestBehavior.AllowGet);
                }
                else {
                    customer.CusName = customerModel.cusName;
                    customer.ContactNo = customerModel.contactNo;
                    customer.Email = customerModel.email;
                    db.Entry(customerModel).State = EntityState.Modified;
                    db.SaveChanges();

                    Address address = new Address();
                    address.Address1 = customerModel.address;
                    db.Entry(address).State = EntityState.Modified;
                    db.SaveChanges();
                    return Json(new { success = true, message = "Customer updated successfuly" }, JsonRequestBehavior.AllowGet);
               }

            }
        }

Answer 6

User-719153870 posted

Hi fungus.00,

Tried to build a demo but the code is far from complete.

Here's a better way we can solve this problem faster. First, we need to know the detailed error information.

Press F12 to open the DevTools > go to the Network part and each time you load your page( jQuery(document).ready(function () { ) will get a record with its Status 500 > click it and go to the Preview part on the right side > now you are able to see the actual error message that caused the 500.

In your case, maybe you can try to change your ajax type from Get to POST and add [HttpPost] above public ActionResult GetCustomerList() {. You can refer to Using AJAX In ASP.NET MVC.

Best Regard,

Yang Shen

Answer 7

User1912965948 posted

I think, I have to change my whole structure.