JavaScript not loaded when loading user control dynamically in an Ajax request

33 posts, 0 answers
  1. vlad
    vlad avatar
    21 posts
    Member since:
    Aug 2007

    Posted 23 Sep 2012 Link to this post

    Hi there,

    If you need to launch code on execution, you have to use a small trick (at least that's what I do). Personally, I use a radgrid created event to execute startup code (inside registered js block of course), like this:

    <script type="text/javascript">
        function uxRadGrid_Created(sender, arg) {
    //STARTUP JS CODE
        }
    </script>

    If you don't need a radgrid in your ascx, you could create a dummy one (invisible), I don't think that it will affect your page performance.

    Best
  2. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 23 Sep 2012 Link to this post

    I trust that everyone knows that this is not a Telerik-specific problem.  It will occur anytime one wishes to load Javascript that's located in a User Control.  After a lot of frustration and research and created a universal solution to my specific problem of maintaining the scrollbar position in DIVs and Panels in between partial postbacks.  I offer it here in case it helps someone else:

    Developer Notes
    Some DIV elements have their 'overflow-y' properties set to 'auto'.  This lets a vertical scrollbar appear when needed.  If this, and nothing else, is setup then it works fine except for one thing: After a partial postback, the position of the scrollbar is lost.  This can be rather disconcerting to the user as suddenly the contents of the DIV shift position without any apparent reason why.  So to correct this, special Javascript has been built which stores the Y-position before the postback and then restores it afterwards.

    To implement this code in a Web Content Form or User Control, do the following:

    1. In the layout page add this hidden field:
          <asp:HiddenField ID="divScrollInit" runat="server" />
          
    2. In the "(!IsPostBack)" or "(!Initialized)" construct of Page_Load initialize the hidden field:
          divScrollInit.Value = "moduleName:div1,div2,...,divN"
          
       Here are some examples:
         - divScrollInit.Value = "GeneralInfo:divScroll";
         - divScrollInit.Value = "EquipSubType:divScroll1,divScroll2,divScroll3";

    That's it.  Once this is done then the Javascript code, located in your external .JS file, will handle everything else.


    var dsInfo;  // Global variable used in the management of DIV Scroll values
     
    Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequestHandler);
    function InitializeRequestHandler(sender, eventArgs) {
      // Note: Because this code is located in an external file, we can no longer reference any ASP.NET
      //       controls explicitly.  Thus, the DIV inside each ProgressTemplate was specifically given
      //       an 'id' property with the value of 'progress'.  With it, we can then reference its parent,
      //       which is the UpdateProgress control.
     
      // Initialization of the DIV Scroll Management global variable
      // -----------------------------------------------------------
      // Reaching here, we're in one of three possible states:
      //   1. 'dsInfo' is null.
      //   2. 'dsInfo' has already been populated by the current page (ie. we haven't changed pages).
      //   3. 'dsInfo' has been previously populated by a different page (ie. we've switched to a new page).
      // We will only repopulate 'dsInfo' for cases #1 & #3.
      if ($('[id$=_divScrollInit]').length > 0) {
        var dsInitArray = $('[id$=_divScrollInit]').val().split(":");
        var module = dsInitArray[0];
        var divScrolls = dsInitArray[1];  // CDF string of one or more element IDs
     
        if (dsInfo == null) {
          // Case #1
          dsInfo = module + ":";
          $.each(divScrolls.split(","), function() {
            dsInfo += this.trim() + ",0;";
          });
          dsInfo = dsInfo.slice(0, -1);  // Remove trailing semicolon
        }
     
        else if (module == dsInfo.split(":")[0]) {
          // Case #2
          // We don't actually need to do anything
        }
     
        else {
          // Case #3
          dsInfo = null;
        }
      }
    }
     
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
    function BeginRequestHandler(sender, eventArgs) {
      // Manages the DIV Scroll values
      if (dsInfo != null) {
        var dsInfoNew = "";
        var module = dsInfo.split(":")[0];
        var dsData = dsInfo.split(":")[1];
     
        $.each(dsData.split(";"), function() {
          var id0 = this.split(",")[0].trim();  // Note: Used 'id0' rather than 'id' so code is less confusing
          var newVal = 0;  // Default assumption
     
          var selSet = $('[id$=' + id0 + ']');
          if (selSet.length > 0) {
            var div = $get(selSet[0].id);
            if (div != null) {
              newVal = div.scrollTop
            }
          }
     
          dsInfoNew += id0 + "," + newVal + ";";
        });
     
        dsInfoNew = dsInfoNew.slice(0, -1);  // Remove trailing semicolon
        dsInfo = module + ":" + dsInfoNew;
      }
      // End of managing DIV Scroll values   
    }
     
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, eventArgs) {
      // Manages the DIV Scroll values
      if (dsInfo != null) {
        var dsData = dsInfo.split(":")[1];
       
        $.each(dsData.split(";"), function() {
          var id0 = this.split(",")[0];
          var newVal = this.split(",")[1];
     
          var selSet = $('[id$=' + id0 + ']');
          if (selSet.length > 0) {
            var div = $get(selSet[0].id);
            if (div != null) {
              div.scrollTop = newVal;
            }
          }
        });
      }
      // End of managing DIV Scroll values   
    }

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tonino
    Tonino avatar
    107 posts
    Member since:
    Nov 2007

    Posted 16 May 2014 in reply to Iana Tsolova Link to this post

    Cool, using RadScriptBlock in the user control helped!
Back to Top