PDA

View Full Version : Button and OnClientClick?



Timothy
Jun 10, 2008, 5:19 PM
Anyway to achieve an OnClientClick with a Coolite button? Would be useful for doing confirmation based things in JavaScript before sending to the server.

Any advice would be greatly appreciated!

Sincerely,
Timothy

geoffrey.mcgill
Jun 10, 2008, 7:08 PM
I put together a sample of a dozen different ways to add a Click Listener (event) to the <ext:Button>. The same techniques apply to all Listeners for all Coolite/Ext controls.

http://sandbox.ext.net/Form/Button/ClickListener.aspx

While building the sample above I found a bug in Listener.cs class. The sample may/will not work if you are trying to run the code using version 0.5.1 (or earlier). If you're building from source the bug is an easy fix to the Regex pattern in the .IsIDToken Method within Listern.cs (approx line 288).

Old


internal bool IsIDToken(string value)
{
return (new Regex(@"({)([\w}]+)(})").Matches(value).Count == 1);
}

New


internal bool IsIDToken(string value)
{
return (new Regex(@"^({)([\w}]+)(})").Matches(value).Count == 1);
}

The only difference is the added caret "^" at the start of the Regex Pattern.

Hope this helps.

geoffrey.mcgill
Jun 10, 2008, 7:13 PM
I should have posted that probably the easiest way to add a Click Listener is just inline.

Example


<ext:Button ID="Button1" runat="server" Text="Click Me #1" AutoPostBack="false">
<Listeners>
<Click Handler="Ext.Msg.alert('Confirm', 'You Clicked Button1');" />
</Listeners>
</ext:Button>

Hope this helps.

Timothy
Jun 10, 2008, 8:36 PM
Great, I didn't realize about the Listeners, I guess that's what makes this forum so useful ;)

Sincerely,
Timothy

Timothy
Jun 12, 2008, 6:57 PM
What about using a Button Listener 'Click' event to cancel a post back event?

For instance something like:



<asp:Button runat="server" Text="Delete" OnClientClick="return confirm('Are you sure you want to delete this?');" />


Cheers,
Timothy

jumbot
Jun 15, 2008, 12:16 AM
For Example


<ext:Button ID="Button1" runat="server" Text="Delete" AutoPostBack="false">
<Listeners>
<Click Handler="Ext.Msg.confirm('Confirm', 'Are you sure you want to delete this?',function(btn){if(btn=='yes')window.location .href='Delete.aspx';});" />
</Listeners>
</ext:Button>

geoffrey.mcgill
Jun 15, 2008, 4:20 AM
Hi Timothy,

As noted by jumbot earlier (thanks jumbot!), you would add the JavaScript confirmation to the <Click> Listener.

All the controls in the Coolite Toolkit incorporate a series of Listeners which "listen" for various JavaScript events to fire on the client.

To reproduce the exact same functionality in <ext:Button> as <asp:Button> you would add the confirm script to the Handler of the <Click> Listener.

Example


<ext:Button ID="Button1" Handler="" runat="server" &#111;nclick="Button1_Click" Text="Submit">
<Listeners>
<Click Handler="return confirm('Are you sure you want to delete this?');" />
</Listeners>
</ext:Button>

You can add the Listener several different ways and I outlined above. The following forum post also discusses the similar OnClientClick topic, see http://forums.ext.net/showthread.php?postid=587.aspx

I think I might add an OnClientClick property to <ext:Button> just to avoid any future inconvenience. Although, under the covers it would still just add a Click Listener.

Hope this helps.

geoffrey.mcgill
Jun 15, 2008, 4:46 AM
Ok, I added the OnClientClick property to <ext:Button>.

Example


<ext:Button
runat="server"
Text="Submit"
&#111;nclick="Button1_Click"
OnClientClick="return confirm('Are you sure you want to delete this?');"
/>

This new feature has been checked into SVN and will be available with the next release (v0.5.2).

Hope this helps.

jumbot
Jun 15, 2008, 6:07 AM
Can Use a 'LinkButton' when you want to submit after confirm!


<ext:ScriptManager ID="ScriptManager1" runat="server">
</ext:ScriptManager>
<ext:Button ID="Button1" Handler="" runat="server" Text="Test" AutoPostBack="false">
<Listeners>
<Click Handler="Ext.Msg.confirm('confirm', 'Are you sure you want to input OK?',function(btn){if(btn=='yes')LinkButton1.click ();})" />
</Listeners>
</ext:Button>
<asp:LinkButton ID="LinkButton1" runat="server" &#111;nclick="LinkButton1_Click"></asp:LinkButton>
<ext:TextField ID="TextField1" runat="server"></ext:TextField>

Timothy
Jun 15, 2008, 11:09 AM
geoffrey.mcgill (6/14/2008)Ok, I added the OnClientClick property to <ext:Button>.

Example


<ext:Button
runat="server"
Text="Submit"
&#111;nclick="Button1_Click"
OnClientClick="return confirm('Are you sure you want to delete this?');"
/>

This new feature has been checked into SVN and will be available with the next release (v0.5.2).

Hope this helps.


I guess there is no way to the the Ext.Msg namespace to wait for the users response before continuing the post back?

Cheers,
Timothy

jchau
Jun 30, 2008, 11:28 AM
Timothy (6/15/2008)

I guess there is no way to the the Ext.Msg namespace to wait for the users response before continuing the post back?

Cheers,
Timothy


Any tips on this? I guess one way of doing it is to disable autopostback on the button but manually doing a postback in the callback function sent to Ext.Msg.