CODEWITHSUNDEEP
jqueryasp.net-mvc
user2158164
user2158164

Reputation: 49

Dynamic id for div tag in partial View

I am trying to add partial view dynamically to a main view. The problem is I am not able to get a dynamic id for the div tag in the partial View when i add it to the main view multiple times.

As I am not able to get the id, i am unable to hide the partial view based on the div tag. Can someone please suggest to me what I am missing. Thanks in advance for your help. Below is the piece code:

Partial View: 

<div [email protected]>
    <div id="div_actionsbtns">
        <img src="~/Images/Trash.png" alt="Delete" class="editbtn" id="btn_actiondelete" />
        <img src="~/Images/Move.png" alt="Move" class="editbtn" id="btn_actionmove" />
    </div>

    <div id="div_editactions">
        ......
    </div>
</div>

<script>
    jQuery(document).ready(function ($) {
        $('#btn_actiondelete').on('click', function () {
            var divparent = $('#div_editactions').parent().attr('id');
            $('#divparent').hide()
        });
</script>

Controller Code:

public ActionResult CreateNewActions(string actionid)
{
    ViewBag.DivActionID = actionid;
    return PartialView("~/Views/Interp/_AddActions.cshtml");
}

Main View:

<div>
     <div id="actions"></div>
</div>

<script type="text/javascript">
    var actionidcounter = 0;

    $("#btn_addactions").on('click', function () {                    
        actionid = "ActionID" + actionidcounter;

        $.ajax({
            async: false,
            data: { 'actionid': actionid },
            url: '/Home/CreateNewActions'
        }).success(function (partialView) {            
            actionidcounter++;                
            $('#actions').append(partialView);
        });
    });
</script>

Upvotes: 1

Views: 2023

Answers (1)

Shyju
Shyju

Reputation: 218722

Your partial view should not have hard coded static id values as you are rendering the same partial view over and over when user clicks the add button. This will produce more than one element with same id value and your jQuery selector will always gives you the first item in the array when you use the id selector. Also duplicate Ids in HTML is invalid!

What you should do is to use css class selector and use jQuery relative selectors. You may use the jQuery closest method to do so. Also you do not need to the delete button click code in the partial view. You need to include that only once in your main view.

Update your partial view content to have the css class for the delete button

<div class="action-item" id="@ViewBag.DivActionID">
    <div id="div_actionsbtns">
        <img src="~/Images/Trash.png" alt="Delete" class="editbtn delBtn"  />
        <img src="~/Images/Move.png" alt="Move" class="editbtn"  />
    </div>    
    <div id="div_editactions">
        <p>Currently showing actions for @ViewBag.DivActionID</p>
    </div>
</div>

Now in the main view, listen to the click event of the button with the css class "delBtn" and get the outer container div using the closest method and hide/remove as needed.

So the code in your main view will be

@section scripts
{
    <script>

        var actionidcounter = 0;
        $(function () {
            //Register the add button handler

            $("#btn_addactions").on('click', function () {
                actionid = "ActionID" + actionidcounter;

                $.ajax({                       
                    data: { 'actionid': actionid },
                    url: '@Url.Action("CreateNewActions")'
                }).then(function (partialView) {
                    actionidcounter++;
                    $('#actions').append(partialView);
                });
            });

            //Register the delete button handler 

            $(document).on("click", ".delBtn", function () {
                  $(this).closest(".action-item").remove();
            });
        });

    </script>
}

Upvotes: 1

Related Questions