What's New?

Javascript error when setting ext:Window's AutoLoad to aspx page

  1. #1
    Jul 10, 2008, 2:24 PM

    Javascript error when setting ext:Window's AutoLoad to aspx page

    When ext:Window's AutoLoad property is set to an aspx page, IE 7 throws a javascript error when the page loads. If someone has an example of using ext:Window to load up a picker dialog and send the picked item back to the parent, I would really really appreciate it. This seems like a very simple and common scenario but I can not get it to work with ext:window.

    Example:

    Website with two aspx page, Default.aspx and DialogPicker.aspx

    Default.aspx
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Coolitewindow._Default" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ScriptContainer ID="ScriptContainer1" runat="server">

        <script type="text/javascript" language="javascript">
        function setReturnValue(val) {
            var txt = &#100;ocument.getElementById('txtPickedValue');
            txt.value=val;
        }
        </script>

    </ext:ScriptContainer>
    <ext:ScriptManager ID="ScriptManager1" runat="server">
    </ext:ScriptManager>
    
        <asp:Button ID="btnPicker" runat="server" Text="Pick Something" />
        <ext:TextField ID="txtPickedValue" runat="server">
        </ext:TextField>
        <ext:Window ID="winPicker" runat="server" Icon="DatabaseConnect" Title="Picker" Show&#111;nload="false"
            AnimateTarget="btnPicker" TriggerElement="btnPicker" Modal="true" CloseAction="Hide"
            Height="300px" Width="100px" AutoShow="false" AutoLoad="DialogPicker.aspx">
        </ext:Window>
    

    </form>
</body>
</html>
    DialogPicker.aspx
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="DialogPicker.aspx.vb"
    Inherits="Coolitewindow.DialogPicker" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ScriptContainer ID="ScriptContainer1" runat="server">

        <script type="text/javascript" language="javascript">
        function returnValue() {
            var parent = window.opener
            parent.setReturnValue('Something was picked.');
            self.close();
        }
        </script>

    </ext:ScriptContainer>
    <ext:ScriptManager ID="ScriptManager1" runat="server">
    </ext:ScriptManager>
    
        <ext:Button ID="btnReturnValue" runat="server" Text="Return something">
            <listeners>
                <Click Handler="returnValue();" />
            </listeners>
        </ext:Button>
    

    </form>
</body>
</html>
  2. #2
    Jul 10, 2008, 2:36 PM

    RE: Javascript error when setting ext:Window's AutoLoad to aspx page

    Another question. Why does ext:Window load the url specified when the page loads? Shouldn't it load the url when it is shown? Is it possible to dynamically set that AutoLoad property? For example, I want to dynamically set the query string parameter for that url before the window is shown.
  3. #3
    Jul 10, 2008, 8:33 PM

    RE: Javascript error when setting ext:Window's AutoLoad to aspx page


    This is how I use to set AutoLoad from CodeBehind.


    Default.aspx.cs (following your sample file name - ID &amp; sid are just for example)

        protected void Page_Load(object sender, EventArgs e)
    {
         string sid = Request.QueryString["sid"];
         string ID = Request.QueryString["ID"];
         winPicker.AutoLoad =  "DialogPicker.aspx?ID=" + ID + "&amp;sid=" + sid;
    }
  4. #4
    Jul 11, 2008, 10:41 AM

    RE: Javascript error when setting ext:Window's AutoLoad to aspx page

    Hi jchau,

    I'll investigate what's wrong in AutoLoad and then inform you. For now I can suggest next solution for picker functionality:

    PickerExample.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PickerExample.aspx.cs" Inherits="Coolite.Sandbox.Temp.Pickup.PickerExample" %>
<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>
<%@ Register src="PickupDialogControl.ascx" tagname="PickupDialogControl" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>The Picker</title>
</head>
<body>
    <form id="form1" runat="server">
    
    <script type="text/javascript">
        function setTextField(value){
            <%= TextField1.ClientID %>.setValue(value);
        }
    </script>
    
    <ext:ScriptManager ID="ScriptManager1" runat="server" />
    <br />
    <table>
        <tr>
            <td>
                <ext:TextField ID="TextField1" ReadOnly="true" runat="server" />
            </td>
            <td>
                <ext:Button ID="Button1" runat="server" Text="Pick value" AutoPostBack="false">
                    <Listeners>
                        <Click Handler="PickerDemo.pickValue({TextField1}.getValue(), setTextField);" />
                    </Listeners>
                </ext:Button>
            </td>
        </tr>
    </table>
    <uc1:PickupDialogControl ID="PickupDialogControl1" runat="server" />
    </form>
</body>
</html>
    PickupDialogControl.ascx
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PickupDialogControl.ascx.cs" Inherits="Coolite.Sandbox.Temp.Pickup.PickupDialogControl" %>
<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>

<script type="text/javascript">
    Ext.namespace('PickerDemo');
    
    PickerDemo.callback = Ext.emptyFn;
    
    PickerDemo.pickValue = function(selectedValue, callback){
        var picker = <%= WindowPicker.ClientID %>;
        
        if(selectedValue &amp;&amp; selectedValue != null){
            PickerDemo.setValue(selectedValue);
        }
        if(PickerDemo.callback &amp;&amp; PickerDemo.callback != null){
            PickerDemo.callback = callback;
        }
        else{
            PickerDemo.callback = Ext.emptyFn;
        }
        
        picker.show(null);
    };
    
    PickerDemo.returnValue = function(){
        var picker = <%= WindowPicker.ClientID %>;
        PickerDemo.callback(PickerDemo.getValue());
        picker.hide(null);
    };
    
    PickerDemo.cancel = function(){
        var picker = <%= WindowPicker.ClientID %>;
        picker.hide(null);
    };
    
    PickerDemo.getValue = function(){
        var radioButtons = &#100;ocument.getElementsByName("<%= RadioButtonList1.UniqueID %>");
        
        for (var i = 0; i < radioButtons.length; i++) {
          if (radioButtons[i].checked) {
            return radioButtons[i].value;
          }
        }        
        return '';
    };
    
    PickerDemo.setValue = function(value){
        var radioButtons = &#100;ocument.getElementsByName("<%= RadioButtonList1.UniqueID %>");
        
        for (var i = 0; i < radioButtons.length; i++) {
          if (radioButtons[i].value == value) {
            radioButtons[i].checked = true;
            return;
          }
        }       
        radioButtons[0].checked = true;         
    }
</script>

<ext:Window 
    ID="WindowPicker" runat="server"
    Icon="DatabaseConnect"
    Title="Picker"
    Show&#111;nload="false"
    Modal="true"
    Height="180">
    <Content>
        <asp:RadioButtonList ID="RadioButtonList1" runat="server">
            <asp:ListItem Value="Option 1" Text="Option 1" Selected="True"></asp:ListItem>
            <asp:ListItem Value="Option 2" Text="Option 2"></asp:ListItem>
            <asp:ListItem Value="Option 3" Text="Option 3"></asp:ListItem>
            <asp:ListItem Value="Option 4" Text="Option 4"></asp:ListItem>
            <asp:ListItem Value="Option 5" Text="Option 5"></asp:ListItem>
        </asp:RadioButtonList>
    </Content>
    <Buttons>
        <ext:Button ID="btnOkPicker" runat="server" Text="OK" AutoPostBack="false">
            <Listeners>
                <Click Handler="PickerDemo.returnValue();" />
            </Listeners>
        </ext:Button>
        <ext:Button ID="btnCancelPicker" runat="server" Text="Cancel" AutoPostBack="false">
            <Listeners>
                <Click Handler="PickerDemo.cancel();" />
            </Listeners>
        </ext:Button>
    </Buttons>
</ext:Window>
    Let me know if this example is not what you wish.

    Best regards,
    Vladimir

Similar Threads

  1. [CLOSED] Calling the javascript function in aspx page within ext:Panel after loading
    By supera in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Oct 23, 2012, 2:19 PM
  2. How to use ext:Window to open new aspx page?
    By jchau in forum 1.x Help
    Replies: 8
    Last Post: Oct 22, 2012, 1:55 PM
  3. [CLOSED] Tip about include javascript files in aspx page and Aspx page loading time
    By supera in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Jul 31, 2012, 8:31 PM
  4. [CLOSED] Window inside an aspx page that is loaded in a TAB
    By Hari_CSC in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 06, 2010, 8:34 AM
  5. Window autoload an aspx page
    By gastonregistra in forum 1.x Help
    Replies: 2
    Last Post: Apr 24, 2008, 1:48 PM

Posting Permissions