Check Availability of a page before loading it, using jquery/ajax

Question

Is it possible to check the Availability of a page before loading it?

I have a form, running on mobile device using wireless connection. The problem is: not always this connection is available and I would like to alert the user when is doing a submit or an unload of the page.

The problem is that the page contains elements doing redirect like this:

<input type="button" value="MyText" onClick="script1;script2;...window.location='mylocation'" />

If the user click on this button and the server is not achievable, i will receive some undesirable errors.

Also if I want to generalize my script i do not know the value of "mylocation" previously.

The page contains elements to submit the Form also:

<input type="submit" name="SUBMIT" value="MyValue" onClick="return eval('validationForm()')" />

For the submitting I'm using the ajaxForm plugin and it works quite well.

score 3 · Answer 1 · edited May 23 '17 at 12:25

to navigate back easily use this instead:

<input type="button" value="Back" onClick="window.location='history.go(-1);" >

where -1 means previous page. If you want to reload the current page use 0 instead, to navigate forward, use 1, etc.

If you use ajax from jquery, it sould handle it by itself... http://api.jquery.com/jQuery.ajax/

$.ajax({
        ///... need argument here...

        timeout: 5000, // in milliseconds
        success: function(data) {
             //Do something success
        },
        error: function(request, status, err) {
            if(status == "timeout") {
               alert("can't reach the server");
            }
        }
    });

EDIT AFTER COMMENTS: You can check How do I check if file exists in jQuery or JavaScript? in your case this sould work as expected:

//Initialize the var as global so you can use it in the function below
var goto_url = "http://www.mywebsites.com/foo.html"; 

$.ajax({
    url:goto_url;
    type:'HEAD',
    error: function()
    {
        //do something if the gile is not found
    },
    success: function()
    {
         document.location = goto_url; //docuemnt.location will redirect the user to the specified value.
    }
});

this will actually check if the file exist.. If it can't connect to the file it will not be able to find it.. If he can find the file, he obviouly was able to connect, so either case you win.

cheers!

I do not need to navigate back, but in the onClick attribute will be any location. My problem is not just to alert the user but in case the page is not reachable, inhibit the navigation. If the connection is ok, go to the setted url; — overcomer, Oct 26 '12 at 11:21
So basicly you just want to check if a location is available and send the user there if it is? — Louis Loudog Trottier, Oct 27 '12 at 05:25
On the second answer, you soudl encapsulate the $.ajax() function inside your function on an event handler to trigger it. Wasn't sure witch suited your needs, so i omitted it. AND 2nd answer replace the 1st one ;) — Louis Loudog Trottier, Oct 27 '12 at 05:39
I think the best is to check the timeout, becouse if the page is reachable but the mysql is down, the solution http://stackoverflow.com/questions/3646914/how-do-i-check-if-file-exists-in-jquery-or-javascript do not works. — overcomer, Oct 29 '12 at 10:51

score 2 · Accepted Answer · answered Apr 29 '15 at 17:00

Thanks to your answer I found the solution to the problem. This check if the server is achievable before launching a script and redirect. That's the code:

 function checkConnection(u,s){
    $.ajax({
        url:u,
        cache:false,
        timeout:3000,
        error: function(jqXHR, textStatus)
        {
            alert("Request failed: " + textStatus ); 
        },
        success: function()
        {
            eval(s);   
        }
    });       
 }      

    $(document).ready(function() {
        // part of the function that checks buttons with redirect
        // for any button that contain a redirect on onClick attribute ("window.locarion=")
        $("input[type=button]").each(function(){
            var script = $(this).attr("onClick"); 
            var url = "my_url";
            var position = script.indexOf("window.location") ;  
            if (position >= 0) {       // case of redirect           
               url = "\'"+url+"\'"; // that's my url
               script = "\""+script+"\""; // that's the complete script
               $(this).attr("onClick","checkConnection("+url+","+script+")");
            }
        });
        // part of the function that checks the submit buttons (using ajaxForm plugin)
        var options = {
                    error: function() {                    
                        alert("Message Error");   
                    },
                    target: window.document,
                    replaceTarget: false,
                    timeout:   3000
                };
                $("form").ajaxForm(options);
    });

I hope that this will be usefull.

score 1 · Answer 3 · answered Oct 26 '12 at 10:21

1

You should use the callback of the jQuery Ajax function to catch the problem of a server not available.

You cant check the servers' availibility without making a request to it.

answered Oct 26 '12 at 10:21

pfried

5,000
2
38
71

That's what i'm trying to do but i don't get any result in this situation. Can you give me some clues? – overcomer Oct 26 '12 at 11:13
I think what Louis posted is my answer in detail. Look at his implementation – pfried Oct 26 '12 at 11:17

score 0 · Answer 4 · answered Oct 26 '12 at 10:22

You're trying to see if there is a connection. AFAIK the only way for actually checking if a server is reachable is making a request to that server.

Set a timeout of a reasonably small amount of time (let's say 3s) and make a request. If you get a timeout error, then there is no connection, else you're good to send the form.

Check Availability of a page before loading it, using jquery/ajax

4 Answers4