在Ajax调用代码部分时需要帮助. [英] Need help with an Ajax call to the bit of code.
本文介绍了在Ajax调用代码部分时需要帮助.的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的Jquery代码是用于控制图像进入翻书的.
My Jquery code is this which controls images to go into a flip book.
//This function is called as you start to turn the page, it will load the new page form
//the contents array, this is where you would pull links via an ajax call
//you dont draw them here though
$("#book").bind("start", function (e, page) {
$("#Page-" + page.page).css("background-image", "url('" + Contents[page.page] + "')");
$("#Page-" + (page.page).toString()).css("background-size", "100% 100%");
$("#Page-" + page.next).css("background-image", "url('" + Contents[page.next] + "')");
$("#Page-" + (page.next).toString()).css("background-size", "100% 100%");
LinkLoading($("#hidbookID").val(), CurrentPage);
});
$("#book").bind("turning", function (e, page) {
//Check if the page is loaded for both left and right
//If not loaded load the page and then display
LinkLoading();
if (!$("#Page-" + (page - 1).toString()).hasClass("loaded")) {//If not show a loader image (You may have to tweak this)
$("#Page-" + (page - 1).toString()).prepend($('<img src="books/images/ajax-loader.gif", style="position:absolute;left:40%;top:50%; z-index:5"/>').addClass("ShowLoading"));
$("#Page-" + (page - 1).toString()).css("background-image", "url('" + Contents[page - 1] + "')")
$("#Page-" + (page - 1).toString()).addClass("loaded");
$("#Page-" + (page - 1).toString()).fadeIn("fast", function () {
$(".ShowLoading").remove();
$("#Page-" + (page - 1).toString()).remove(".ShowLoading");
$("#Page-" + (page - 1).toString()).toString().append(link);
});
$("#Page-" + (page - 1).toString()).css("background-size", "100% 100%");
} else {
$("#Page-" + (page).toString()).show();
}
if (!$("#Page-" + (page).toString()).hasClass("loaded")) {
$("#Page-" + (page).toString()).prepend($('<img src="books/images/ajax-loader.gif", style="position:absolute;left:40%;top:50%; z-index:5"/>').addClass("ShowLoading"));
$("#Page-" + (page).toString()).css("background-image", "url('" + Contents[page] + "')")
$("#Page-" + (page).toString()).addClass("loaded");
$("#Page-" + (page).toString()).fadeIn("fast", function () {
$(".ShowLoading").remove();
$("#Page-" + (page).toString()).remove(".ShowLoading");
$("#Page-" + (page).toString()).toString().append(link);
});
$("#Page-" + (page).toString()).css("background-size", "100% 100%");
} else {
}
});
此调用查询数据库以获取html活动链接的坐标.
This call query a database for coordinates to html active links.
public static string GetPageLinks(int Bookid, int page)
{
if (page < 1) { return ""; }
//Lets call the database and get the links for this book
bookLinksDC bldc = new bookLinksDC();
List<BookLink> hotlinks = new List<BookLink>(); // hot spot links book
hotlinks = bldc.GetPageLinks(Bookid, page.ToString());
string ret = "";
//If we have links
if (hotlinks.Count > 0)
{
//List<BookLink> pageLinks = (from ht in hotlinks where ht.PageNo == PageNo select ht).ToList();
foreach (BookLink hotlink in hotlinks)
{
//The rectangle is created with some attributes
//id is the letter M and the name of the file
//Class is imgLink - this so it can act like an HTML anchor tag and also PageNo1
//PageNo is the words "PageNo and the number of the current page (PageNo1,PageNo2,PageNo3,etc,etc,etc)
//Make sure to set the style to absolute position and border is 0, set the background to a transparent gif
//which will make the div invisible, and still allow the use of the mouse events
//if you set the DIV to invisible it will not respond to mouse events
string rect = "<div linkType=\"" + hotlink.Type + "\" id=\"M" + hotlink.LinkId.ToString()
+ "\" class=\"imgLink PageNo"
+ page.ToString() //Added z-index = 5000 becuase the shadow overlay was causing issues with links not being clickable 6/24/2012
+ "\" style=\"removed:absolute; z-Index:5000; border:0px solid #FF0000; background: removed(./images/transparent.gif) repeat;";
double top; //The top most edge of the rectangle or Y
double left; //The Left most edge of the rectangle or X
double width;
double height;
left = hotlink.X1;
top = hotlink.Y1;
width = Math.Abs(hotlink.X2 - hotlink.X1);
height = Math.Abs(hotlink.Y2 - hotlink.Y1);
//Lets add the Values to the div tag we created above , Make sure to add px to the end of each
//value other wise some browsers get stupid (thanks IE)
rect = rect + " left:" + left.ToString() + "px;";
rect = rect + " top:" + top.ToString() + "px;";
rect = rect + " width:" + width.ToString() + "px;";
rect = rect + " height:" + height.ToString() + "px;\"";
//In the Rel attribute we will place a comma delimted list of the coords that make up the
//rectangle, this is here for java script to use in resizing the page
rect = rect + " rel=\"" + left.ToString()
+ "," + top.ToString()
+ "," + width.ToString()
+ "," + height.ToString();
//We also drop the width and height of the parent image in the title attribite
//even though we will not be using it
rect = rect + "\" title=\"" + hotlink.Target.Replace("'", "");
rect = rect + "\">";
rect = rect + "</div>";//Close off the div
//p.PageContent = p.PageContent + rect; // add the div to our content page
ret = ret + rect;
}
return ret;
}
else
{
return "";
}
}
到目前为止，我的Ajax代码是这样.
my ajax code so far is this.
function LinkLoading() {
//Starting code for the search for links
var page = 1;
$.ajax({
type: "POST", // AJAX type post
url: "tabletbook.aspx/GetPageLinks",
data: JSON.stringify({ Bookid: BookID, page: page }), // hidbookid
contentType: "application/json; charset=utf-8", //This is rCequired 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 (msg) { // The msg that comes back has in it the d attribute which in this case contains an array from the server
Contents = msg.d; //Lets copy the passed back array to a global array
}
});
}
推荐答案
(" ).bind( 开始"，功能(例如页面){
("#book").bind("start", function (e, page) {
(" + page.page).css( 背景图片"，" +目录[page.page] + " );
("#Page-" + page.page).css("background-image", "url('" + Contents[page.page] + "')");
(" #Page-" +(page.page).toString()).css( 背景尺寸"， 100％100％");
("#Page-" + (page.page).toString()).css("background-size", "100% 100%");
这篇关于在Ajax调用代码部分时需要帮助.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
