CODEWITHSUNDEEP
jqueryhtmlajaxasp.net-mvc
James Wilson
James Wilson

Reputation: 5150

jQuery Ajax partial view only working once

I have an asp.net page that returns a partial view in the tab I am currently doing my work in. I have the jQuery all set up and it works. It works one time and through ajax returns a partial view .html(result);

However this only works one time. I click the button it does everything behind the scenes like it should, it replaces the html like it should. Then when I click the button again nothing, its like the jQuery doesn't exist for these buttons any more. There is no page reload this is all done through ajax.

the HTML that is used when the page first is loaded and the HTML returned through .html(result) is the exact same html same partial view is used for both.

Is my jQuery somehow being disconnected when this partial view is returned?

Here is my Ajax call:

function updateSort(object) {
    jQuery.ajax({
        url: "/MasterList/UpdateSort",
        type: "get",
        data: object, //if you need to post Model data, use this
        success: function (result) {
            //alert('success');
            //console.log(result);
            jQuery("#procedures").html(result);
        }
    });
}

Here is the button click:

jQuery(".btnMoveUp").click(function () {
        var $this = jQuery(this),
            processID = $this.data('processid'),
            currProcedureID = $this.data('procedureid'),
            currSortOrder = $this.data('sortorder'),
            idx = jQuery('.commentlist li').index($this.closest('li')),
            $prevLi = jQuery('.commentlist li').eq(idx - 1),
            $anchor = $prevLi.find('.btnContainer a'),
            prevProcedureID = $anchor.data('procedureid'),
            prevSortOrder = $anchor.data('sortorder');

        // create object that we can pass to MVC controller
        var objProcedure = {};

        objProcedure = {
            _processID: processID,
            _currProcedureID: currProcedureID,
            _currSortOrder: currSortOrder,
            _switchProcedureID: prevProcedureID,
            _switchSortOrder: prevSortOrder
        }

        updateSort(objProcedure);

    });

Why would this work only a single time?

Upvotes: 1

Views: 3103

Answers (3)

adeneo
adeneo

Reputation: 318352

You should be using a delegated event handler, like so :

$('#procedures').on('click', '.btnMoveUp', function () {
    var $this = jQuery(this),
        processID = $this.data('processid'),
        currProcedureID = $this.data('procedureid'),
        currSortOrder = $this.data('sortorder'),
        idx = jQuery('.commentlist li').index($this.closest('li')),
        $prevLi = jQuery('.commentlist li').eq(idx - 1),
        $anchor = $prevLi.find('.btnContainer a'),
        prevProcedureID = $anchor.data('procedureid'),
        prevSortOrder = $anchor.data('sortorder');

    // create object that we can pass to MVC controller
    var objProcedure = {};

    objProcedure = {
        _processID: processID,
        _currProcedureID: currProcedureID,
        _currSortOrder: currSortOrder,
        _switchProcedureID: prevProcedureID,
        _switchSortOrder: prevSortOrder
    }

    updateSort(objProcedure);
});

Upvotes: 3

Matt Houser
Matt Houser

Reputation: 36113

Use the [OutputCache] attribute on your action to help avoid caching.

[OutputCache(Duration = 0)]

Upvotes: 1

BenM
BenM

Reputation: 4278

I've had a similar problem and it was because the response was being cached. You can set jQuery ajax attributes for caching to false.

$.ajaxSetup({ cache: false });

Upvotes: 2

Related Questions