Solution 1 :

As @AlwaysHelping said in comment, Id selector MUST be unique for element. since you can not change their id, you can use name or class selector.

I made a demo based on your codes which change the id to name in partial. Also, I use jquery, it is much easier.

Partial view:

<div name="AddMedia">
    <form>
        <div class="container">
            <div class="form-row">
                <div class="col-6 dropdown my-2 px-0">
                    <label class="control-label">Source:<span class="text-danger ml-1">*</span></label>
                    <select name="SourceFromSelect" style="width:85%;" class="btn border-dark">
                        <option selected>Select</option>
                        <option value="1">Phone or Computer</option>
                        <option value="2">Other Media</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="col-5">
                    <div name="MediaFile" class="form-group">
                        <label for="exampleFormControlFile1">Pick a File</label>
                        <input type="file" class="form-control-file" name="exampleFormControlFile1">
                    </div>
                    <div name="MediaLink" class="form-group">
                        <label for="url">Link the Media</label>
                        <input type="url" class="form-control" name="exampleFormControlFile1">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

Scripts´╝Ü

<script>
    $("[name = MediaFile]").css("display", "none")

    $("[name = SourceFromSelect]").on('change', function () {
        var parent = $(this.parentElement.parentElement.nextElementSibling)
        if ($(this).find(":selected").text() == "Phone or Computer") {
            parent.find("[name = MediaFile]").css("display", "inline-block");
            parent.find("[name = MediaLink]").css("display", "none");
        }
        else {
            parent.find("[name = MediaFile]").css("display", "none");
            parent.find("[name = MediaLink]").css("display", "inline-block");
        }

    });

</script>

Result:

enter image description here

Problem :

I am very new to event delegation and I’m having trouble selecting the correct div to change. I have a partial view that can be displayed multiple times on a webpage. However, when it is displayed multiple times, the JavaScript only works for the first instance of the partial view. So I tried to use event delegation to solve my problem but it still only works on the first instance. I think it might be anytime I select by Id, since they share ids, it is selecting only the first id it sees and thus only working on the first instance of the partial view. Here is my Partial View’s HTML:

<div id="AddMedia">
    <form>
        <div class="container">
            <div class="form-row">
                <div class="col-6 dropdown my-2 px-0">
                    <label class="control-label">Source:<span class="text-danger ml-1">*</span></label>
                    <select id="SourceFromSelect" asp-for="Medias.SourceFrom" asp-items="Html.GetEnumSelectList(typeof(SourceFromEnum))" style="width:85%;" class="btn border-dark" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <option class="dropdown-item" selected>Select</option>
                    </select>
                    <span asp-validation-for="Medias.SourceFrom" class="text-danger"></span>
                </div>
            </div>
            <div class="form-row">
                <div class="col-5">
                    <div id="MediaFile" class="form-group">
                        <label for="exampleFormControlFile1">Pick a File</label>
                        <input type="file" class="form-control-file" id="exampleFormControlFile1">
                    </div>
                    <div id="MediaLink" class="form-group">
                        <label for="url">Link the Media</label>
                        <input type="url" class="form-control" id="exampleFormControlFile1">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

And here is the script for it:

  document.getElementById("MediaFile").style.display = "none";

    const addMedia = document.querySelector("#AddMedia")
    addMedia.addEventListener('change', function (e) {
        if (e.target.getAttribute('id') === 'SourceFromSelect') {
            changeFile(e);
        }
    });   

    function changeFile(e) {
       // $("#SourceFromSelect").change(function () {
        console.log(e.target)
            var e = document.getElementById("SourceFromSelect");
            var strUser = e.options[e.selectedIndex].text;
            if (strUser == "Phone or Computer") {
                document.getElementById("MediaFile").style.display = "inline-block";
                document.getElementById("MediaLink").style.display = "none";
            }
            else {
                document.getElementById("MediaFile").style.display = "none";
                document.getElementById("MediaLink").style.display = "inline-block";
            }
       // })
    }

Finally here is where I call the Partial view:

<div id="MediaList">
        @for (i = 0; i < MediaCount; ++i)
        {
            <partial name="_MediaPartial" />
        }
</div>

Comments

Comment posted by Always Helping

id

Comment posted by Bubinga

I don’t think I can do that, it is dynamically generated html from the partial view. Unless there is someway to change the id based on the partial view count, I think i’m stuck with identical ids.

Comment posted by Always Helping

Well its not right then. even auto generated. This does not seems to be good practice. Must be unique.

Comment posted by Terence Cheng

The

Comment posted by Bubinga

opps, I copied from the wrong area, they are the same in my actual code. I updated my question to fix it

By

Leave a Reply

Your email address will not be published. Required fields are marked *