Partial view not working properly

Question

I am developing MVC 3 application and using razor syntax.

In this application I am giving commenting facility.

I have added the Comment link in every Div. . When user click on that comment link, it loads the partial view which contains group of controls for Adding comments.

I am using list to disply records, and when user click on comment button I use the partial view to load comment control.

Now the problem is I can add comment only for first record I cant add comment on other records...

What the problem ?

Please check below image...

enter image description here

Here is the code which is in partial view which add comment in DB and again fetches latest comment back to view to display It.

<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>

<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>


 <script src="../../Scripts/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $('#AddCommentButton').click(function () 

        {
        var comment1 = $('#Comment').val();
        if (comment1 == '') {
            alert('Please enter a comment');
            return;
        }


            $.ajax({

                type: 'post',
                url: '/Comment/SaveComments',
                dataType: 'json',


                data:
                { 

                 'comments' : $('#Comment').val(), 
                 'EType' : @Html.Raw(Json.Encode(ViewBag.EType)), 
                  'EId' : @Html.Raw(Json.Encode(ViewBag.EId))

                },
                success: function (data) {


                                   $("p.p12").append('<button type="button" id=' + data.Id  + ' class="deleteComment2">Delete</button></div>')



                }

            });
        });
    });
</script>

I use below code, when i clicked on the delete button...

<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

    $('.deleteComment').live('click', function () {
        alert('Clicked');
    });

</script>

Now , the summary of a problem is I append div and in that div I add a button and I am trying to get click event of that button but I cant get that event.

Can anyone please give the simple code for handling of button's click event when button get added runtime in the Div tag.

Here is the update code for Darin Dimitrov

@model  IEnumerable<CRMEntities.Comment>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>


 <!DOCTYPE html>


<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

   $(document).on('click', '.deleteComment', function() 
   {
    alert('comment deleted');    
});


$(document).ready(function () {
alert("Doc loaded");

});


</script>




<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $('#AddCommentButton').click(function () {

            $('#comments22').append('<input type="button" class="deleteComment" value="Delete" /><br/>');
            $('#comments22').append('<input type="button" class="deleteComment" value="Delete" /><br/>');
            $('#comments22').append('<input type="button" class="deleteComment" value="Delete" /><br/>');
            $('#comments22').append('<input type="button" class="deleteComment" value="Delete" /><br/>');
        });
    });
</script>




<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".ShowComments").click(function () {
            $(".ParentBlock").slideToggle("slow");

        });
    });
</script>



</head>
<body>

@{





     <div class="ParentBlock">



    @foreach (var item in Model)
    {
        <div class="OwnerClass" id="OwnerName">


         <span class="EmpName"> @Html.ActionLink(item.Owner.FullName, "Details", "EMployee", new { id = item.OwnerId }, new { @style = "color:#1A6690;" })</span>

           @Html.DisplayFor(ModelItem => item.CommentDateTime)

          <span class="EmpName"><button type="button" id = "@item.Id" class="deleteComment">Delete</button></span>



          <span class="EmpName"> @Html.ActionLink("Delete", "Delete", "Comment", new { id = item.Id }, new { @style = "color:#1A6690;" })</span>


        <p class="CommentP">
           @Html.DisplayFor(ModelItem => item.CommentText)
        </p>

        <br />
            <a class="Delete222" style="cursor:move;display:none;">DeleteNew</a>
        <br />

        </div>


    }


     <p class="p12">

      </p>



</div>

      <p id="ClassPara" class="ShowComments" onclick="chkToggle()">Show All Comments</p>

}



   @Html.TextArea("Comment", "", 5, 80, "asdsd")


    <input type="button" value="Add Comment" id="AddCommentButton"/>                         
    <input type="button" value="Clear" onclick="clearText()"/>                    

    <br />

    <div id="comments22">
    <input type="button" class="deleteComment" value="Delete" /><br/>
    <input type="button" class="deleteComment" value="Delete" /><br/>    
    <input type="button" class="deleteComment" value="Delete" /><br/>


</div>




</body>
</html>

I have upladted my question, please check the code section now... — user1668543
– user1668543, Commented Sep 25, 2012 at 5:31

Community · Accepted Answer · 2017-05-23 10:30:24Z

1

You have subscribed to the click event of #AddCommentButton. But as you know ids must be unique in the whole DOM. You can only have 1 element with id="AddCommentButton". So you should use a class selector for your Add Comment button:

$('.addComment').click(...);

and your button:

<input type="button" value="Add Comment" class="addComment" />

Also I hope you have taken note of this answer. Apparently you haven't as I still see you hardcoding urls in your view instead of using helpers.

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Sep 25, 2012 at 5:25

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

user1668543 Over a year ago

Its not the issue abt adding the comment, its abt deleting the comment. newly added button in appended Div tag is not working...

user1668543 Over a year ago

sorry Darin Dimitrov, Actually I have messed up with my code...I have follow your tips...bit thats in another copy... Currently I just want to get the click event of the newly added button...

Darin Dimitrov Over a year ago

In order to get the click event of newly added buttons working you need to use .on() or .delegate() or .live(). Also in your question you are saying that you have problems with adding comment. You even provided a screenshot in which you explain that it works only for the first comment but not for subsequent comments. The reason for this as I explained in my answer is because you cannot have multiple buttons with the same id and you need to use a class selector. Also if those Add Comment buttons are added later to the DOM you should use .on to subscribe to their click handler.

user1668543 Over a year ago

exactly, but .on() .live() and .delegate() is not working in my code. is that issue related to script. ? I am updating my question, where you can see the ref. of the scripts which I have used.

Darin Dimitrov Over a year ago

I repeat it for the last time: you need to use .on().

|

Rajpurohit · Accepted Answer · 2012-09-25 06:30:06Z

1

hi you can get your delete event like this it's below

 $(".lnkDelete").click(function (e) {
            e.preventDefault();
            var targeturl = $(this).attr("href");

 and you can pass that targert url to your delete button like this 

window.location.href = targeturl;

i think this will help you....

answered Sep 25, 2012 at 6:30

Rajpurohit

2,0012 gold badges18 silver badges19 bronze badges

Collectives™ on Stack Overflow

Partial view not working properly

2 Answers 2

16 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

16 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related