CODEWITHSUNDEEP
javascriptphphtmlajax
LittleProgrammer
LittleProgrammer

Reputation: 27

Adding a loading text while an AJAX function is executing

I've been trying to add a loading text that would display while an AJAX function is being executed for a long while now, and all of my attempts (which includes using the ajaxStart and ajaxStop, among other things) haven't been working at all. Any help is appreciated!

Here is the webpage that the script in question is located on, if you want to see it in action. The way it works is that you enter in a url and the function will grab the meta tags of that URL.

Meanwhile, here is the relevant HTML, Javascript, and PHP:

HTML

<!DOCTYPE html>
    <html>
        <head>
            <title>Keywords Grabber</title>

            <script src="ajax.js"></script>
            <script>
                function display(content) {
                    document.getElementById("displaydiv").innerHTML = content;
                }
                window.onload = function () {
                    document.getElementById("btn1").onclick = function () {
                        var url = document.getElementById("txt1").value;
                        doAjax("metatags.php", "url=" + url, "display", "post", 0);
                    }
                }
            </script>


        </head>
        <body>
            http://<input type="text" id="txt1" value="" />
            <input type="button" id="btn1" value="Get Keywords" />
            <h3>Keywords Received:</h3>
            <div id="displaydiv"></div>



        </body>
    </html>

JavaScript

 function getXMLHttpRequest() {
    try {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e) {
            return new ActiveXObject("Msml2.XMLHTTP");
        }
    }
    catch(e) {
        return new XMLHttpRequest();
    }
}
function doAjax(url, query, callback, reqtype, getxml) {
    var myreq = getXMLHttpRequest();
    myreq.onreadystatechange = function () {
        if (myreq.readyState == 4) {
            if (myreq.status == 200) {
                var item = myreq.responseText;
                if (getxml == 1) item = myreq.responseXML;
                eval(callback + '(item)'); 
        }
    }
}
if (reqtype.toUpperCase() == "POST") {
    requestPOST(url, query, myreq);
    } else {
        requestGET(url, query, myreq);
    }
    }

function requestGET(url, query, req) {
    var myRandom = parseInt(Math.random()*99999999);
    if (query == '') {
        var callUrl = url + '?rand=' + myRandom;
    } else {
        var callUrl = url + '?' + query + '&rand=' + myRandom;
    }
    req.open("GET", callUrl, true);
    req.send(null);
}
function requestPOST(url, query, req) {
    req.open("POST", url, true);
    req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    req.send(query);
}

PHP

    <?php
$tags = @get_meta_tags('http://'.$_REQUEST['url']);
$result = $tags['keywords'];
if(strlen($result) > 0) {
    echo $result;
} else {
    echo "No keywords metatag is available.";
}
?>

Upvotes: 0

Views: 1750

Answers (1)

ArtisticPhoenix
ArtisticPhoenix

Reputation: 21681

something like this

 <div id="loading" style="display:none;">loading</div>

Javascript

 $('#loading').css('display', 'block');
 $.post(url, {}, function(data){
      $('#loading').css('display', 'none');
});

Upvotes: 1

Related Questions