Ajax form view issue, asp.net mvc 3

Question

I want to add some ajax to my forms. Here is the main view:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

// here I display each post from Posts collection
@foreach (var post in Model.Posts)
{   
<div>
<div>
    <strong>
        Title: @post.Title
    </strong>
</div>
<div>@post.Text</div>
<div>Posted by: @post.User.UserName</div>
<div>Posted Date: @post.CreatedDate</div>

@{ var membershipUser = Membership.GetUser(); }
@if (membershipUser != null)
{
    var providerUserKey = membershipUser.ProviderUserKey;
    if (providerUserKey != null && post.CreatedBy == (Guid) providerUserKey)
    {
        <div style="display: none; color: red;" id="postEditLoading">Loading..</div>

        <p id="postEdit">

            // EditPost method returns edit view asynchronously

            @Ajax.ActionLink("Edit", "EditPost", new {id = post.PostId, @class = "averageLink"},
                new AjaxOptions {UpdateTargetId = "postEdit", LoadingElementId = "postEditLoading", LoadingElementDuration = 3000})

            @Html.ActionLink("Delete", "DeletePost", new {id = post.PostId}, new {@class = "averageLink"})
        </p>
    }
}

Everything works, except for this strange thing: the form that is returned by EditPost method appeares right below first post, whether I wanna edit first or last post.

How could I fix this, so the form will appear below the post I want to edit??

Thanks for help in advance!

Bahman · Accepted Answer · 2013-01-24 20:09:38Z

1

I think this is because of the updatetargetid that you used in your ActionLink. The id of updated element is "postEdit" but for each item you'll create a p with the same id. I think you must change the id of p based on each item and also change updatetargetid based on that item.

something like this:

@{string UpdatepID = "postEdit" + post.PostId;}
<p id=@UpdatepID>

            // EditPost method returns edit view asynchronously

            @Ajax.ActionLink("Edit", "EditPost", new {id = post.PostId, @class = "averageLink"},
                new AjaxOptions {UpdateTargetId = UpdatepID, LoadingElementId = "postEditLoading", LoadingElementDuration = 3000})

edited Jan 24, 2013 at 20:09

answered Jan 24, 2013 at 19:32

Bahman

1,05413 silver badges28 bronze badges

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

2 Comments

Aleksei Chepovoi Over a year ago

I get an error with "UpdateTargetId = @UpdatepID" and "<p id="@UpdatepID">" lines : cannot resolve symbol 'UpdatepID'. Besides I wrapped postEdit with double quotes, cause there is no such member. What did I do wrong?

Aleksei Chepovoi Over a year ago

yes, I found my mistake) Your code works perfectly fine! thanks!

Dima · Accepted Answer · 2013-01-24 19:30:14Z

0

You have these 2 tags for each post, don't you?

    <div id="postEditLoading">Loading..</div>

    <p id="postEdit">
    </p>

In this case you have multiple tags with the same id, what is really a violation of html. And in that case js takes first tag, which it can reach.

To fix it, you can name your tags based on some post info:

    <div id="[email protected]">Loading..</div>

    <p id="[email protected]">
    </p>

answered Jan 24, 2013 at 19:30

Dima

6,7414 gold badges26 silver badges43 bronze badges

1 Comment

Aleksei Chepovoi Over a year ago

do I need to change UpdateTargetId value the same way? I tried both - doesn't work: pressing the link - nothing happend

Collectives™ on Stack Overflow

Ajax form view issue, asp.net mvc 3

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related