CODEWITHSUNDEEP
javascriptjqueryajaxasp.net-mvc
userdp
userdp

Reputation: 35

Partial view method only triggered once on button click

I have a review form that generates a set of questions and set of answer options with the ability to generate a new adhoc question when you click the adhoc button.

The adhoc is a partial view that appends to the main view right below it. When I click the button to generate the adhoc question, the adhoc partial view appears.

I am able to enter in my question and select a radio answer option. When I click the adhoc button again, the form appears, but when I try to select an answer for the second adhoc question, it removes the answer I selected for the first adhoc question!

I put a break point on PartialViewResults Adhoc() and I noticed that on the first adhoc button click, Adhoc() executes. The method executes and gives the partial view an id. On the second button click, the method does not execute. It appends to the main view with the same id as the first adhoc partial view.

I cant seem to figure out how to have the method execute on each button click. The link below contains the code/html.

$(function () {

    $('.btnAdhoc').click(function (event) {
        event.preventDefault();

        $.ajax({
            url: '/ProjectManagers/Forms/Adhoc',
            //data: JSON.stringify(model),
            type: 'get',
            success: function (result) {
                $('#adhoc').append(result);
            }
        });
    });
});

UPDATE 1

Link below to my previous question before contains all the HTML/CODE

How to pass Model from View to Controller, add items to list, pass back to view

UPDATE 2

Rephrased my question, I hope this clears the confusion.

UPDATE 3

Seems to be an Internet Explorer related issue. It works in chrome, but I need this to work in IE.

UPDATE 3: FIXED

Fixed by adding cache: false in function script.

Upvotes: 0

Views: 558

Answers (1)

kblau
kblau

Reputation: 2107

Please try this example, and take note of the comments I put in.

View:

@model Testy20161006.Controllers.ViewModel
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>IndexValid8</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnClick").click(function () {
                var PassDDLView = { ddlValue: $("#passThis").val() };
                //took out your preventDefault
                //your url should be /Controller/Action, so I am doint this
                $.ajax({
                    url: '/Home/AdHoc',
                    type: 'GET',
                    data: PassDDLView,
                    success: function (result) {
                        alert(result.Component);
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(thrownError);
                    }
                });
            })
        })
    </script>
</head>
<body>
    <div class="form-group">
        @Html.DropDownListFor(m => m.ComponentId,
                         new SelectList(Model.ComponentList, "Value", "Text"), new { id = "passThis" })
        <input type="button" id="btnClick" value="submitToAjax" />
    </div>
</body>
</html>

Controller/ViewModels:

//You can put this in a model folder
public class ViewModel
{
    public ViewModel()
    {
        ComponentList = new List<SelectListItem>();
        SelectListItem sli = new SelectListItem { Text = "component1", Value = "1" };
        SelectListItem sli2 = new SelectListItem { Text = "component2", Value = "2" };
        ComponentList.Add(sli);
        ComponentList.Add(sli2);
    }

    public List<SelectListItem> ComponentList { get; set; }
    public int ComponentId { get; set; }
}

public class PassDDLView
{
    public string ddlValue { get; set; }
}

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult AdHoc(PassDDLView passDDLView)
    {
        //put a breakpoint here to see the ddl value in passDDLView
        ViewModel vm = new ViewModel();
        return Json(new
        {
            Component = "AComponent"
        }
        , JsonRequestBehavior.AllowGet);
    }

    public ActionResult IndexValid8()
    {
        ViewModel vm = new ViewModel();
        return View(vm);
    }

Upvotes: 1

Related Questions