why ajax form Ajax.BeginForm does not work second time i hit the link

Question

User1991482975 posted

I have a list of items,

in this list i can activate and desactivate eaach item,

the first time i click on activate all works but when the container is reloaded i cannot use anymore the ajax form for the others items..

why?

code in first page index.html:

 <div id="some_grid_container">
                @Html.Action("HairAccountMenuAdvertising", "Account")
            </div>

on partial view

<div class="_asty_cell10">
                    @if (item.PartnerVisible == false)
                    {
                        <div class="_asty_container">
                            <div class="_asty_ads_icon _asty_ads_icon33 _asty_link_box _asty_ads_icon_normal">
                                <div class="_asty_btn _asty_ads_iconpt15"><b title="@ViewRes.Shared.Details" class="@itemnotactive"><i class="fa fa-search-plus @itemnotactive"></i> <b class="hide-tablet">@ViewRes.Shared.Details</b></b></div>
                            </div><div class="_asty_ads_icon _asty_ads_icon33 _asty_link_box _asty_ads_icon_center">
                                <div class="_asty_btn _asty_ads_iconpt15"><b title="@ViewRes.Shared.Edit" class="@itemnotactive"><i class="fa fa-pencil-square-o @itemnotactive"></i> <b class="hide-tablet">@ViewRes.Shared.Edit</b></b></div>
                            </div><div class="_asty_ads_icon _asty_ads_icon33 _asty_link_box _asty_ads_icon_normal">
                                <div class="_asty_ads_iconpt15">
                                    @using (Ajax.BeginForm("HairAccountMenuAdvertising", "Account", new AjaxOptions { Confirm = messageconfirm, HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "some_grid_container" }, new { @class = "noclass" }))
                                    {
                                        @Html.Hidden("partnervisibleid", item.PartnerId.ToString() as string)
                                        <button class="_asty_btn" title="@ViewRes.Shared.Activate"><i class="fa fa-unlock"></i> <b class="hide-tablet">@ViewRes.Shared.Activate</b></button>
                                    }
                                </div>
                            </div>
                        </div>
                    }
                    else
                    {                        
                        <div class="_asty_container">
                            <div class="_asty_ads_icon _asty_ads_icon33 _asty_link_box _asty_ads_icon_normal">
                                <div class="_asty_btn _asty_ads_iconpt15"><a href="@Url.Action("Show", "Partner", new { id = item.PartnerId, title = item.PartnerTitle.URLFriendly() })" title="@ViewRes.Shared.Details"><i class="fa fa-search-plus"></i> <b class="hide-tablet">@ViewRes.Shared.Details</b></a></div>
                            </div><div class="_asty_ads_icon _asty_ads_icon33 _asty_link_box _asty_ads_icon_center">
                                <div class="_asty_btn _asty_ads_iconpt15"><a href="@Url.Action("PartnerEdit", "Partner", new { id = item.PartnerId })" title="@ViewRes.Shared.Edit"><i class="fa fa-pencil-square-o"></i> <b class="hide-tablet">@ViewRes.Shared.Edit</b></a></div>
                            </div><div class="_asty_ads_icon _asty_ads_icon33 _asty_link_box _asty_ads_icon_normal">
                                <div class="_asty_ads_iconpt15">
                                    @using (Ajax.BeginForm("HairAccountMenuAdvertising", "Account", new AjaxOptions { Confirm = messageconfirmnot, HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "some_grid_container" }, new { @class = "noclass" }))
                                    {
                                        @Html.Hidden("partnernonvisibleid", item.PartnerId.ToString() as string)
                                        <button class="_asty_btn" title="@ViewRes.Shared.Deactivate"><i class="fa fa-lock"></i> <b class="hide-tablet">@ViewRes.Shared.Deactivate</b></button>
                                    }
                                </div>
                            </div>
                        </div>
                    }
                </div>

controller

// GET: /Account/HairAccountMenuAdvertising/
        [Authorize]
        public ActionResult HairAccountMenuAdvertising(string accountmenu, int? partnerdeleteid, int? partnernonvisibleid, int? partnervisibleid, int? page)
        {

            if (partnerdeleteid != null)
            {
                Partner partnerdelete = db.Partners.Find(partnerdeleteid);
                if (!User.IsInRole("Admin"))
                {
                    // How to chek if user id is the one of the partner
                    var str = User.Identity.GetUserId();

                    if (!db.Partners.Any(m => m.UserId == str && m.PartnerId == partnerdelete.PartnerId))
                    {
                        return RedirectToAction("NotFound", "Home");
                    }
                }
                //Set the Partner to delete
                partnerdelete.PartnerVisible = false;
                partnerdelete.PartnerDelete = true;
                db.Entry(partnerdelete).State = EntityState.Modified;
                db.SaveChanges();
            }


            if (partnernonvisibleid != null)
            {
                Partner partnernonvisible = db.Partners.Find(partnernonvisibleid);
                if (!User.IsInRole("Admin"))
                {
                    // How to chek if user id is the one of the partner
                    var str = User.Identity.GetUserId();

                    if (!db.Partners.Any(m => m.UserId == str && m.PartnerId == partnernonvisible.PartnerId))
                    {
                        return RedirectToAction("NotFound", "Home");
                    }
                }
                //Set the Partner to nonvisible
                partnernonvisible.PartnerVisible = false;
                db.Entry(partnernonvisible).State = EntityState.Modified;
                db.SaveChanges();
            }
            if (partnervisibleid != null)
            {
                Partner partnervisible = db.Partners.Find(partnervisibleid);
                if (!User.IsInRole("Admin"))
                {
                    // How to chek if user id is the one of the partner
                    var str = User.Identity.GetUserId();

                    if (!db.Partners.Any(m => m.UserId == str && m.PartnerId == partnervisible.PartnerId))
                    {
                        return RedirectToAction("NotFound", "Home");
                    }
                }
                //Set the Partner to nonvisible
                partnervisible.PartnerVisible = true;
                db.Entry(partnervisible).State = EntityState.Modified;
                db.SaveChanges();
            }

            var partners = db.Partners as IQueryable<Partner>;
            var userstr = User.Identity.GetUserId();
            partners = partners.Where(r => r.UserId == userstr);

            //Not hidden by admin and Not deleted by user
            //partners = partners.Where(r => r.PartnerVisible.Equals(true));
            partners = partners.Where(r => r.PartnerDelete.Equals(false));

            //SORTING 
            partners = partners.OrderBy(r => r.PartnerTitle);

            //FIRST 250
            partners = partners.Take(250);

            //Pagination
            int pageSize = 25;
            int pageNumber = (page ?? 1);

            return PartialView(partners.ToPagedList(pageNumber, pageSize));

        }

it looks like the second time i hit the javascripts are npot working anymore

any help?

Answer 1

User475983607 posted

The design overwrites, what looks like, a paged list UI.  This approach breaks the JavaScript/jQuery event handlers that were set when the page initially loaded.  

I recommend dropping the AJAX form for a full post back.  The alternative fixing the general design which will include learning AJAX/JavaScript basics.

Answer 2

User1991482975 posted

i was thinking to reload all the javascritps...

how to ahive this?

on ajax form sent success than reload all the javascripts..

any guess?

Answer 3

User475983607 posted

i was thinking to reload all the javascritps...

how to ahive this?

Again, use a full post back rather than AJAX.  A full post back reloads your JavaScript application.

on ajax form sent success than reload all the javascripts..

any guess?

No need to guess when you have the reference documentation.  Sure, you can rerun the same scripts but it causes a memory leak and considered a bad practice.  

Answer 4

User-474980206 posted

i was thinking to reload all the javascritps...

how to ahive this?

on ajax form sent success than reload all the javascripts..

any guess?

typically the issue is that the script have bound event handlers to dom elements and the ajax has repacked these elements (so they are not  bound anymore).  you need to go thru each script and review the bindings and rerun. for some they will have a rebind / reinit command, some you will need to recall init. it all depends on the libraries you are using. 

additionally if any of these libraries don't use jquery binding (vanilla js), you will have a memory leak as these elements will not be released. you should call the libraries unbind command before calling the new bind.