473,405 Members | 2,354 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,405 software developers and data experts.

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 3956
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Nevyn Twyll | last post by:
I have a DataList; in the DataList's , I have a LinkButton and a few listboxes. When the LinkButton is pressed, I need to get the ID of the selected item in one of the Listbox controls. Then I...
4
by: Miguel Dias Moura | last post by:
Hello, I created a datalist in an ASP.Net / VB page. I display the image and price of a few products. When a user clicks an image I want to load the page "detail.aspx?number=id" and send the...
3
by: CVerma | last post by:
Hi, I have an embedded datagrid within a datalist. I am not able to perfrom paging in the datagrid. Any ideas? Here is my code: Here is my Simplegrid.cs file: using System; using...
1
by: Mirek Endys | last post by:
Hi all, I thought, that this is an usual thing, but Im wrong. I have a DataList control and there is a Label control. I need to change the Text propertz of the Label control. How to do it....
4
by: Nathan Sokalski | last post by:
I have a DataList that has an Button as one of the controls in it's ItemTemplate. The Button has a CommandName="delete" attribute, but when I click it the DeleteCommand event doesn't even get...
1
by: WB | last post by:
Hi, I would like to do something like this page: http://www.stocklayouts.com/Products/Postcard/Postcard-Template-Design-Library.aspx?kwid=38 Notice when you mouse-over any of the icons under...
3
by: rn5a | last post by:
I want to change the background color of a row in a DataList when the mouse is moved over a row. This is how I tried but it doesn't change the background color of a row in the DataList when the...
3
by: Crazy Cat | last post by:
Hi all, I am developing an asp.net 2.0 application in Visual Studio 2005. On my page I have a simple datalist that is bound programmatically to a collection of simple objects. On this page I...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.