Update the content of a div twice simultaneously

Question

Update the content of a div twice simultaneously

My AJAX call is currently working fine, but the response time is slow. To prevent users from clicking multiple times while waiting for a response, I want to display a message like "Converting please wait" before the data is received. Below is the code that I have implemented:

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");
}

This is the HTML section where I am making the modifications:

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

javascript ajax

Answer 1

Answer №1

Your current usage is as follows:

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

This code snippet sets the innerHTML to display a loading image along with a message indicating that conversion is in progress. Later on, you attempt to retrieve the value of the element using:

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

The value attribute is typically found in an input element and not within innerHTML. Therefore, this approach may encounter issues.

If you are looking to modify a div element identified by #links, consider using the following code snippet based on your question's context:

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

// Alternatively, if there is another div with ID 'linksarea'

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

It seems like the root cause could be targeting the wrong element for modification without observing your HTML structure. Ensure the correct element is being modified to address this issue effectively.

Update:

If you prefer using jQuery library, simplify AJAX requests by adopting the following approach:

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)
        }
    }); 
}

jQuery streamlines AJAX operations through functions like $.ajax(). It is advisable to grasp the underlying mechanisms before leveraging libraries to maximize comprehension and promote positive coding practices.

Answer 2

Your current usage is as follows:

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

This code snippet sets the innerHTML to display a loading image along with a message indicating that conversion is in progress. Later on, you attempt to retrieve the value of the element using:

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

The value attribute is typically found in an input element and not within innerHTML. Therefore, this approach may encounter issues.

If you are looking to modify a div element identified by #links, consider using the following code snippet based on your question's context:

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

// Alternatively, if there is another div with ID 'linksarea'

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

It seems like the root cause could be targeting the wrong element for modification without observing your HTML structure. Ensure the correct element is being modified to address this issue effectively.

Update:

If you prefer using jQuery library, simplify AJAX requests by adopting the following approach:

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)
        }
    }); 
}

jQuery streamlines AJAX operations through functions like $.ajax(). It is advisable to grasp the underlying mechanisms before leveraging libraries to maximize comprehension and promote positive coding practices.

Answer 3

Answer №2

To enhance the functionality of the onreadystatechange function, consider including an additional if statement. The state value that corresponds to "loading" is '1'. You can refer to this resource for guidance: example website. Your code should resemble the following:

  xmlhttp.onreadystatechange=function()
  {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
          document.getElementById("links").innerHTML=xmlhttp.responseText;
      }
      else if (xmlhttp.readyState==1 && xmlhttp.status==200)
      {
        document.getElementById('linksarea').innerHTML = "<img src='images/waiting.gif'> Converting please wait...";
      }
  }

Answer 4

To enhance the functionality of the onreadystatechange function, consider including an additional if statement. The state value that corresponds to "loading" is '1'. You can refer to this resource for guidance: example website. Your code should resemble the following:

  xmlhttp.onreadystatechange=function()
  {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
          document.getElementById("links").innerHTML=xmlhttp.responseText;
      }
      else if (xmlhttp.readyState==1 && xmlhttp.status==200)
      {
        document.getElementById('linksarea').innerHTML = "<img src='images/waiting.gif'> Converting please wait...";
      }
  }

Update the content of a div twice simultaneously

Answer №1

Answer №2

Similar questions

Issue with module exports not being defined in IE11/Edge

Difficulty encountered when trying to use Bootstrap tooltip with Bootstrap icon

I require assistance in clearing the text field under specific circumstances

React Intersection Observer Triggering Memory Leaks

Error: Unable to locate module 'child_process' in the context of NextJS + Nightmare

Issue with publishing npm package using yarn package manager

When the form is submitted, the text input vanishes and then the page is refreshed using AJAX technology

Enhancing AJAX store in ExtJS with custom headers

Can REST calls be initiated when the CSP is unable to be modified from the default-src: 'none'?

Reduce the use of javascript by incorporating NPM specifically after publishing instead of during the building process

When it comes to utilizing jQuery for the mobile view, how many jQuery libraries are recommended for optimal performance?

"Trouble with Angular's http.get method failing to retrieve data from MySQL through Node

Why does the value become "Undefined" once it is passed to the controller function?

Dynamic value updates using jQuery input type formulas

Determine distinct items in an array that match a predefined criteria

Getting a surprise image from the collection

What are the pros and cons of passing an imported object from a parent component to its children as props versus directly importing that object within the children components?

Retrieve all references to child elements in React

Is there a way to retrieve the content of an element using JavaScript?

The best approach to incorporating interactive animation in next.js