jQuery AJAX .load() only hitting controller method once

Question

So I've read through some of the other similar questions and can't find one that exactly fits my scenario. I have script tag as follows:

$(document).ready(function() {
  $(document).on("change", '[id*="SomeId]', function() {
    SomeFunction();
  });
});

function SomeFunction() {
  $("SomeOtherId").load('@(Url.Action("ControllerMethod", "Controller", null, Request.Url.Scheme))?numberExample=' + 7);
});

<div class="col-md-10 mrgn-tp-sm">
  @Html.DropDownListFor(model => model.SomeProperty, (SelectList)Model.SomeOtherProperty, htmlAttributes: new { @id="SomeId", @class="form-control" })
</div>

<div id="SomeOtherId" class="col-md-10 mrgn-tp-sm">
  @Html.DropDownListFor(model => model.SomeEvenOtherProperty, (SelectList)Model.SomeEvenOtherOtherProperty, htmlAttributes: new { @class="form-control" })
</div>

So my goal is when the user selects a different option from the first dropdown list, the second dropdown list will dynamically change. This happens when the .load() function is called.

Here is what is happening. I place a breakpoint at the beginning of the method in my controller. When I start the application, I go to this page and select an option from the first dropdown list. SomeFunction() is invoked and the .load() on the SomeOtherId div is run, which results in the breakpoint being hit. The controller method renders a partial view containing another list like this @Html.DropDownListFor(model => model.SomeEvenOtherProperty, (SelectList)Model.SomeEvenOtherOtherProperty, htmlAttributes: new { @class = "form-control" }) in place of the old one. Now if I select a different option from the first dropdown list, again, the breakpoint will be hit and the second dropdown list will be updated.

The issue arises when I go back to select my first option, the breakpoint is not hit, however the list is still updated. I need to hit that breakpoint EVERYTIME, however it seems that it only actually calls the controller method once. I have debugged through the Javascript and can confirm that the SomeFunction() is called everytime. I have also tried putting a callback with an alert to confirm the .load() function is executing successfully. This problem persists even after the page is reloaded. The only way I can hit that breakpoint twice for the one option is if I:

Restart the application.
Inspect Element -> Console.

Oddly enough, when I inspect element on the page, it will hit the breakpoint more than once for a specific option.

Extra Details:

So in simpler terms, the second dropdown is supposed to contain a different set of options depending on what option is chosen in the first list. However, if the user chooses to save a new entity containing a combination of Option 2 from List 1 and Option 2 from List 2, they should not be able to save another entity with that same combination.

So because this issue persists until the application is restarted, it allows a user to create the same combination TWICE, because the old list is being rendered in place of the second dropdown list. The purpose of the controller method is to render a filtered list by making a quick call to the DB to find out what combinations exist. If the user has saved Option 2 from List 1 and Option 2 from List 2 to the DB, when they go back to create another combination they should not be displayed Option 2 in List 2 if they choose Option 2 from List 1. However because the controller method is only being called the first time they create the combination, when they decide to create a another combination for Option 2 from List 1, it will render the old list, displaying Option 2 from List 2.

Too lengthy to read and understand, can you brief it and the pointers to the problem will be more helpful. — Rohit.007, Jul 04 '18 at 19:10
@Rohit.007 The controller method is only being called once for each option in list 1. When an option is selected for a second time, it doesn't call the controller method. Edit: I would just like to add that SomeFunction() is being called everytime an option is selected in list 1. Also the .load() is also being executed successfully. The issue is, the controller method is only called the first time an option from list 1 is selected. — Kohdy Nicholson, Jul 04 '18 at 19:14
Can you share the working code? as the attached code seems not appropriate to debug. — Rohit.007, Jul 04 '18 at 19:17
@Rohit.007 Unfortunately I am not sure how I would attach code for someone to copy and use for debugging as it is confidential. I was wondering if it was possibly a caching issue? — Kohdy Nicholson, Jul 04 '18 at 19:23

JamesS · Answer 1 · 2018-07-05T12:57:35.927

Add an 'onchange' to the first drop down which calls a javascript function and passes 'this.value'

@Html.DropDownListFor(m => m.ResultId, new SelectList(The list of objects, "fieldid", "value"), new { @class = "form-control HomePageDropDown", @onchange = "javascript:GetValues(this.value);" })

In your javascript function post data you want to the controller (id of the dropdown possibly). In your controller function get the list of objects you want for your next drop down and return it as a Json.

In your ajax result create the markup for a dropdown and pass it to an id in your page.

            var markup = "<option Value='0'>Select option</option>";

            for (var i = 0; i < result.length; i++)
            {
                markup += "<option Value=" + result[i].Value + ">" + result[i].Text + "</option>";
            }

            $("#YOUR ID").html(markup).show();


<select class="form-control HomePageDropDown" data-val="true" id="ID" name="NAME"></select>

I appreciate the answer. I did not know you could specify @onchance directly in the DropDownList! However it turns out the simple solution to this problem was found here https://stackoverflow.com/questions/168963/stop-jquery-load-response-from-being-cached. It was a caching issue, the rendered partial view was being cached for later use. — Kohdy Nicholson, Jul 05 '18 at 15:03

score 0 · Answer 2 · answered Jul 05 '18 at 15:05

0

After looking into the issue more, I found the solution here: Stop jQuery .load response from being cached

Turns out it was a caching issue after all.

answered Jul 05 '18 at 15:05

Kohdy Nicholson

11

jQuery AJAX .load() only hitting controller method once

2 Answers2