Update panel asp.net - page refresh

Question

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 ?

Answer 1

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.

Answer 2

I'm not sure about what is your problem here, but if you want to separate the Update Panel into two you can do so.

There's an explanation on how different update panels can trigger themselves. http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-asp-net-ajax-updatepanel-triggers