[RESOLVED]How to control parent controls from child user control using Javascript

Jquery, Post, Web Forms, ,

Hi All,

I have some controls on an .aspx file as follows:

<%@ Page Language="VB" Explicit="false" AspCompat="true" ValidateRequest="false" Inherits="User" CodeFile="~/Office/User.aspx.vb" %>

<%@ Register Src="~/Layout_Grid.ascx" TagName="Layout_Grid" TagPrefix="uc" %>

<%@ Import Namespace="OA.Web.Compression" %>
<%= DocumentTypeDeclaration.Current %>
 .......
</head>
<body>
    <form id="form1" runat="server">
    <input type="hidden" id="hdnLoadGrid" runat="server" />
    <uc:Layout_Grid ID="ucGrid" runat="server" />
.......

From inside that user control called Layout_Grid.ascx I am attempting to set the parent page hidden field value and submit the parent form using JavaScript:

    function UpdateDisplayOrderCallback(txt) {
        var ParentForm =  $("#<%= form1.ClientID%>");
        var HiddenLoadGrid =  $("#<%= hdnLoadGrid.ClientID%>");
        HiddenLoadGrid.val('true');
        ParentForm.submit();
//        $("#<%= hdnLoadGrid.ClientID%>").val("true");
//        form1.submit();
    }

But, it isn’t working, my error: Compiler Error Message: BC30451: ‘form1′ is not declared. It may be inaccessible due to its protection level.

What am I doing wrong?

Please advise, thank you.

John

Hi John,

Thanks for your post.

According to your code, I create a demo to test it and the code works fine on my side, so I don’t think there are something wrong with your code. Then I will show you the code I have tested on my side and some analysis.

<head runat="server">
    <title></title>
    <script src="../../Scripts/jquery-1.8.2.js"></script>
    <script>
        function UpdateDisplayOrderCallback() {
            var ParentForm = $("#<%= form1.ClientID%>");
            var HiddenLoadGrid = $("#<%= hdnLoadGrid.ClientID%>");
            HiddenLoadGrid.val('true');
            var str = $("#<%= hdnLoadGrid.ClientID%>").val();
            //alert(str);
            //submit form1
            ParentForm.submit();
            <%--$("#<%= hdnLoadGrid.ClientID%>").val("true");
            form1.submit();--%>

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="hidden" id="hdnLoadGrid" runat="server" />
            <%--<uc:layout_grid id="ucGrid" runat="server" />--%>
            <input id="btnsubmit" type="button" value="submit" onclick="UpdateDisplayOrderCallback();" />
        </div>
    </form>
</body>

Firstly, we could find hidden field by id then set value of it via .val() as below.

var HiddenLoadGrid = $("#<%= hdnLoadGrid.ClientID%>"); 
HiddenLoadGrid.val('true');

Secondly, we could submit the form via submit() method as below, and the submit() method is supported in all major browsers.

var ParentForm = $("#<%= form1.ClientID%>");
//submit form1
ParentForm.submit();

Besides, in my opinion, if you have commented out the below code, you will not get the error.

Tualatin

//        $("#<%= hdnLoadGrid.ClientID%>").val("true");
//        form1.submit();

Hope it will be helpful to you.

Best Regards,

Fei Han

 

Hi,

Tualatin

From inside that user control called Layout_Grid.ascx I am attempting to set the parent page hidden field value and submit the parent form

Don’t call the parent controls from userControl, they are not accessible.

instead, u can directly use the hardcoded ids to call them:

var ParentForm =  $("#form1");
var HiddenLoadGrid =  $("#hdnLoadGrid");

Leave a Reply