Pagemethods in popuppanel does not load the second time in IE9

Asked 3/9, 2013 at 10:23 Answered 22/10, 2013 at 14:51

c#javascript internet-explorer-9 modalpopupextender pagemethods

I have a main page which has some pagemethod called to perform some activities. A popuppanel(popuppanel content page also have pagemethods) is used within this main page to show some details. If the same is executed multiple times (i.e., opening the popup panel many times), it is working in all other browsers other than IE9 (working even in IE8). However, first time execution is successful. The code that is being used is provided below.

Scriptmanager used as follow:

<ajaxToolkit:ToolkitScriptManager runat="server" ID="TSCM1" EnablePageMethods="true" />

Script In Main Page:

function Clkd(){
     var ppnl=document.getElementById("if1");
     ppnl.src="Test1.aspx";
     $find('<%= MPE.ClientID %>').show();
}

function Clkd2(){
     var ppnl=document.getElementById("if1");
     ppnl.src="";
     $find('<%= MPE.ClientID %>').hide();
}

$(document).ready(function(){
     PageMethods.mainPageMethod("MainTest",cbackfn);
});

function cbackfn(str){
     alert(str);
}

Page method:

 [System.Web.Services.WebMethod(EnableSession = true)]
        public static string mainPageMethod(String mainStr)
        {
            return mainStr + " Ok";
        }

Test1.aspx page Details (this is the page loaded inside the popup panel):

Script code below :

$(document).ready(function(){
     PageMethods.Testpm("Test",fnd);
});

function fnd(str){
     alert(str);
}

Page method:

 [System.Web.Services.WebMethod(EnableSession = true)]
        public static string Testpm(String alrt)
        {
            return "Ok";
        }

The following error is thrown if the same is executed the second time (in IE9 only)

SCRIPT5007: Unable to set value of the property '_UpdateProgress': object is null or undefined 
ScriptResource.axd?........

SCRIPT5007: Unable to get value of the property 'WebServiceProxy': object is null or undefined 
Test1.aspx, line 66 character 1

SCRIPT5007: Unable to get value of the property 'DomElement': object is null or undefined 
ScriptResource.axd?......, line 2 character 18851

SCRIPT5007: Unable to get value of the property 'add_init': object is null or undefined 
Test1.aspx, line 97 character 122

SCRIPT438: Object doesn't support property or method 'Testpm' 
Test1.aspx, line 11 character 4

Important Note: if main page does not have any pagemethods then its working fine. please help me out from this issue..

Crudden answered 3/9, 2013 at 10:23 Comment(7)

Have you tried using different approach besides <%= MPE.ClientID %> to supply client-id of MPE? <%= %> is Response.Write and it doesn't play well with MS Ajax stuff – Bickford 10/9, 2013 at 2:43

Yes I tried but same errors – Crudden 10/9, 2013 at 6:57

Can you please post altered code? – Bickford 10/9, 2013 at 10:56

just change '<%= MPE.ClientID %>' to 'MPE' and also checked with '#MPE' – Crudden 10/9, 2013 at 11:9

No, it's still have to be a valid Client ID. As a test can you verify in a rendered HTML what real client ID and try to use it? E.g. it may be something like $find('Parent_ctl00_MPE').show() – Bickford 10/9, 2013 at 13:25

if i use without pagemethod working fine.so i thought the problem with pagemethod – Crudden 11/9, 2013 at 4:58

Could you add relevant HTML? – Victoir 13/9, 2013 at 8:44

You should have added relevant HTML, that might have helped others to help you out.

Well I used your code and added missing code and when I runt it, it is working fine in all browsers including IE9.

Please find below code:

Main Page (Default.aspx):

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function Clkd() {
            var ppnl = document.getElementById("if1");
            ppnl.src = "test.aspx";
            $find('<%= MPE.ClientID %>').show();
        }

        function Clkd2() {
            var ppnl = document.getElementById("if1");
            ppnl.src = "";
            $find('<%= MPE.ClientID %>').hide();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <cc1:ToolkitScriptManager runat="server" ID="scriptmanager1">
    </cc1:ToolkitScriptManager>
    <asp:Panel ID="pnl1" runat="server">
        <iframe id="if1"></iframe>
        <asp:Button ID="btnHidePopup" runat="server" Text="Hide" />
    </asp:Panel>
    <asp:Button ID="btnShowPopup" runat="server" Text="Show" OnClientClick="Clkd();" />
    <cc1:ModalPopupExtender ID="MPE" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnl1"
        DropShadow="true" OkControlID="btnHidePopup" OnOkScript="Clkd2()" CancelControlID="btnHidePopup">
    </cc1:ModalPopupExtender>
    </form>
</body>

Test.aspx:

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            PageMethods.Testpm("Test", fnd);
        });
        function fnd(str) {
            alert(str);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <cc1:ToolkitScriptManager runat="server" ID="scriptmanageriframe" EnablePageMethods="true">
    </cc1:ToolkitScriptManager>
    Hello World this is game.
    </div>
    </form>
</body>

Test.aspx.ce (Webmethod):

 [System.Web.Services.WebMethod(EnableSession = true)]
        public static string Testpm(String alrt)
        {

            return "Ok";
        }

I hope it helps!

Victoir answered 13/9, 2013 at 10:22 Comment(2)

please check with ie9.its working fine first time. hide the popuppanel again try to show its getting error. – Crudden 13/9, 2013 at 10:56

It is working fine in IE9, everytime you open it. No errors at all. Just use my code in new project and try. – Victoir 13/9, 2013 at 11:22

U can try with different popUp

for Example:

asp:ModalPopupExtender also available in ajaxtoolkit
jquery dialog popup.

Cribwork answered 13/9, 2013 at 11:4 Comment(0)

I will prefer you to go with jquery dialog popup instead of ajaxpopup panel using the same web method in c# and jquery code you have written.

Phonetics answered 11/9, 2013 at 8:15 Comment(0)

Use ClientIdMode="Static" on the MPE and use MPE id directly in $find().

ASPX Code:

<asp:ModalPopupExtender ID="modalpopup" ClientIDMode="Static" runat="server" CancelControlID="btnCancel"
OkControlID="btnOkay" TargetControlID="Button1" PopupControlID="Panel1" 
        Drag="true" >
</asp:ModalPopupExtender>

Javscript code:

$find('modalpopup').show(); // to show popup
$find('modalpopup').hide(); // to hide popup

Karyolysis answered 12/9, 2013 at 21:9 Comment(0)

IE9 has problem with pagemethods while having pagemethods in bothpage (mainpage,popuppanelpage).

you can use pagemethods in webservice(.asmx) file

i tried like below:

defaultpage.aspx

<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">

      function fnd123(str){
          alert(str);
    }

     function objFailed1(data) {
     fnd123(data);
      }
     function objGot1(data) {

                        fnd123(data.d);

             }
    function Clkd(){
    var ppnl=document.getElementById("if1");
    $.ajax({
             url: "Testser.asmx/GetData",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             data:'{"FileName":"Data from default page"}',
             type: 'POST',
             success:objGot1,
             error: objFailed1
         });
    ppnl.src="Test1.aspx";
     $find('MPE').show();
    }


     function Clkd2(){
    var ppnl=document.getElementById("if1");
     ppnl.src="";
     $find('MPE').hide();
     //PageMethods.clearPageData("/Test1.aspx",fnd1);
    }


    </script>
</head>
<body>
    <form id="form1" runat="server">
      <asp:ToolkitScriptManager runat="server" ID="ToolkitScriptManager1" EnablePageMethods="true" EnablePartialRendering="false"/>
    <div>
    <input type="button" onclick="javascript:Clkd();return false;" value="Click" />

    <div>
        <asp:ModalPopupExtender ID="MPE" PopupControlID="popupPanel" PopupDragHandleControlID="popupPanel"
            runat="server" Enabled="True" TargetControlID="btnOk" CancelControlID="BtnCancel"
            BackgroundCssClass="PopupBackground" Drag="True" EnableViewState=true >
        </asp:ModalPopupExtender>
        <asp:Button Style="display: none" ID="BtnOk" runat="server"></asp:Button>
        <asp:Button Style="display: none" ID="BtnCancel" runat="server"></asp:Button>
    </div>
    <div>
        <asp:Panel ID="popupPanel" runat="server" Style="overflow: hidden; z-index: 100000;
            display: none; background-color: White; filter: alpha(opacity=100); opacity: 1.0;
            height: auto;">
            <asp:Panel ID="pnlLoginHeader" runat="server" CssClass="" Style="display: none;">
                <table width="100%">
                    <tr style="text-align: center">
                        <td style="width: 97%;">
                            <p class="popupTitle">
                                <asp:Label runat="server" ID="lblTitle" Text=""></asp:Label>
                            </p>
                        </td>
                        <td style="width: 3%;">
                            <p style="text-align: right;">
                                <span id="lblPopupClose" style="cursor: pointer; color: White">Close</span>
                            </p>
                        </td>
                    </tr>
                </table>
            </asp:Panel>
            <iframe id="if1" src="" class="" style=""></iframe>
        </asp:Panel>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
            Text="Redirect" />
    </div>

    </div>
    </form>
</body>

Test1.aspx

<head id="Head1" runat="server">
    <title>Untitled Page</title>
        <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <script language="javascript" type="text/javascript">
          function fnd(str){
          alert(str);
    }

     function objFailed1(data) {
     fnd(data);
      }
     function objGot1(data) {

                        fnd(data.d);

             }

     function Clkdwebservice(){
    $.ajax({
             url: "Testser.asmx/GetData",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             data:'{"FileName":"Data from test page"}',
             type: 'POST',
             success:objGot1,
             error: objFailed1
         });
   }

    </script>

</head>
<body>
    <form id="form1" runat="server" enableviewstate="false">
    <asp:ToolkitScriptManager runat="server" ID="ToolkitScriptManager1" EnablePageMethods="true" />
    <div>
        <input type="button" onclick="javascript:Clkdwebservice();return false;" value="Click" />
         <input type="button" onclick="javascript:parent.Clkd2();return false;" value="Close" />
    </div>

    </form>
</body>

Testser.asmx.cs

[WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ScriptService]
    [ToolboxItem(false)]
    public class Testser : System.Web.Services.WebService
    {
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public String GetData(String FileName)
        {
                     string msg = FileName;
            return msg;
        }
    }

its working fine for me.please check it

Circumscribe answered 22/10, 2013 at 14:51 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags