PDA

View Full Version : [CLOSED] Update a non coolite control with ajax.



fquintero
Nov 26, 2008, 4:36 PM
Hi guys,


I have a question, Is possible update a non coolite control in an ajax request?. Example, an asp:image or other 3rd party controls?.

Thanks

Timothy
Nov 26, 2008, 5:55 PM
The Coolite AjaxEvents only update controls of the Coolite library because it only sends back javascript.

Microsoft ASP.NET Controls are not included in the AjaxEvents.

Cheers,
Timothy

fquintero
Nov 26, 2008, 6:26 PM
Timothy (11/26/2008)The Coolite AjaxEvents only update controls of the Coolite library because it only sends back javascript.

Microsoft ASP.NET Controls are not included in the AjaxEvents.

Cheers,
Timothy


Thanks for your reply,

I need update an image dinamically, is possible if I put an html img into a ext:panel? Is possible if I put an asp control into a ext:panel?

Thanks!!

Timothy
Nov 26, 2008, 8:05 PM
You could use something like:

Untested:


protected void btnSubmit_Click(object sender, AjaxEventArgs e)
{
ScriptManager1.AddScript(String.Format(@"{0}.src = '{1}';", MyImage1.ClientID, "http://www.google.ca/intl/en_ca/images/logo.gif"));
}


Cheers,
Timothy

fquintero
Nov 26, 2008, 9:18 PM
Timothy (11/26/2008)You could use something like:

Untested:


protected void btnSubmit_Click(object sender, AjaxEventArgs e)
{
ScriptManager1.AddScript(String.Format(@"{0}.src = '{1}';", MyImage1.ClientID, "http://www.google.ca/intl/en_ca/images/logo.gif"));
}


Cheers,
Timothy



Thanks Timothy, it's look good.

geoffrey.mcgill
Nov 26, 2008, 9:38 PM
Hi fquintero,

As noted by Timothy, the AjaxEvents will only return JavaScript, which is then executed in the browser (client) upon a successful response.

Any html element (i.e. image) on the client can be updated via JavaScript.

The following code sample demonstrates two different ways of making an Ajax request back to the server and then updates an image.

The first <ext:Button> uses an AjaxEvent, which when clicked triggers the "Button1_Click" event handler on the server. In the event handler we build up a small snippit of JavaScript to update the Image, then retun back to the client by adding to the ScriptManager.

The second <ext:Button> uses an AjaxMethod (only available in v0.7). By adding the [AjaxMethod] Attribute to your code-behind (server-side) Method, you now enable that Method to be called from client-side JavaScript. The GetUrl() Method returns a string and that string/url is then used to update Image2.

Example


<script runat="server">
protected void Button1_Click(object sender, AjaxEventArgs e)
{
string imageID = this.Image1.ClientID;
string url = "logo.gif";

this.ScriptManager1.AddScript(string.Concat("Ext.get('", imageID, "').set({src: '", url, "'});"));
}

[AjaxMethod]
public static string GetUrl()
{
return "logo.gif";
}
</script>

<asp:Image ID="Image1" runat="server" />

<ext:Button ID="Button1" runat="server" Text="Submit (AjaxEvent)">
<AjaxEvents>
<Click OnEvent="Button1_Click" />
</AjaxEvents>
</ext:Button>

<asp:Image ID="Image2" runat="server" />

<ext:Button ID="Button2" runat="server" Text="Submit (AjaxMethod)">
<Listeners>
<Click Handler="Coolite.Ext.AjaxMethods.GetUrl({
success: function(result) {
Ext.get('Image2').set({src: result});
}});" />
</Listeners>
</ext:Button>

More information regarding AjaxEvents and AjaxMethods are available in the Examples Explorer (http://examples2.ext.net/).

http://examples1.ext.net/#/AjaxEvents/Basic/Overview/

http://examples1.ext.net/#/AjaxMethods/Basic/Overview/

If the 3rd party control has a client-side JavaScript API, then updating the control should not be a problem. If the control can only be updated server-side, then another option might be using an <asp:UpdatePanel>.

Hope this helps.

fquintero
Nov 26, 2008, 10:04 PM
geoffrey.mcgill (11/26/2008)Hi fquintero,

As noted by Timothy, the AjaxEvents will only return JavaScript, which is then executed in the browser (client) upon a successful response.

Any html element (i.e. image) on the client can be updated via JavaScript.

The following code sample demonstrates two different ways of making an Ajax request back to the server and then updates an image.

The first <ext:Button> uses an AjaxEvent, which when clicked triggers the "Button1_Click" event handler on the server. In the event handler we build up a small snippit of JavaScript to update the Image, then retun back to the client by adding to the ScriptManager.

The second <ext:Button> uses an AjaxMethod (only available in v0.7). By adding the [AjaxMethod] Attribute to your code-behind (server-side) Method, you now enable that Method to be called from client-side JavaScript. The GetUrl() Method returns a string and that string/url is then used to update Image2.

Example


<script runat="server">
protected void Button1_Click(object sender, AjaxEventArgs e)
{
string imageID = this.Image1.ClientID;
string url = "logo.gif";

this.ScriptManager1.AddScript(string.Concat("Ext.get('", imageID, "').set({src: '", url, "'});"));
}

[AjaxMethod]
public static string GetUrl()
{
return "logo.gif";
}
</script>

<asp:Image ID="Image1" runat="server" />

<ext:Button ID="Button1" runat="server" Text="Submit (AjaxEvent)">
<AjaxEvents>
<Click OnEvent="Button1_Click" />
</AjaxEvents>
</ext:Button>

<asp:Image ID="Image2" runat="server" />

<ext:Button ID="Button2" runat="server" Text="Submit (AjaxMethod)">
<Listeners>
<Click Handler="Coolite.Ext.AjaxMethods.GetUrl({
success: function(result) {
Ext.get('Image2').set({src: result});
}});" />
</Listeners>
</ext:Button>

More information regarding AjaxEvents and AjaxMethods are available in the Examples Explorer (http://examples2.ext.net/).

http://examples1.ext.net/#/AjaxEvents/Basic/Overview/

http://examples1.ext.net/#/AjaxMethods/Basic/Overview/

If the 3rd party control has a client-side JavaScript API, then updating the control should not be a problem. If the control can only be updated server-side, then another option might be using an <asp:UpdatePanel>.

Hope this helps.


Thanks Geoffrey, I will try that methods, but I have a question, How I can download the 0.7.0 version?. What I need to change in my code to update to 0.7.0 version?.

Thanks!!!

geoffrey.mcgill
Nov 26, 2008, 10:45 PM
Hi fquintero,

Version 0.7 has not been publicly released. At this point it is only available to Professional License holders.


Regarding the code sample I posted, the AjaxEvents code will work with v0.6, the AjaxMethod code will require v0.7. I should have clarified that in the original post.

fquintero
Dec 01, 2008, 12:57 PM
geoffrey.mcgill (11/26/2008)Hi fquintero,

As noted by Timothy, the AjaxEvents will only return JavaScript, which is then executed in the browser (client) upon a successful response.

Any html element (i.e. image) on the client can be updated via JavaScript.

The following code sample demonstrates two different ways of making an Ajax request back to the server and then updates an image.

The first <ext:Button> uses an AjaxEvent, which when clicked triggers the "Button1_Click" event handler on the server. In the event handler we build up a small snippit of JavaScript to update the Image, then retun back to the client by adding to the ScriptManager.

The second <ext:Button> uses an AjaxMethod (only available in v0.7). By adding the [AjaxMethod] Attribute to your code-behind (server-side) Method, you now enable that Method to be called from client-side JavaScript. The GetUrl() Method returns a string and that string/url is then used to update Image2.

Example


<script runat="server">
protected void Button1_Click(object sender, AjaxEventArgs e)
{
string imageID = this.Image1.ClientID;
string url = "logo.gif";

this.ScriptManager1.AddScript(string.Concat("Ext.get('", imageID, "').set({src: '", url, "'});"));
}

[AjaxMethod]
public static string GetUrl()
{
return "logo.gif";
}
</script>

<asp:Image ID="Image1" runat="server" />

<ext:Button ID="Button1" runat="server" Text="Submit (AjaxEvent)">
<AjaxEvents>
<Click OnEvent="Button1_Click" />
</AjaxEvents>
</ext:Button>

<asp:Image ID="Image2" runat="server" />

<ext:Button ID="Button2" runat="server" Text="Submit (AjaxMethod)">
<Listeners>
<Click Handler="Coolite.Ext.AjaxMethods.GetUrl({
success: function(result) {
Ext.get('Image2').set({src: result});
}});" />
</Listeners>
</ext:Button>

More information regarding AjaxEvents and AjaxMethods are available in the Examples Explorer (http://examples2.ext.net/).

http://examples1.ext.net/#/AjaxEvents/Basic/Overview/

http://examples1.ext.net/#/AjaxMethods/Basic/Overview/

If the 3rd party control has a client-side JavaScript API, then updating the control should not be a problem. If the control can only be updated server-side, then another option might be using an <asp:UpdatePanel>.

Hope this helps.






Hi Geoffrey,


How I can combine coolite controls with updatePanels. The control needed to update is a dundas chart control (http://www.dundas.com). The control renders an image, but the advanced caracteristics are losed if I only update the image url of an html tag.


Thanks!

jchau
Dec 01, 2008, 4:36 PM
fquintero, I have used Dundas controls, and I believe they have their own Ajax API. You should be able to attach listeners on Coolite controls and use Dundas' Ajax API to update Dundas Chart. I have done similar stuff with their Dundas OLAP Grid control and regular ASP.NET buttons/controls.

netwearcdz
Jan 14, 2010, 2:30 PM
I am having this very same problem with the Dundas Olap grid could you show me some samples of how you did this with the AxisBuilder control....

geoffrey.mcgill
Feb 06, 2010, 12:05 AM
If anyone is following this thread, you might be interested in the following thread which demonstrates new v1.0 functionality for updating any ASP.NET Control during a DirectEvent or DirectMethod call.

http://forums.ext.net/showthread.php?threadid=27096-4-1.aspx


Hope this helps.