Avatar of hitman3030
hitman3030
 asked on

How can I complete an ajax post as page is rendering for a first view?

Here is what I am doing. I need some guidance in the best way to incorporate ajax to accomplish it.

I have developed a responsive site that works well with any device, including mobile-- but I want to deliver smaller images to speed up the loading for slow/smaller screens. Thus far this works:

1) I clock the download of a small (20k) image to get a rough estimate of client's connection.

2) Using jquery, I also get the screen width.

3) I then categorize the enviorment as width+speed (i.e. smallslow, smallfast, bigslow, bigfast)

4) I store this single variable in a cookie which is available on all subsequent page calls.

5) Image tags are loaded initially without a specified src in the aspx file.
In .net code on subsequent pages, I can retrieve the cookie and set images src using this variable in a select case.

THE PROBLEM:
The very first time a client request a page from the site, this cookie is not available to the .net Page Load event. I need to pass it back to the aspx page while the page is rendering that first time view.  I am new to ajax.

Debug in js shows value is present in the ajax function and I get no error.

But debug in .net does not stop on any break points, not page_load() or the special GetSpeed() WebMethod I created (See Version 2 below). It seems my ajax call is not firing the page on the server as I expected, and I have not been able to debug it.

VERISON 1 (FAILED):
Here is the ajax call after setting cookie. Notice I am just calling the exact same url the client hit, without passing a special function with it.

Even though I coded this to pass the value of the cookie, I have been told that really, all I need is the ajax call--because cookies get passed back anyway in the http header.

<head>
 
function setcookie{...}

   var sizespeed = getCookie('cSizeSpeed');
   $.ajax({ url: "http//www.upmyscore.com/lp", data: { "sizespeed": sizespeed }, type: "POST" });
</head>

Open in new window


Here is the read in the .net page_load event:
strSizeSpeed = System.Web.HttpContext.Current.Request.Form("sizespeed")
if len(strSizeSpeed ) = 0 then
        If Not IsNothing(System.Web.HttpContext.Current.Request.Cookies("cSizeSpeed")) Then
            strSpeedSize = System.Web.HttpContext.Current.Request.Cookies("cSizeSpeed").Value
        End If 
end if

Open in new window


VERSION 2 (FAILED):
 I created a webmethod in the page and explicitly call it in the ajax post:

 var sizespeed = getCookie('cSizeSpeed');
   $.ajax({ url: "http//www.upmyscore.com/lp/lp.aspx/GetSpeed", data: { "sizespeed": sizespeed }, type: "POST" });

Open in new window



In the .net page:

    <System.Web.Services.WebMethod> _
    Public Shared Function GetSpeed()
        Dim strSpeedSize As String = ""
        If Not IsNothing(System.Web.HttpContext.Current.Request.Cookies("cSizeSpeed")) Then
            strSpeedSize = System.Web.HttpContext.Current.Request.Cookies("cSizeSpeed").Value
        End If 

Open in new window

.NET ProgrammingAJAXJavaScript

Avatar of undefined
Last Comment
hitman3030

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Member_2_248744

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Gary Davis

Verify that the cookie you created in the client is in fact sent to the server you are calling with Ajax. Cookies are only sent to domains specified within the cookie. If the cookie is not sent to the server, fix the cookie's domain or pass it as a parameter.

As far as having the client determin the size/width and then gettint the correct images, you may have to alter the image src after the page render which is certainly common in ajax/jQuery or you can have a second page called that will have the images correct from the server. In this case, the server sends the special code page to the client, the client determines the info and issues an ajax call to pass the data and then does a redirect to get the actual page. You could improve that and skip the ajax call and simply do the redirect passing the data (or cookie). The special code is an htm file with only script and would be very small and fast.
darren-w-

Generally you would included the script as a file and call your code like so:

//make sure you have $
(function ($) {
//on page ready
    $(function({
        //your ajax call here
     })
})(jQuery);

Open in new window

hitman3030

ASKER
In the first page view, Js was the only way I could get it to work. I believe it is possible to do without a redirect by using ajax, but after 3 days...I'm defeated...may come back to it when I feel the need for pain,
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy