Question

I’m currently working with the AJAX:UpdatePanelAnimationExtender and I’ve implemented it in code behind which is currently working perfectly but I’ve ran into a problem with using the UpdatePanelAnimationExtender and an ASP:Repeater. I’ve been messing around with different ways of implementing it but nothing has worked correctly…

---

I’ve tried to have it written in codebehind – inside itemBound (generates the code perfectly, is attached to the UPAE but of course is dropped on partial postback).
I’ve also attempted using it in the aspx which also posed a problem.

The repeater itself is creating a table of items (a cart) and I am attempting to highlight items that have changed when a postback happens (highlight qty if the qty changes, etc).

I’ve read that jquery has a much cleaner way of doing this and am attempting to go that direction.

---

edit:
I’m currently looking at

    function pageLoad()
    {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        changedHighlight();
    }
    function EndRequestHandler(sender, args){
        if (args.get_error() == undefined){ changedHighlight(); }
    }
    function changedHighlight() {
        $(document).ready(function() {
            $('span,input,option,select').live('change', function() { $(this).effect("highlight", {color: "#44EE22"}, 1500); });
        });
    }

I’d have to compare a stored value for it to the new posted value, which I’m working on right now. Also ‘change’ doesn’t appear to work on asp:labels?

Answer 1

Ended up using a global var (eh..) due to the issue of postback with the UpdatePanel and DOM recreation every time (meaning not able to use $.data() or this.data()).

Will only highlight non-submit inputs and DOM elements that have an ID. (otherwise static asp:labels will continue to flash)

var oldVar = [];
function pageLoad()
{
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler)
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
function BeginRequestHandler(sender, args) {
    $(document).ready(function() {
        oldVar = [];
        $('input,select,span').each(function() {
        if (this.type != "submit" && this.id != '') oldVar[this.id] = getValue(this);
        });
    });
}
function EndRequestHandler(sender, args){
    $(document).ready(function() {
        $('input,select,span').each(function() {
            if (this.type != "submit" && this.id != '')
            {
                if (oldVar[this.id] != getValue(this))
                {
                    $(this).effect('highlight', {color: '#44EE22'}, 3000);
                    oldVar[this.id] = getValue(this);
                }
            }
        });
    });
}
function getValue(control){
    if ('value' in control) return control.value;
    else if('textContent' in control) return control.textContent;
    else if('innerText' in control) return control.innerText;
}