I have a C# website that includes AJAX. The site has a master page and sub pages. I am revamping the photo gallery sub page to include a jquery function that displays a larger version of a thumbnail image when hovered. The thumbnails are listed in a xaml file, at load the xaml file is read and formatted into a string that is then displayed a-portion-at-a-time. When the page initially loads everything is working fine. But, when I click the button to display another portion of the thumbnails (via AJAX) the jquery function stops working. Is this because jquery doesn't recognize the DOM has been updated by the AJAX? Any ideas on a solution?

SubPage

....
    private void FillPhotos(int StartNum, int EndNum)
    {
        string photosXML = gVar.MyPhotoFilePath;
        string smFilePath = gVar.smFilePath;
        string lgFilePath = gVar.lgFilePath;
         
     try
            {
                // This is where we would read from the xml file
                DataSet oDS = new DataSet();
                //Fills the dataset with data from xml file
                
                oDS.ReadXml( Server.MapPath(photosXML));

                DataTable dtOrig = oDS.Tables[0];
                DataTable dt = dtOrig.Clone();
                for(int j=1;j<dtOrig.Rows.Count;j++)
                {
                    DataRow drOrig = dtOrig.Rows[j-1];                   
                    string GalDisplay = drOrig["GalDisplay"].ToString();
                    if (GalDisplay == "Yes")
                    {
                        DataRow drNew = dt.NewRow();
                        drNew.ItemArray = drOrig.ItemArray;
                        dt.Rows.Add(drNew);
                    }
                }
                string strComposite = "";
                strComposite = "<div>";

                string strHiddenComposite = "";
                strHiddenComposite = "<div>";

                         
                int TotalImageNum = dt.Rows.Count;
                int i = 0;


                for(i=StartNum;(i<TotalImageNum)&&(i<EndNum);i++)
                {
                    DataRow dr = dt.Rows[i-1];                   
                    string GalDisplay = dr["GalDisplay"].ToString();
                    if (GalDisplay == "Yes")
                    {
                        string PhotoDesc = dr["PhotoDescription"].ToString();
                        string FileName = dr["FileName"].ToString();
                        string SortOrder = dr["SortOrder"].ToString();
                        string topSpace = "20";
                        string leftSpace = "20";
                        string borderColor = GetColor(i);

                        //Add photo information to string to be placed on page
                        strComposite += string.Format("<span style='margin-top: {3}px; margin-left: {4}px;' id='fourth'>"
                            //+ "<a href='{{7}{1}' alt= \"{2}\"  >"
                            + "<img src='{0}{1}' alt= \"{2}\" class='gallery'"
                            + " style='width: 150px; border-color:{5};border-width:10px;border-style:outset; '>"
                            + "</span>",
                            smFilePath,
                            FileName,
                            PhotoDesc,
                            topSpace,
                            leftSpace,
                            borderColor,
                            PhotoDesc,
                            i,
                            lgFilePath);
                        
                        //Add Large photos to pre-load
                        strHiddenComposite += string.Format("<img src='{0}{1}' alt= \"{2}\" >",
                            lgFilePath,
                            FileName,
                            PhotoDesc);



                    }
                }

         
                strComposite += "</div>"; 
                lblPhotos.Text = strComposite; 

         
                strHiddenComposite += "</div>";
                lblhiddenPhotos.Text = strHiddenComposite;                 
          
                //set next button
                if (EndNum + 1 > TotalImageNum)
                {
                    btnNext.Visible = false;
                }
                else
                {
                    btnNext.Visible = true;
                }
         
                //set previous button
                if (StartNum - 1 <= 0)
                {
                    btnPrevious.Visible = false;
                }
                else
                {
                    btnPrevious.Visible = true;
                }
                      
         
         }
            catch (Exception ex)
            {
                string ErrMsg = "Page data not available... Please try again later<br> ";
                ErrMsg += ex.Message.ToString();
                lblErrMsg.Text = ErrMsg;
            }
    }



    private string GetColor(int fileNum)
    {
        int myRound = fileNum % 3;
        if (myRound == 0)
            {return "black";}
        else if (myRound == 1)
            { return "sienna"; }
        else if (myRound == 2)
            { return "goldenrod"; }
        else
            { return "red"; }
    }




    protected void btnPrevious_Click(object sender, ImageClickEventArgs e)
    {
        gVar.CurFirstImageNum = gVar.CurFirstImageNum - gVar.imgCount;
        FillPhotos(gVar.CurFirstImageNum,gVar.CurFirstImageNum + gVar.imgCount);
    }


    protected void btnNext_Click(object sender, ImageClickEventArgs e)
    {
        gVar.CurFirstImageNum = gVar.CurFirstImageNum + gVar.imgCount;
        FillPhotos(gVar.CurFirstImageNum, gVar.CurFirstImageNum + gVar.imgCount);
    }

    protected void btnViewSel_Click(object sender, ImageClickEventArgs e)
    {
        gVar.CurFirstImageNum = 1;
        FillPhotos(gVar.CurFirstImageNum, gVar.CurFirstImageNum + gVar.imgCount);
        btnViewAll.Visible = true;
        btnViewSel.Visible = false;   
    }

    protected void btnViewAll_Click(object sender, ImageClickEventArgs e)
    {
        gVar.CurFirstImageNum = 1;
        FillPhotos(gVar.CurFirstImageNum, 1000);
        btnViewSel.Visible = true;
        btnViewAll.Visible = false;
    }
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
	<meta content="Hillsboro, Oregon, AKC Miniature dachshunds, english cream little dachshunds , Sunshine Farm lil Dachsies, photo gallery" name="keywords" />
	<meta content="Welcome to Sunshine Farm! We are a small family breeder of quality AKC minature dachshunds.  We are located in Hillsboro, Oregon." name="description" />
    <script type="text/javascript"  src="DDJava.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.thumbhover.js"></script>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        
        <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
            <Scripts>
                <asp:ScriptReference Path="~/jquery.thumbhover.js" />
            </Scripts>
        </asp:ScriptManagerProxy>
        
 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" >

    <ContentTemplate>
        <div id="TopCountDown" ></div>
            <div style="height:20px; margin-bottom:10px; display: block;">
                <div style="float:left">
                    <asp:ImageButton ID="btnPrevious" runat="server"  
                        ImageUrl="~/Buttons/GalleryButtons/button4.jpg" onclick="btnPrevious_Click"/>
			    </div>
			    <div style="float:right">
			        <asp:ImageButton ID="btnNext" runat="server"  
                        ImageUrl="~/Buttons/GalleryButtons/button7.jpg" onclick="btnNext_Click" />
			    </div>
			    <div style="margin-left:auto;margin-right:auto;width:110px;">
                    <asp:ImageButton ID="btnViewAll" runat="server" 
                        ImageUrl="~/Buttons/GalleryButtons/btnViewAll.jpg" onclick="btnViewAll_Click" />
                    <asp:ImageButton ID="btnViewSel" runat="server" 
                        ImageUrl="~/Buttons/GalleryButtons/btnViewSel.jpg" Visible="false" 
                        onclick="btnViewSel_Click" />
			    </div>
			</div>
			<br />
            

            <asp:Label id="lblDataFiller" runat="server"/>

            <asp:Label ID="lblPhotos" runat="server" />
	        <div style="display:none;">
                <asp:Label ID="lblhiddenPhotos" runat="server"  />        
	        </div>
	            <asp:Label ID="lblErrMsg" runat="server" Text=""></asp:Label>
	<div id="BottomCountDown" ></div>

   <script type="text/javascript">
        $(document).ready(function() {
            $("#fourth img").thumbPopup({
              imgSmallFlag: "PhotosSm",
              imgLargeFlag: "PhotosLg"
            });
        });
    </script>
   </ContentTemplate>
   </asp:UpdatePanel>



</asp:Content>

Let me know if you need more information... hopefully you have enough here

Thanks,

John

I figured out my own solution. While checking other forums and places, I found a couple of references bemoaning the update panel. Thus, on a whim, I deleted the panel to see what would happen. To my amazement it fixed the issue.

To be specific:
I removed the following lines of code in the html area (near the bottom):

<ContentTemplate>
<asp:UpdatePanel>
... Lines of html and asp code
</ContentTemplate>
</asp:UpdatePanel>

After removing these lines, my page works great. Still need to test carefully thought. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.