ConfirmButtonExtender and ModalPopupExtende "ScriptLoader is already loading scripts." Problem RSS

• • Reply
  

  w.kiermasz

  0 Points

  1 Post

  ConfirmButtonExtender and ModalPopupExtende "ScriptLoader is already loading scripts." Problem

  Nov 29, 2007 09:08 PM|LINK

  I created the following GridView

      <asp:UpdatePanel ID="ProductsListUpdatePanel" runat="server">
          <ContentTemplate>
              <asp:ObjectDataSource ID="ProductsObjectDataSource" runat="server" SelectMethod="GetAllProducts"
                  TypeName="ProductsDataSource"></asp:ObjectDataSource>
              <asp:Panel ID="pnl_Confirm" runat="server" Style="display: none" CssClass="ModalPopup">
                  Are you sure?<br />
                  <br />
                  <asp:Button ID="btnOk" runat="server" Text="Usuń" />
                  <asp:Button ID="btnCancel" runat="server" Text="Anuluj" />
              </asp:Panel>
              <asp:GridView ID="ProductsGridView" runat="server" DataSourceID="ProductsObjectDataSource"
                  DataKeyNames="Id" AutoGenerateColumns="False" CssClass="Grid" OnRowDataBound="ProductsGridView_RowDataBound1"
                  OnRowCommand="ProductsGridView_RowCommand">
                  <Columns>
                      <asp:BoundField DataField="ProductPFK" HeaderText="ProductPFK" Visible="False" />
                      <asp:TemplateField ShowHeader="False">
                          <ItemTemplate>
                              <asp:ImageButton ID="EditImageButton" runat="server" CausesValidation="False" CommandName="Edit"
                                  ImageUrl="~/CSS/Pictures/edit.GIF" Text="Edit" />
                              <asp:ImageButton ID="DeleteImageButton" runat="server" CausesValidation="False" CommandName="Delete"
                                  ImageUrl="~/CSS/Pictures/delete.GIF" Text="Delete" />
                              <ajaxtoolkit:ConfirmButtonExtender ID="ext_confirm_Delete" runat="server" TargetControlID="DeleteImageButton"
                                  DisplayModalPopupID="ext_Modal_Delete">
                              </ajaxtoolkit:ConfirmButtonExtender>
                              <ajaxtoolkit:ModalPopupExtender ID="ext_Modal_Delete" runat="server" TargetControlID="DeleteImageButton"
                                  PopupControlID="pnl_Confirm" CancelControlID="btnCancel" BackgroundCssClass="ModalBackground"
                                  OkControlID="btnOk">
                              </ajaxtoolkit:ModalPopupExtender>
                          </ItemTemplate>
                      </asp:TemplateField>
                      <asp:TemplateField HeaderText="Name">
                          <ItemTemplate>
                              <asp:ImageButton ID="RollButton" runat="server" CausesValidation="False" CommandName="RollDown"
                                  ImageUrl="~/CSS/Pictures/plus.GIF" Text="Button" CommandArgument='<%# Eval("Id") %>'
                                  Visible="false" />
                              <asp:Label ID="ItemName" runat="server"><%# Eval("Name") %></asp:Label>
                          </ItemTemplate>
                      </asp:TemplateField>
                      <asp:BoundField DataField="Operator" HeaderText="Agragacja" />
                      <asp:CheckBoxField DataField="OwnNeeds" HeaderText="Własne potrzeby" />
                  </Columns>
                  <HeaderStyle CssClass="GridHeader" />
              </asp:GridView>
          </ContentTemplate>
      </asp:UpdatePanel>

  When I click the RollButton new rows apears in the GridView. When the page is rendering, ConfirmButtonExtender and ModalPopupExtender are loading I can still click some other buttons like DeleteImageButton button. Then I get the error:

  Microsoft JScript runtime error: Sys.InvalidOperationException:
  ScriptLoader.loadScripts cannot be called while the ScriptLoader is already
  loading scripts. 

  What is the comprehensive sollution of this problem?

  I tried to use the UpdateProgress control but I couldn't create such <div> and CSS that would cover the whole page (in IE6).

  It also takes some time to render the whole ModalPanel for many rows. I belive that there is any method to do it faster.
   

   Any solution is really welcome.
   

• • Reply
  

  Jonathan She...

  All-Star

  31269 Points

  3445 Posts

  Re: ConfirmButtonExtender and ModalPopupExtende "ScriptLoader is already loading scripts." Proble...

  Dec 06, 2007 08:51 AM|LINK

  Hi W.kiermasz,

  It is not an effiecient way to add AJAX Controls to each ItemTemplate.  If you insist on your method, I suggest that you should use a div convered all the screen when page is loading.  Meanwhile, add another javascript which will detect whether the last AJAX control is prepared or not by using typeof($find("AJAX Control's BehavavoirID")). If the last one prepared, hide the top div and show the  GridView. Here is the sample which shows how to use only one ModalPopupExtender in a GridView.  

  <%@ Page Language="C#" %>
  
  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
  
  <script runat="server">
  
  
      protected void Page_Load(object sender, EventArgs e)
      {
          //Attach a Javascript funtion to the LinkButton.
          LinkButton myLinkButton;
          for (int i = 0; i < GridView1.Rows.Count; i++)
          {
              myLinkButton = (LinkButton)GridView1.Rows[i].Cells[4].FindControl("LinkButton1");
              myLinkButton.Attributes.Add("onclick", "shopModalPopup('" + GridView1.Rows[i].Cells[0].Text + "');return false;");
          }
      }
  
  
      protected void SqlDataSource1_Selecting(object sender, SqlDataSourceSelectingEventArgs e)
      {
          string text = e.Command.CommandText.ToString();
      }
  </script>
  
  
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
      <title>Untitled Page</title>
      <style>
          .modalBackground {
  	        background-color:Gray;
  	        filter:alpha(opacity=70);
  	        opacity:0.7;
          }
  
  
          .modalPopup {
  	        background-color:#FFD9D5;
  	        border-width:3px;
  	        border-style:solid;
  	        border-color:Gray;
  	        padding:3px;
  	        width:250px;
          }
      </style>
  </head>
  <body>
      <form id="form1" runat="server">
          <asp:ScriptManager ID="ScriptManager1" runat="server">
          </asp:ScriptManager>
          <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID"
              DataSourceID="SqlDataSource1">
              <Columns>
                  <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False"
                      ReadOnly="True" SortExpression="EmployeeID" ItemStyle-Width="0" />
                  <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
                  <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
                  <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
                  <asp:TemplateField>
                      <ItemTemplate>
                          <asp:LinkButton ID="LinkButton1" runat="server">Click On Me</asp:LinkButton>
                      </ItemTemplate>
                  </asp:TemplateField>
              </Columns>
          </asp:GridView>
          <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>"
              
  
              SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]"
              onselecting="SqlDataSource1_Selecting">
          </asp:SqlDataSource>
          <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="200px" Width="300px" style="display:none">
              <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                  <ContentTemplate>
                      EmployeeID:<asp:TextBox ID="tbEmployeeID" runat="server"></asp:TextBox> <br/>
                      Reason:<asp:TextBox ID="tbReason" runat="server"></asp:TextBox>
                  </ContentTemplate>
              </asp:UpdatePanel>
              <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
          </asp:Panel>
          <div style="display: none">
              <asp:Button ID="Button1" runat="server" Text="Button" /></div>
          <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
              PopupControlID="Panel1" CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
          </ajaxToolkit:ModalPopupExtender>
          <script type="text/javascript" language="javascript">
              function shopModalPopup(employeeID){
                  //show the ModalPopupExtender
                  $get("<%=tbEmployeeID.ClientID %>").value = employeeID;
                  $get("<%=tbReason.ClientID %>").value ="";
                  $find("<%=ModalPopupExtender1.ClientID %>").show();
              }
          </script>
      </form>
  </body>
  </html>

  I  hope this help.

  Best regards,

  Jonathan

   

  Please mark the replies as answers if they help or unmark if not.
  If you have any feedback about my replies, please contact msdnmg@microsoft.com.
  Microsoft One Code Framework
  • Marked as answer by Jonathan Shen – MSFT on Dec 06, 2007 08:52 AM
• • Reply
  

  serpilboyraz

  Member

  20 Points

  10 Posts

  Re: ConfirmButtonExtender and ModalPopupExtende "ScriptLoader is already loading scripts." Proble...

  Aug 04, 2008 06:41 AM|LINK

  try this

  <script type="text/javascript" language="javascript">var prm = Sys.WebForms.PageRequestManager.getInstance();

  prm.add_initializeRequest(initializeRequest);

  prm.add_endRequest(endRequest);

  var postbackElement;

  function initializeRequest(sender, args) { document.body.style.cursor = "wait";if (prm.get_isInAsyncPostBack())

  {

  args.set_cancel(true);

  }

  }

  function endRequest(sender, args) {document.body.style.cursor = "default";

  }

  </script>

  Serpil Boyraz