Question

I am doing a simple ajax call, and it is working fine. However, the response is slow, and I do not want the user to click twice thinking it is not working. Therefore, I would like to show a message such as “Converting please wait” before receiving the response. Here is the code that I have tried:

function postajax()
{
    document.getElementById('linksarea').innerHTML = "<img src='images/waiting.gif'> Converting please wait...";

    var xmlhttp;

    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            document.getElementById("links").innerHTML=xmlhttp.responseText;
    }

    var links = window.document.getElementById('linksarea').value;

    xmlhttp.open("POST","ajax.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("links="+links+"&username=xxxx");
}

here is the html section thay i’m trying to modify

<div id="memberright">
  Convert the links here<br />
  <textarea name="links" id="linksarea" cols="65" rows="10"></textarea><br />
  <input type="button" id="buttonr" onclick="postajax()" value="Convert">
</div>

<div id="ajax">
  <div id="links">
  </div>
</div>

Answer 1

You are currently using:

document.getElementById('linksarea').innerHTML = "<img src='images/waiting.gif'>
   Converting please wait..."; 

which should set the innerHTML to the loading image and display a loading message. At a later point you are taking the value of that element:

window.document.getElementById('linksarea').value;

The value attribute will only exist on an input, which would not have innerHTML.

Try the following, assuming #links is the element you’re wanting to modify, which according to your question’s title you are trying to change the value of a div element twice:

document.getElementById("links").innerHTML = "<img src='images/waiting.gif'>
       Converting please wait..."; 

// or if you have another div with an ID of `linksarea`

document.getElementById("linksarea").innerHTML = "<img src='images/waiting.gif'>
       Converting please wait..."; 

I could be completely wrong without seeing your HTML but that looks as though that could be your problem. You need to make sure you are trying to modify the correct element.

Update:

Using jQuery:

function postajax(){
    $('#links').html("<img src='images/waiting.gif'> Converting please wait...");

    var params = "links=" + $('#linksarea').val() + "&username=xxxx";

    $.ajax({
        url: "ajax.php",
        type: "POST",
        data: params,
        success: function(result){
            $('#links').html(result)
        }
    }); 
}

As demonstrated, jQuery greatly simplifies executing AJAX requests with the $.ajax() function. I would suggest that you understand what is happening behind the scenes before utilizing a library so that you are able to fully understand verything. This will help encourage much more positive behavior and tendencies.