Changing div on onchange event of dropdownlistfor

Question

As you can see I am using data attributes to load the div DataSet_Data with a partial view returned from that url.action.

It loads on page load correctly hitting the data-url and loads the correct partial view. What I am trying to do is when the dropdownlist is changed to reload the div with the updated data-url action

 url = url + '/DataSetID=' + $(this).val();

the first console.log for the original data-url attribute is /CP/Data/DataSetID=3

the console.log for url shows /CP/Data/DataSetID=4 when the drop down is changed. the data-ajax is switched to false correctly

the updated data-url shows as/CP/Data?DataSetID=4 correctly set

and the DataSet_Data click function shows the click when changed.


    <div class="row form-group">
        <div class="col-lg-2">

        </div>
        <div class="col-lg-3">
            @Html.DropDownListFor(m => Model.DataSetID, new SelectList(Model.DataSets, "Value", "Text"), htmlAttributes: new { @class = "form-control m-l-5", @id = "selectedDataSet" })
        </div>
    </div>
    
        <div id="DataSet_Data" data-ajax="true" data-url="@Url.Action("DataSet_Data", "CP", new { DataSetID = DataSetID })">
        </div>

        }

 
<script>
            $(document).ready(function () {
                console.log($('#DataSet_Data').attr('data-url'));

        $("#selectedDataSet").change(function () {
            var url = '@Url.Action("DataSet_Data", "CP")';
            url = url + '/DataSetID=' + $(this).val();
            console.log(url);

            $('#DataSet_Data').attr('data-ajax', false);
            $('#DataSet_Data').attr('data-url', url);

            console.log($('#DataSet_Data').attr('data-ajax'));
            console.log($('#DataSet_Data').attr('data-url'));
            $('#DataSet_Data').click();

        });

        $('#DataSet_Data').on("click", function () {
            console.log("click");
        });

    });
</script>

I need the code to reload the div using the updated data-url. Im sure im missing something easy or there may be an easier way to achieve this.

[Accepted answer loading a partial view div onchange event with jquery here.](https://stackoverflow.com/a/38511462/3585500) — ourmandave, Jan 13 '23 at 02:33

score 1 · Answer 1 · answered Jan 13 '23 at 04:04

<script>
    $(document).ready(function () {
        $("#selectedDataSet").change(function () {
            var url = '@Url.Action("DataSet_Data", "CP")';
            url = url + '?DataSetID=' + $(this).val();
            $("#DataSet_Data").load(url);
        });

    });
</script>

This solved the issue.

Changing div on onchange event of dropdownlistfor

1 Answers1