This is a migrated thread and some comments may be shown as answers.

[Solved] htmlbutton ajax request

7 Answers 145 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
it-workz
Top achievements
Rank 1
it-workz asked on 27 Mar 2009, 09:37 AM

Hi,

My problem is as follows. I'm trying load dynamicaly load buttons in my page. I then want them to update a label (as a test). For the buttons I wish to use htmlbutton as I can change their content more easily. unfortunately when I try click those button nothing happens to the label although it's event is fired on the server. (break point is vs proves that). When I disable ajax. the label is updated. When I change to ordinary buttons. Everything works as expected, an ajax request is fired and the label is updated.

Why doen't the label update after pushing the htmlbutton?

            magischerSqlConnection.Open();  
            SqlCommand command = new SqlCommand("exec getTaskPaneItemAccess @userId", magischerSqlConnection);  
            command.Parameters.Add(new SqlParameter("userId", userId));  
            SqlDataReader reader = command.ExecuteReader();  
 
            while(reader.Read())  
            {  
                  
    /*           
                HtmlButton hb = new HtmlButton();
                hb.ServerClick += new EventHandler(hb_ServerClick);
                hb.InnerHtml = "<div style=\"width:180px;height:30px;\" ><img align=\"left\" src='/LoadImage.ashx?id=" + reader["taskPaneItemImage"].ToString() + "' /> " + reader["taskPaneItemName"].ToString() + "</div>";
                this.FindControl("rpv_" + reader["taskPaneName"].ToString()).Controls.Add(hb);
      */            
/*
                                Button hb = new Button();
                hb.Text = reader["taskPaneItemName"].ToString();
                hb.Click += new EventHandler(hb_Click);
                this.FindControl("rpv_" + reader["taskPaneName"].ToString()).Controls.Add(hb);
  */                
                RadAjaxManager1.AjaxSettings.AddAjaxSetting(hb, Label1);  
 
            }  
            magischerSqlConnection.Close();  
            BottomLeftPane.Scrolling = SplitterPaneScrolling.None;  
            BottomLeftPane.Height = numberOfTaskPanes * 36;  
        }  
 
        void hb_Click(object sender, EventArgs e)  
        {  
            Button hb = (Button)sender;  
            Label1.Text = hb.ClientID;  
        }  
 
        void hb_ServerClick(object sender, EventArgs e)  
        {  
            HtmlButton hb = (HtmlButton)sender;  
            Label1.Text = hb.ClientID;  
 
        }  
 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Magischer._Default" %> 
 
<%@ Register assembly="Telerik.Web.UI, Version=2008.3.1105.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
 
<!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> 
    <link href="controls.css" rel="stylesheet" type="text/css" /> 
      
    <script type="text/javascript">  
    //<!--  
    function OnClientItemClicking(sender, eventArgs)  
    {  
        var multipage = $find("MainTaskPages");  
        multipage.set_selectedIndex(eventArgs.get_item().get_index());  
    }  
    //--> 
    </script> 
 
</head> 
<body> 
    <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">  
        </telerik:RadScriptManager> 
        
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
        </telerik:RadAjaxManager> 
        
        <telerik:RadAjaxPanel ID="MainFilterPanel" runat="server" height="55px" width="695px">  
            <telerik:RadComboBox ID="RadComboBox1" Runat="server" CssClass="floatLeft">  
            </telerik:RadComboBox> 
            <telerik:RadComboBox ID="RadComboBox3" Runat="server" CssClass="floatLeft">  
            </telerik:RadComboBox> 
            <telerik:RadComboBox ID="RadComboBox2" Runat="server" CssClass="floatLeft">  
            </telerik:RadComboBox> 
        </telerik:RadAjaxPanel> 
          
        <telerik:RadSplitter ID="MainSplitter" runat="server">  
            <telerik:RadPane ID="MainContentPane" runat="server" scrolling="none">  
                <telerik:RadSplitter ID="RadSplitter1" runat="server" BorderStyle="None" PanesBorderSize="0">  
                    <telerik:RadPane ID="TaskPane" runat="server" Width="198px" MinWidth="198" MaxWidth="600" Scrolling="None">  
                        <telerik:RadSplitter ID="RadSplitter2" runat="server" BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal" > 
                            <telerik:RadPane ID="TopLeftPane" runat="server">  
                                <telerik:RadMultiPage ID="MainTaskPages" runat="server" SelectedIndex="0"   
                                    Height="100%" Width="100%" BackColor="White" BorderColor="#6593cf"   
                                    BorderStyle="Solid" BorderWidth="0px"></telerik:RadMultiPage> 
                            </telerik:RadPane> 
                            <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Backward" EnableResize="False" /> 
                            <telerik:RadPane ID="BottomLeftPane" runat="server" Height="120px">  
                                <telerik:RadPanelBar ID="MainTaskPaneBar" Runat="server"   
                                    ExpandMode="SingleExpandedItem" Skin="Office2007"   
                                    OnClientItemClicking="OnClientItemClicking" Width="100%" Height="100%">  
                                    <CollapseAnimation Type="None" Duration="100"></CollapseAnimation> 
                                    <ExpandAnimation Type="None" Duration="100"></ExpandAnimation> 
                                </telerik:RadPanelBar> 
                            </telerik:RadPane> 
                        </telerik:RadSplitter> 
                    </telerik:RadPane> 
                    <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" EnableResize="False" /> 
                    <telerik:RadPane ID="RightPane" runat="server">  
                        <asp:Panel ID="Panel1" runat="server" Height="81px" Width="156px">  
                            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 
                        </asp:Panel> 
                    </telerik:RadPane> 
                </telerik:RadSplitter> 
            </telerik:RadPane> 
        </telerik:RadSplitter> 
    </form> 
</body> 
</html> 
 

7 Answers, 1 is accepted

Sort by
0
Pavel
Telerik team
answered on 31 Mar 2009, 07:33 AM
Hello Bob,

Following your logic I have prepared a simple sample which works as expected on my end. Please try it and let me know what is different in your case.

Greetings,
Pavel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
it-workz
Top achievements
Rank 1
answered on 31 Mar 2009, 01:57 PM
Maybe I'm just confused but I think you missed the the precise point of my question. Your demo demonstrates ajax in using a asp button control to update a label. I already stated this works fine. the trouble I'm having arises when using an htmlbutton control.

In the zip file you attached there is an file named ajax.php. I will insert it's code behind here:
 
public partial class Ajax : System.Web.UI.Page  
{  
    protected void Page_Load(object sender, EventArgs e)  
    {  
        // this one does not work  
/*      HtmlButton hb = new HtmlButton();
        hb.ID = "hb";
        Panel1.Controls.Add(hb);
        hb.ServerClick += new EventHandler(hb_ServerClick);
  */        
              
        // this one works  
        Button hb = new Button();  
        hb.ID = "hb";  
        Panel1.Controls.Add(hb);  
        hb.Click += new EventHandler(hb_Click);  
          
           
         
        RadAjaxManager1.AjaxSettings.AddAjaxSetting(hb,Label1);    
    }  
 
    void hb_Click(object sender, EventArgs e)    
    {    
        Button hb = (Button)sender;    
        Label1.Text = hb.ClientID;    
    }    
 
    void hb_ServerClick(object sender, EventArgs e)    
    {    
        HtmlButton hb = (HtmlButton)sender;    
        Label1.Text = hb.ClientID + " " + DateTime.Now;    
 
    }    
}  
 


You'll notice that I have two sets of statements here for a button "hb". One "Button" and one "HTMLButton" both have an event connected and both work when ajax is disabled. When ajax is enabled only the "Button" control updates the label, the "HTMLButton" does not. I verified this in your page named ajax. I have modified it's code behind to illustrate this better.
public partial class Ajax : System.Web.UI.Page  
{  
    protected void Page_Load(object sender, EventArgs e)  
    {  
        //RadAjaxManager1.EnableAJAX = false;  
 
        // this one does not work  
        HtmlButton hb = new HtmlButton();  
        hb.InnerHtml = "HTMLButton";  
        hb.ID = "hb";  
        Panel1.Controls.Add(hb);  
        hb.ServerClick += new EventHandler(hb_ServerClick);  
        
              
        // this one works  
        Button b = new Button();  
        b.Text = "Button";  
        hb.ID = "b";  
        Panel1.Controls.Add(b);  
        b.Click += new EventHandler(b_Click);  
          
           
        RadAjaxManager1.AjaxSettings.AddAjaxSetting(b,Label1);     
        RadAjaxManager1.AjaxSettings.AddAjaxSetting(hb,Label1);    
    }  
 
    void b_Click(object sender, EventArgs e)    
    {    
        Button hb = (Button)sender;    
        Label1.Text = hb.ClientID;    
    }    
 
    void hb_ServerClick(object sender, EventArgs e)    
    {    
        HtmlButton hb = (HtmlButton)sender;    
        Label1.Text = hb.ClientID + " " + DateTime.Now;    
 
    }    
}  
 
if you uncomment line 5 both buttons work. If you comment both lines only the Button b works. In you example they are both added to a panel in my own code they are not, but the effect is the same.

small edit: Although pushing htmlbutton hb does not update the label, an breakpoint in visual studio proves the event is processed.

Hope this makes things clearer.



0
Pavel
Telerik team
answered on 01 Apr 2009, 07:12 AM
Hello Bob,

I just checked the sample attached previously and the code in it is the following:
protected void Page_Load(object sender, EventArgs e) 
    { 
        HtmlButton hb = new HtmlButton(); 
        hb.ID = "hb"
        Panel1.Controls.Add(hb); 
        hb.ServerClick += new EventHandler(hb_ServerClick); 
         
             
/*
                        Button hb = new Button();
        hb.Text = reader["taskPaneItemName"].ToString();
        hb.Click += new EventHandler(hb_Click);
        this.FindControl("rpv_" + reader["taskPaneName"].ToString()).Controls.Add(hb);
*/          
        
        RadAjaxManager1.AjaxSettings.AddAjaxSetting(hb,Label1);   
    } 
 
    void hb_Click(object sender, EventArgs e)   
    {   
        Button hb = (Button)sender;   
        Label1.Text = hb.ClientID;   
    }   
 
    void hb_ServerClick(object sender, EventArgs e)   
    {   
        HtmlButton hb = (HtmlButton)sender;   
        Label1.Text = hb.ClientID + " " + DateTime.Now;   
 
    }  

Thus you can see that it illustrates the scenario with the HtmlButton. For further illustration that it works on my end I am attaching a video demonstrating this using the code suggested by you in your last post. Take a look at it and let me know if I am missing something.

All the best,
Pavel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
it-workz
Top achievements
Rank 1
answered on 01 Apr 2009, 11:44 AM
Ok, i'm realy confused now. I actualy retried everything. Tried it dozens of times and noticed the following weird behaviour. It still doesn't work for me most of the time, but sometime when I use F5 to start the project I get a trail message at the top of my page. when I have that telerik trail message everything works as in your video. I'm guessing that your demo includes a demo web.ui dll, but it doesn't get used or is replaced before running most of the time or something. I do not know how to force it to use a demo dll or the one from your demo project. (as opposed to the one in the gac and such). I'm rather at a loss now, must be some weird reference issue on my side. Hope you have any pointers. Just to clarify I'm using .net 3.5 visual studio 2008 and the current 2009 q1 build.

I gues I'm downloading one of the nightly builds now.
0
Pavel
Telerik team
answered on 01 Apr 2009, 12:12 PM
Hi Bob,

To ensure you are using a specific .dll, you should first remove the one from the GAC (simply delete it or right-click on it and select 'uninstall'). Then to ensure that the website will use the version you require delete all .dll files from its bin folder (including dll.referesh files) and copy the version you want to use in it.

Also, the version included in the sample is indeed a trial one of the latest official release 2009 Q1 311. You can try to download that version if you are not already using it. Refer to the following article for further details on how to upgrade.

I hope this helps.

Best wishes,
Pavel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
it-workz
Top achievements
Rank 1
answered on 01 Apr 2009, 02:53 PM
I have found the difference. I did a clean install on a new windows xp machine and your example worked perfectly there. The difference with my main machine is that it is running internet explorer 7. when I switch ie8 back to ie7 standard or quircks mode on my main machine it works there to

As a side note  won't work on either machine in firefox 3.0.8.

Can you reproduce this and maybe offer an explenation?


-- edited for clariity
0
Pavel
Telerik team
answered on 02 Apr 2009, 03:09 PM
Hi Bob,

Indeed you are right and it does not work with FireFox or IE8. I have consulted with our developers and it seems this is an unsupported scenario. You can workaround it by adding a setting to update the container in which the Label is located:
RadAjaxManager1.AjaxSettings.AddAjaxSetting(hb, Panel1); 

I hope this suggestion is acceptable for you.

Best wishes,
Pavel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
Tags
Ajax
Asked by
it-workz
Top achievements
Rank 1
Answers by
Pavel
Telerik team
it-workz
Top achievements
Rank 1
Share this question
or