Need help with an Ajax call to the bit of code.

Question

1.00/5 (3 votes)

See more:

My Jquery code is this which controls images to go into a flip book.

JavaScript

//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.

C#

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.

JavaScript

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 4:35am

postonoh

Updated 26-Sep-12 4:49am

v2

Add a Solution

Comments

ZurdoDev 26-Sep-12 10:52am

What is the question?

postonoh 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.

ZurdoDev 26-Sep-12 11:08am

No, you are telling me what it does. I still don't see a question though.

postonoh 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.

ZurdoDev 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?

postonoh 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 26-Sep-12 10:55am

No question, no answer. You did not even mention a single problem.
--SA

postonoh 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 26-Sep-12 17:03pm

It's even faster then I could read :-), still -- not a question. :-)
--SA

postonoh 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

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

fjdiewornncalwe · Accepted Answer · 2012-09-26T05:08:00

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.

postonoh · Accepted Answer · 2012-10-09T05:59:00

fix problem it was a timing issue I add the following

JavaScript

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.

Need help with an Ajax call to the bit of code.

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0