Question

I have an @Ajax.ActionLink that replaces his own wrapper, with another content that also has @Ajax.ActionLink, that returns first html content to wrapper. It’s link to partial that replaces it’s self and viceversa. My problem is that when i want some aditional functionaliti on click to ActionLink, my Jquery returns old partial, the one that has been click, and not the new, in firebug i clearly see my new elements, but cannot reach them, i tried, OnSuccess and OnComplete, but didnt succed! Any ideas?

Here’s example:

VIEW

index.cshtml

<div id="box">
    @Html.Partial("_PartialOne")
</div>

_PartialOne.cshtml

@Ajax.ActionLink("Get partial two", "getPartial2", "Home",
                new AjaxOptions
                    {
                        UpdateTargetId = "box",
                        InsertionMode = InsertionMode.Replace,
                        HttpMethod = "GET"       
                    },
                    new { @class="first"}
                )
<div id="testBox1">Hello, I am partial 1</div>

_PartialTwo.cshtml

@Ajax.ActionLink("Get partial one", "getPartial1","Home",
                new AjaxOptions
                    {
                        UpdateTargetId = "box",
                        InsertionMode = InsertionMode.Replace,
                        HttpMethod = "GET"
                    },
                    new { @class="second"}
                )

<div id="testBox2">Hello there this is partial 2</div>

CONTROLLER

HomeController.cs

public PartialViewResult getPartial1()
{
    return PartialView("_PartialOne");
}

public PartialViewResult getPartial2()
{
    return PartialView("_PartialTwo");
}

JS

$("#box a.first").live('click', function () {

    //how to fetch new data, that was filled with getPartial2()

    console.log($(this).parent().children());

    //this returns [a.first, div#testBox1] 
   // and I need [a.second, div#testBox2] 
});

How to select returned data to let’s say substring if neccesary??

EDIT

using OnComplete = “function”

VIEW

@Ajax.ActionLink("Get partial two", "getPartial2", "Home",
                new AjaxOptions
                    {
                        UpdateTargetId = "box",
                        InsertionMode = InsertionMode.Replace,
                        HttpMethod = "GET",
                        OnComplete = "getNewData"       
                    },
                    new { @class="first"}
                )
<div id="testBox1">Hello, I am partial 1</div>

JS

function getNewData()
{
    console.log($(this));

    //this returns [Object] of ajax call, niether
   // $(this).parent/s(), or $(this).children() is posible

}

How to select children of element that called this ajax?

Answer 1

I guess I am not 100% what you are looking for, but I think maybe your issue is caching. If you tack a unique parameter onto the GET request, do you get the result you are looking for?

@Ajax.ActionLink("Get partial two", "getPartial2", "Home", new { aparam = DateTime.Now.Ticks },
                new AjaxOptions
                    {
                        UpdateTargetId = "box",
                        InsertionMode = InsertionMode.Replace,
                        HttpMethod = "GET",
                        OnComplete = "completeGetThing"       
                    },
                    new { @class="first"}
                )
<div id="testBox1">Hello, I am partial 1</div>