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