Javascript function execution from asp.net codebehind?

Question

OK, this seems like a question that should be easy to answer, but just like with a mix of asp.net and jQuery, it's a bit of a nightmare.

What I want to do is fade divin and out at different times while the client is viewing my asp.net page; I disappear using jQuery fadeTo()before starting the UpdatePanel update (to show that the data is not fresh there), and I want it to disappear again after the UpdatePanel update. I got to updating UpdatePanel in the code, and this leads to a change in the content div... but how do I blur it again div?

As I see it, there are two ways; register an event handler on the page load to determine when the content divhas changed and disappeared, or call the function from asp.net code when I updated divto bring it back.

In the first case, there is no event caused by a change in the content div, so I can not do this. If anyone knows how I can get a client event to fire upon upgrade div, this would be a good solution.

In the second case, I thought that was for this ClientScriptManager, but he does not quite do what I want. I want to be able to register a specific Javascript function with ClientScriptManager, and then report ClientScriptManagerin order to execute it on the client, from my code. You cannot do this. ClientScriptManager.RegisterClientScriptBlock()just inserts some <script>into the HTML output, rather than calling a function. Presumably this would work if I continued to log things like:

<script>fadeBackIn();</script>

Javascript , , , key ClientScriptManager.RegisterClientScriptBlock(), . , . - , ?

:

ClientScriptManager.RegisterClientScriptFunction("fadeBackIn", "function fadeBackIn(){ ... }");

[...]

ClientScriptManager.ExecuteClientScriptFunction("fadeBackIn");

.: - (

Answer 1

, . pageLoaded PageLoadedEventArgs, get_panelsUpdated, , .

:

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) 
{
    var panels = args.get_panelsUpdated();

    if (panels.length > 0) 
    {
        for (var i in panels) 
        {
            if (panels[i].id == "DesiredUpdatePanelId") 
            {
                fadeBackIn(); 
            }
        }
    }
}

Answer 2

html , , div. window.setInterval, , 500 .

div :

<div id="mycontent">Blah, blah.</div>

:

$(function(){

   var $mycontent = $('#mycontent');
   var myContentHtml = $mycontent.html();
   var intervalId;

   function checkIfDivChanged()
   {
      window.clearInterval(intervalId);

      if (myContentHtml != $mycontent.html())
      {
         myContentHtml = $mycontent.html();

         // run update here..
         fadeBackIn();

         // if you want to stop the check then uncomment next line..
         // return;
      }

      intervalId = window.setInterval(checkIfDivChanged, 500);          
   }

   checkIfDivChanged();
});

Answer 3

ASP.NET Ajax Control Toolkit, , , : UpdatePanelAnimation.

.

Answer 4

script JavaScript ( jQuery), script .. , , div.

<script type="text/javascript">
var _watchTimer = 0;
window.onload = function WindowLoad(evt) {
    _watchTimer = window.setInterval("WatchForChange();", 100);
}

function WatchForChange()
{
    var oDiv = document.getElementById("MyDivToWatch");
    if (oDiv == null)
    {
        window.clearInterval(_watchTimer);
        return;
    }
    var prevHtml = oDiv.getAttribute("prev_html") || "";
    var curHtml = oDiv.innerHTML;
    if (prevHtml != curHtml)
    {
        if (prevHtml.length > 0)
        {
            alert("content changed");
        }
        else
        {
            //first run, ignore
        }
        oDiv.setAttribute("prev_html", curHtml);
    }
}
</script>
<div id="MyDivToWatch">I can be changed..</div>
<button type="button" onclick="document.getElementById('MyDivToWatch').innerHTML += ' like this..';">Change</button>

, , , AJAX aka UpdatePanel.