How to fix declaration or statement expected error

Question

I want to append table row with dynamic drop down list but get error declaration or syntax error in jquery code. how to fix it?

$(".addtable").click(function () {
    debugger;
     $("#fields tbody").append("<tr><td>@Html.DropDownListFor(m => m.MedID, ViewBag.MedicineList as List<SelectListItem>, new { @class = "form-control", placeholder = "Category", id = "manfac", required = "required" })</td><td><input type="number" class="form-control" name=" Quantity" required></td><td><button type="button" class="btn btn-primary addtable">Add More</button><a href="javascript:void(0);" class="btn btn-primary remCF">Remove</a></td></tr>");

});

You are adding server-side markup via client-side javascript. This is not how things work: https://stackoverflow.com/q/13840429/728795 — Andrei, May 31 '19 at 22:32
Also show me uncaught syntax error ) is missing during debugging. — Naveed Ahmad, May 31 '19 at 22:36
Well, if that script is not going though a pre-processor first to convert it to plain html, you're going to have issues there. And even then, your plain part has unescaped double quotes that conflict with your string delimiter. — Taplar, May 31 '19 at 22:36

reasonet · Accepted Answer · 2019-05-31T23:30:29.683

After testing this approach in a dummy project, I've discovered two issues:

You need to wrap your string with single-quotes instead of double-quotes, ie, change .append("...") to .append('...') .
Html.DropDownListFor() produces a string that has a newline character, which causes a line break in the javascript string, which throws a syntax error. So you need to do something like: .append('@(Html.Raw(Html.DropDownListFor(...).ToString().Replace(System.Environment.NewLine, "")))') , which looks really ugly, but it works in my dummy project.`

So try:

$(".addtable").click(function () {
debugger;
 $("#fields tbody").append('<tr><td>@(Html.Raw(Html.DropDownListFor(m => m.MedID, ViewBag.MedicineList as List<SelectListItem>, new { @class = "form-control", placeholder = "Category", id = "manfac", required = "required" }).ToString().Replace(System.Environment.NewLine, "")))</td><td><input type="number" class="form-control" name=" Quantity" required></td><td><button type="button" class="btn btn-primary addtable">Add More</button><a href="javascript:void(0);" class="btn btn-primary remCF">Remove</a></td></tr>');
});

How to fix declaration or statement expected error

1 Answers1