Javascript error when setting ext:Window's AutoLoad to aspx page
*NEW - Coolite Toolkit Version 0.6.0 now available for download or view examples.
 

Coolite Forums

 Welcome Guest ( Login | Register )
 
Javascript error when setting ext:Window's...
Subscribe
Last Login: Today @ 1:40:24 PM
Posts: 157,
Posted 7/10/2008 10:24:18 AM

Group: Coolite Premium Member & Early Adopter
 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 = document.getElementById('txtPickedValue');
            txt.value=val;
        }
        </script>

    </ext:ScriptContainer>
    <ext:ScriptManager ID="ScriptManager1" runat="server">
    </ext:ScriptManager>
    <div>
        <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" Showonload="false"
            AnimateTarget="btnPicker" TriggerElement="btnPicker" Modal="true" CloseAction="Hide"
            Height="300px" Width="100px" AutoShow="false" AutoLoad="DialogPicker.aspx">
        </ext:Window>
    </div>
    </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>
    <div>
        <ext:Button ID="btnReturnValue" runat="server" Text="Return something">
            <listeners>
                <Click Handler="returnValue();" />
            </listeners>
        </ext:Button>
    </div>
    </form>
</body>
</html>

Permalink: Post #891
Last Login: Today @ 1:40:24 PM
Posts: 157,
Posted 7/10/2008 10:36:02 AM

Group: Coolite Premium Member & Early Adopter
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.

Permalink: Post #892
Last Login: 2 days ago @ 10:18:49 AM
Posts: 4,
Posted 7/10/2008 4:33:58 PM

Group: Coolite Early Adopter

This is how I use to set AutoLoad from CodeBehind.


Default.aspx.cs (following your sample file name - ID & 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 + "&sid=" + sid;
    }

Permalink: Post #893
Last Login: Today @ 1:16:22 PM
Posts: 387,
Posted 7/11/2008 6:41:36 AM

Group: Core Development Team
 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 && selectedValue != null){
            PickerDemo.setValue(selectedValue);
        }
        if(PickerDemo.callback && 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 = document.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 = document.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"
    Showonload="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
 Vladimir Shcheglov,
Coolite Inc.
Core Developer

Permalink: Post #900
« Prev Topic | Next Topic »
Reading This Topic
Active Users: 0 ( 0 guests, 0 members, 0 anonymous members )
No members currently viewing this topic.
All times are GMT -8:00, Time now is 2:05pm
 

Copyright © 2006-2008, Coolite Inc. All rights reserved.