l am trying load images with ajax into a div.
l am trying load images with ajax into a div with c# web method code behind.
My div:
- <div id="ThumbNailNav" style="display: block; width:100%; height:100px; z-index:1; background- color:Red" title="Thumbnail Navigation" >
<div id="thumbimg" style="width:80px; height:80px">
</div>
</div>
My ajax code:
- function PopulateThumbsEx(BookID, lastShown) {
- var tag = $("<div></div>");
- $.ajax({
- type: "POST", // AJAX type post
- url: "tabletbook.aspx/GetThumbNailPage",
- data: '{"BookID": "' + BookID + '", "lastShown": "' + lastShown + '"}',
- contentType: "application/json; charset=utf-8", //This is required or you will get all sorts of strange things :-)
- dataType: "json", //We need to specifiy JSON as to have the AJAX serilize the data between Client and server
- success: function (data) { // The msg that comes back has in it the d attribute which in this case contains an array from the server
- thumbnails = data.d; //Lets copy the links to a global array this gets set by the odd guy. andthen the even comes in right after and sets it
- // so when the odd goes to render the global has the even values in it. hard to debug because you are introducing pauesse that won't exist normally ok.
- //tag.html(data).dialog({ modal: true }).mobile.changePage('#ThumbNailNavDialog');
- $("#thumbimg").empty();
- $("#thumbimg").css("z-index", "3");
- $("#thumbimg").append(thumbnails);
- $("#thumbimg").fadeIn("fast");
- }
- });
- }
My web method
- [WebMethod(true)]
- public static string GetThumbNailPage(int BookID, int lastShown)
- {
- BookDC bdc = new BookDC();
- FlipBook book = bdc.GetBook(BookID);
- string s = book.ClientID.ToString();
- //Lets get a list to the thumbnail files
- List<string> tnFiles = Common.helpers.ExtractImagesFromFolder(HttpContext.Current.Server.MapPath("~/Clients/" + s + "/" + BookID.ToString() + "/Thumbs"));
- StringBuilder sb = new StringBuilder();
- string[] fileList = tnFiles.ToArray();
- Array.Sort(fileList, new Common.NaturalComparer());
- tnFiles.Clear();
- tnFiles.AddRange(fileList);
- sb.AppendLine("<table style='margin-left:auto;margin-right:auto' cellpadding='5' width='100%' rel='{*}' id='tblThumbs' >");
- if (lastShown == tnFiles.Count)
- {
- lastShown = 0;
- }
- if (lastShown < 0)
- {
- lastShown = 0;
- }
- string PgNum = "";
- for (int r = 0; r < 4; r++)
- {
- sb.AppendLine("<tr>");
- for (int c = 0; c < 5; c++)
- {
- if (lastShown < tnFiles.Count)
- {
- FileInfo FI = new FileInfo(tnFiles[lastShown]);
- string FileName = FI.Name; // get the
- lastShown++;
- PgNum = FileName.Substring(FileName.IndexOf("-") + 1);
- PgNum = PgNum.Substring(0, PgNum.IndexOf("."));
- sb.AppendLine("<td><a href='#'><img class='thumbNailLink' title='" + PgNum + "' src='"
- + "/Clients/" + s + "/" + BookID.ToString() + "/Thumbs/" + FileName + "' ></a></td>");
- }
- }
- sb.AppendLine("</tr>");
- }
- sb.AppendLine("</table>");
- string retStr = sb.ToString().Replace("{*}", lastShown.ToString());
- return retStr;
- }
The images are not showing how do I fix this.