Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript Ajax C#4.0
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 {
 
                }
            });
 

 
 

 

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 "";
            }
 
        }
 

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 

                }
              });
        }
        
Posted 26-Sep-12 5:35am
Edited 26-Sep-12 5:49am
v2
Comments
ryanb31 at 26-Sep-12 10:52am
   
What is the question?
PostonFree at 26-Sep-12 11:00am
   
I have web links stored in my database. I need to retrieve the links which my c# code does. my Jquery code allows me to draw even and odd pages like a book. On this pages from are CMSystem we create map out links in rectangular design that are hot-spots. I trying to recreate this with the iPad. It works with web browser(IE, Chrome, etc). I hope I am explaining right.
ryanb31 at 26-Sep-12 11:08am
   
No, you are telling me what it does. I still don't see a question though.
PostonFree at 26-Sep-12 11:15am
   
How do I wire my ajax to c# code back to my Jquery page code. My ajax to c# Web Method works. Thanks for your patience.
ryanb31 at 26-Sep-12 11:25am
   
I still do not understand. Your C# webmethod returns a value. Your ajax call is getting that value in msg.d. What exactly is the problem?
PostonFree at 26-Sep-12 13:26pm
   
Having problem taking the value I receive and wire it to the my pages
so they will show up on the page.
Sergey Alexandrovich Kryukov at 26-Sep-12 10:55am
   
No question, no answer. You did not even mention a single problem.
--SA
PostonFree at 26-Sep-12 11:01am
   
Having problems linking up my database stored weblinks to the flipbook coordinates pages for an iPad. My thoughts were moving faster then my hand could type.
Sergey Alexandrovich Kryukov at 26-Sep-12 17:03pm
   
It's even faster then I could read :-), still -- not a question. :-)
--SA
PostonFree at 27-Sep-12 13:53pm
   
The question is how do I wire the values retrieve from the ajax call to the pages after pages are drawn. The values are coordinates of hot link for the each page. Also I am
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Based on your comments you need to slow down and think this though step by step. Don't try to get things to work end-to-end right off the get go. You have to make sure that each step in your process is working as expected before you attempt to wire them together. You'll save yourself a bunch of time and energy this way. Remember that every big and complex job is built up with tiny little baby steps that are tied together.
 
Step 1 could be to ensure that your server side code actually gets the data properly from the database on its own.
Step 2 could be to ensure that your client side ajax call is hitting the appropriate controller/handler on the server
Step 3 could be to validate that the data coming back from the ajax call is correct.
Step 4 could be to validate that the binding is doing what you expect.
  Permalink  
Comments
Sergey Alexandrovich Kryukov at 26-Sep-12 17:04pm
   
Looks like good recommendations to me, even though I still could not see a question in OP's post; it's great that you could! -- a 5.
--SA
Marcus Kramer at 27-Sep-12 18:02pm
   
Thanks, Sergey.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

fix problem it was a timing issue I add the following
 
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 

                }
              });
        }
function LinkLoading(BookID, page) {
            //Starting code for the search for links
           
            $.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 (data) { // The msg that comes back has in it the d attribute which in this case contains an array from the server
                   Right = data.d; //Lets copy the passed back array to a global array 

                }
              });
        }
page = 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 (data) { // The msg that comes back has in it the d attribute which in this case contains an array from the server
                   left = data.d; //Lets copy the passed back array to a global array 

                }
              });
 

 
fixed problem.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 398
1 DamithSL 255
2 OriginalGriff 230
3 Zoltán Zörgő 149
4 Dave Kreskowiak 120
0 OriginalGriff 7,575
1 DamithSL 5,529
2 Sergey Alexandrovich Kryukov 5,279
3 Maciej Los 4,961
4 Kornfeld Eliyahu Peter 4,539


Advertise | Privacy | Mobile
Web01 | 2.8.141223.1 | Last Updated 9 Oct 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100