I am working to display database driven web links on pages

[postonoh]

I am working on a iPad flip book project. Using html c# Jquery Ajax and Javascript sql server database

I have access all the data in the database to display the books base on client ID. The book works fine the problem is
I have web links or page links that goes on each page. I using ajax and to retrieve the value which works.
The problem I am having is wiring the links to the proper page.

I can pull the links when I add them to the pages. Only the links of the odd pages are wired. but are wire to both pages.

Example on page one. When page loads it does an ajax post if there are any links on page one return those links and
wire them on page one. Then page two ajax post get links for page two and wire them on page two.

Right now it is wiring page one link to page one and two. When I turn the page it is wiring page three links to page three and four and so on.


jquery, ajax and javascript code:
The bold code is my ajax post and retrieval of the links.
the links are prepended to the pages.

<script type="text/javascript">
        var ContentCached = 1; // The is 
        var CurrentPage = 1;
        var Contents = new Array();
        var HotLinks = new Array();
        var links = 0;
        var mask = 0;
        var OrgHeight;
        var OrgWidth;
        var Orientation = "portrait";
        var doubleOrSingle = 'double';
        var ResizeTimer;
        var Resizing = false;
        var timer = null;
        var LinkOverlayImg;
        var timeoutID;
        var timeoutIDFromButton;
        var DirectPage = false;
        //Number of times the links have blinked 
        var linkBorderBlinked = 0;
        var timerCount = 0
        var DirectPage = false;

   

            //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(BookID, page.page); LinkLoading(BookID, page.next);
            });
            // Once the page has been completed turned , display the page numbers in the header or what ever 
            //you want to do after the page has turned, this could be where 
            //you would draw your links posts, or what ever other assets you want to display 
            $("#book").bind("turned", function (e, page) {
                $(".imgLink").remove();
                var v = $("#book").turn("view");
             $("#CView").val(v[0]).css({ 'text-align': 'center' });                             
             $("#pgDiv" + (page - 1).toString()).remove(); 
             $("#Page-" + (page - 1).toString()).css("background-size", "100% 100%").append(HotLinks); 
             $("#pgDiv" + (page).toString()).remove(); 
             $("#Page-" + (page).toString()).css("background-size", "100% 100%").append(HotLinks); BlinkLinks();
            });
            //When the book first loads it calls this event 
            //it basiclly gets called every time the book 
            //reaches page one 
            $("#book").bind("first", function (e) {
                CurrentPage = 0;
                GetPageContent();
            });
            //we need an inital size for the book 
            $("#book").css("width", "100px");
            $("#book").css("height", "100px");

            ResizeME(); // Call resize to get the correct sizes 
            //remember by this time in the execution, your assets are loaded 
            $("#book").fadeIn("fast"); // Show the book
            LinkLoading(BookID, CurrentPage);
        });
        $(".imgLink").live("mouseover", function () {
            $(this).css("background-image", "url(" + LinkOverlayImg + ")");
            $(this).css("cursor", "pointer");
        });
        $(".imgLink").live("mouseout", function () {
            $(this).css("background-image", "url(books/images/transparent.gif)");
        });

        $(".imgLink").live("tap", function (e, page) {
            var LinkType = $(this).attr("linkType");
            if (LinkType.toUpperCase() == "WEB") {
                var href = $(this).attr("title");
                window.open(href, "_blank");
            } else if (LinkType.toUpperCase() == "DIRECTPAGE") {
                var pgLink = $(this).attr("title");
                $("#book").turn("page", parseInt(pgLink));
            } else if (LinkType.toUpperCase() == "IMAGELINK") {
                href = $(this).attr("title");
            } else if (LinkType.toUpperCase() == "VIDEOLINK") {
                //video link
            }
        });
        //When the doc is ready , show a loader image, for some add reason I cant get it to display, I will 
        //leave it for you to figure out
        $(document).ready(function () {
            $(loaderImage).prepend("#book").prepend($('<img src="books/images/ajax-loader.gif", style="position:absolute;left:40%;top:50%;z-index:5000"/>').addClass("ShowLoading"));
            BookID = getParameterByName("bookid"); //Get the query string param that has the book Id 
            CurrentPage = 0; //set the current page to zero 
              $(".Showloading").remove();
        });

        function Play() {
            timer = setInterval(function (e, page) {
                var way = 1;
                if (way == 1) {
                    $("#book").turn("next");
                }
            }, 1650);
        }

    // Ajax call to get the hot links from the database and return function
        LinkLoading(BookID, page) { //Starting code for the search for links 
                      $.ajax({ type: "POST", // AJAX type post 
                               url: "tabletbook.aspx/GetPageLinks", 
                               data: '{"BookID": "' + BookID + '", "page": "' + page + '"}', 
                               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 (link) { 
                              // The msg that comes back has in it the d attribute which in this case contains an array from the server 
                               HotLinks = link.d; //Lets copy the links to a global array 
                                $.ajax({ type: "POST", url: "tabletbook.aspx/GetLinkOverImage", 
                                 data: '{"BookID": "' + BookID + '"}', 
                                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 (ret) { 
                                   LinkOverlayImg = ret.d; 
                                  } 
                                }); 
                              } 
                            });
                           }
</script>

[postonoh]

Problem fixed thanks.