468,115 Members | 2,017 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,115 developers. It's quick & easy.

Change DataList item with JavaScript

I have a DataList and each item in the datalist has an imge, I want to
change the datalist item image on the client side when user clicks a button.
How would I do that with JavaScript, does anyone has an example of how to
change a DataList item with JavaScript?
Thank You
Peter
Nov 18 '08 #1
4 3697
you need to describe what you are doing. is there a button per image,
one button, how does the user identify the image to change? what is is
changed to?

simple case:

<img id="img1" src="myImage1.gif" />
<button onclick="document.getElementByID('img1').src='myIm age2.gif';" />
-- bruce (sqlwork.com)
Peter wrote:
I have a DataList and each item in the datalist has an imge, I want to
change the datalist item image on the client side when user clicks a button.
How would I do that with JavaScript, does anyone has an example of how to
change a DataList item with JavaScript?
Thank You
Peter

Nov 19 '08 #2
Hello Peter,

Thanks for using Microsoft Newsgroup Service. My name is Hongye Sun [MSFT]
and it is my pleasure to work with you on this issue.

DataList control in System.Web does not natively support this function.
That is because it can only do data binding at server side. To workaround
this, we have three options:

1. UpdatePanel
(http://asp.net/ajax/documentation/li...lOverview.aspx)
This is the most common way to workaround suck kind of issue. By
surrounding DataList with an UpdatePanel, it makes DataList rendered
partially. UpdatePanel will trigger a partial page post back to server
side, and server code is responsible to re-bind the data to DataList
control. Then server will send the render result within the UpdatePanel to
client side, and client side will use javascript to replace the content in
UpdatePanel.

2. Ajax Data Controls (http://www.codeplex.com/AjaxDataControls)
This is an open source control. It contains an ajaxified DataList. The
DataList is implemented to do data binding at client side, so that you can
change its data and re-bind it by javascript. However, compared to ASP.NET
controls under System.Web, the ajax data controls are not proved to be
stable enough in business applications. My suggestion is that if
UpdatePanel does not meet your requirement and your usage of DataList
control is not complex, you can customize the ajax data controls code to
meet your business requirement.

3. Support this feature by hidden control
This option is only applied in very rare situations, where the usage of
DataList is very simple. Here is an example:
http://www.dotnetspider.com/resource...aList-using-Ja
va-Script.aspx.

Inside the example, it saves image URL data and Image control's client ID
into separate hidden controls. On the client side, it gets the control by
client id and set URL into it on the fly.

Please take a look of the workarounds above and let me know if they meet
your requirement. Thanks.

Regards,
Hongye Sun (ho*****@online.microsoft.com, remove 'online.')
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
ms****@microsoft.com.

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subs...#notifications.

Note: MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 2 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions. Issues of this
nature are best handled working with a dedicated Microsoft Support Engineer
by contacting Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subs.../aa948874.aspx
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

Nov 19 '08 #3
Thank You very much for the Info, that fixed my problem
""Hongye Sun [MSFT]"" <ho*****@online.microsoft.comwrote in message
news:Mm**************@TK2MSFTNGHUB02.phx.gbl...
Hello Peter,

Thanks for using Microsoft Newsgroup Service. My name is Hongye Sun [MSFT]
and it is my pleasure to work with you on this issue.

DataList control in System.Web does not natively support this function.
That is because it can only do data binding at server side. To workaround
this, we have three options:

1. UpdatePanel
(http://asp.net/ajax/documentation/li...lOverview.aspx)
This is the most common way to workaround suck kind of issue. By
surrounding DataList with an UpdatePanel, it makes DataList rendered
partially. UpdatePanel will trigger a partial page post back to server
side, and server code is responsible to re-bind the data to DataList
control. Then server will send the render result within the UpdatePanel to
client side, and client side will use javascript to replace the content in
UpdatePanel.

2. Ajax Data Controls (http://www.codeplex.com/AjaxDataControls)
This is an open source control. It contains an ajaxified DataList. The
DataList is implemented to do data binding at client side, so that you can
change its data and re-bind it by javascript. However, compared to ASP.NET
controls under System.Web, the ajax data controls are not proved to be
stable enough in business applications. My suggestion is that if
UpdatePanel does not meet your requirement and your usage of DataList
control is not complex, you can customize the ajax data controls code to
meet your business requirement.

3. Support this feature by hidden control
This option is only applied in very rare situations, where the usage of
DataList is very simple. Here is an example:
http://www.dotnetspider.com/resource...aList-using-Ja
va-Script.aspx.

Inside the example, it saves image URL data and Image control's client ID
into separate hidden controls. On the client side, it gets the control by
client id and set URL into it on the fly.

Please take a look of the workarounds above and let me know if they meet
your requirement. Thanks.

Regards,
Hongye Sun (ho*****@online.microsoft.com, remove 'online.')
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
ms****@microsoft.com.

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subs...#notifications.

Note: MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 2 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions. Issues of this
nature are best handled working with a dedicated Microsoft Support
Engineer
by contacting Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subs.../aa948874.aspx
==================================================
This posting is provided "AS IS" with no warranties, and confers no
rights.

Nov 19 '08 #4
You are welcome, Peter. It is my pleasure to help you.

Have a nice day.

Regards,
Hongye Sun (ho*****@online.microsoft.com, remove 'online.')
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
ms****@microsoft.com.
*
This posting is provided "AS IS" with no warranties, and confers no rights.

Nov 20 '08 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Miguel Dias Moura | last post: by
3 posts views Thread by CVerma | last post: by
1 post views Thread by Mirek Endys | last post: by
4 posts views Thread by Nathan Sokalski | last post: by
1 post views Thread by WB | last post: by
3 posts views Thread by rn5a | last post: by
3 posts views Thread by Crazy Cat | last post: by
3 posts views Thread by didacticone | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.