Update panel asp.net - page refresh

asp.net, c#, updatepanel

Solution

You can always get it done using updatepanel and microsoft ajax... but there is a better and more lightweight alternative. Use jquery to swap the main image on top when the thumbnails are clicked, without doing a page refresh.

Define a surrounding div for the imain image with id "imageBox"

<a href="#" id="changeImage" rel="1"><img class="thumb" src="image1_thumb.jpg" /></a>
<div id="imageBox">&nbsp;</div>

then,

$(document).ready(function(){
    $('#changeImage').click(function(){
        var rel = $(this).attr('rel');
        $("#imageBox").html("<img src='image" + rel + ".jpg' />");
    })
});

This is both clean and lightweight. no Microsoft ajax panel junk.

Problem

Page url: http://advancedmedia.co.il/data.aspx Code: ``` <asp:Content ID="Content2" ContentPlaceHolderID="page_content_cp" Runat="Server"> <asp:UpdatePanel runat="server" ID="UP1" UpdateMode="Conditional"> <ContentTemplate> <section id="page_section"> <div class="data_top"> <ul class="bxslider"> <asp:ListView ID="LV_slider" runat="server" DataSourceID="**"> <ItemTemplate> <li> <asp:Image ID="Image11" ImageUrl='<%#XPath("big_image_url") %>' AlternateText="slider" runat="server" /> </li> </ItemTemplate> </asp:ListView> </ul> </div> <div class="shaddow"></div> <div class="data_bottom"> <asp:ListView runat="server" ID="LV_data_bottom" DataSourceID="**"> <ItemTemplate> <div style="display:inline;"> <asp:LinkButton runat="server" CommandArgument='<%#XPath("big_image_url") %>' ID="LB_thumb" OnClick="lb_thumb1" ><asp:Image runat="server" ID="IMG_img1" ImageUrl='<%#XPath("small_image_url") %>' /> <asp:Label runat="server" CssClass="title" ID="bottom_label" Text='<%#XPath("title") %>'></asp:Label></asp:LinkButton> </div> </ItemTemplate> </asp:ListView> </div> </section> </ContentTemplate> </asp:UpdatePanel> <asp:XmlDataSource ID="**" runat="server" DataFile="~/***/***" XPath="/Data/**/**"> </asp:XmlDataSource> </asp:Content> ``` Click on the thumbs "jump" the page. I dont want the page will "jump"/"refresh" after click on thumb. how can i do that? Maybe i wrong on the place of the updatepanel ?

Original source