Change DataList item with JavaScript

  • Thread starter Thread starter Peter
  • Start date Start date
P

Peter

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
 
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='myImage2.gif';" />


-- bruce (sqlwork.com)
 
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/live/overview/UpdatePanelOverview.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/resources/18034-Shuffle-Images-DataList-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 ([email protected], 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:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#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/subscriptions/aa948874.aspx
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.
 
Thank You very much for the Info, that fixed my problem


"Hongye Sun [MSFT]" said:
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/live/overview/UpdatePanelOverview.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/resources/18034-Shuffle-Images-DataList-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 ([email protected], 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:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#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/subscriptions/aa948874.aspx
==================================================
This posting is provided "AS IS" with no warranties, and confers no
rights.
Click to expand...
 
You are welcome, Peter. It is my pleasure to help you.

Have a nice day.

Regards,
Hongye Sun ([email protected], 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:
(e-mail address removed).
 
This posting is provided "AS IS" with no warranties, and confers no rights.
 
Back
Top