AJAX saving with duplicated forms

Question

---

Info and code:

I am working on an asp.NET code web application. My UI allows for the user to create a dynamic amount of an object via their input into forms. Due to this, several of the same form can be existing at once.

For example, say many of the following basic form exists:

<div class="Text example div">    
    <div class="form-group">
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

I would want to save this object using ajax when the "Name" field is changed, using something like the following:

   $("#Name").change(function () {
        //Do stuff
    });

The ajax should save the object to the DB, and will have a visual change, denoted in this example by the "text example div" in the code snippet. The problem is, due to the dynamic nature of this UI, there are technically many #Names. I want to make sure not only that I am saving the intended one, as well as being able to adjust the appropriate text relating to them rather than changing all of them.

Keep in mind that these divs are made dynamically via duplication of a base div, so they all start with the same info.

---

What I have tried:

I have tried making loops to change Ids of all the objects upon creation, but all the times this had to be done and accounted for made the code very clunky, so I was hoping for a better option.

I have tried looking for ways to get the parent of the changed #Name object

---

Note: I have tried to thoroughly explain and demonstrate the issue, if you need more info I will gladly do my best to accommodate

Answer 1

Dynamic AJAX and Event Delegation:

Given the dynamic nature of the divs in question, the original AJAX will not be applied to them. To fix this issue, put all doms you wish to have the ajax listeners for inside of a container of sorts (Ex: a div with id: container).

From here, set the AJAX selection to target the container, and use the "on" function to search for the class/id of the object you need. In the case of the above post, this would look something like this:

$("#container").on("change", '#Name', function () {
     //do something 
});

Where change should be replaced by the action you looking to handle, and Name should be replaced by the Id/class of the dom you are looking for. If anybody needs more information on this, look into "Event Delegation" regarding AJAX or JQuery in general.

---

Getting specific items:

For the sake of ensuring you get just the right objects if they have the same or similar IDs/class names (which is a discouraged practice, try to avoid if possible), you can query $(this) to get the object that was changed.

If needed, you can use that as a base to get the objects around it (say, in an example with nested divs. This can be done via children array or childNode if you need to go down, parentNode if you need to go up, etc. There are other ways, such as query selectors, this is just an idea.

A tip for this situation, although maybe complicated to implement in practice depending on the setup, is on duplication of the node such as is described in the question, change the ids of relevant parts so you can ensure uniqueness.