Conditionally Changing the Display Attribute of an HTML Button based on the Result of a jQuery Get() Request

Question

Conditionally Changing the Display Attribute of an HTML Button based on the Result of a jQuery Get() Request

Hello there!

Recently, I encountered an interesting problem while working on a browser extension that I have been tinkering with for quite some time. The issue revolves around the dilemma of showing or hiding a specific button based on an 'if statement' within a jQuery get() function. Unfortunately, due to the asynchronous nature of the get() function, the variable defined by it returns as 'undefined' before the button and other elements have finished loading. One potential solution could involve using a setTimeout() to delay retrieving the value after a certain period of time. However, this workaround is not ideal since the display of the button should be determined by the completion (either success or failure) of the get statement, much like how onload is crucial for the body of an HTML document.

Do you have any suggestions?

javascript html jquery css

Answer 1

Answer №1

Establish a promise with a callback function that will execute your designated function upon completion of the request. For further information about promises, visit the Mozilla Docs.

function fetchData(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Perform XHR operations.
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);

    xhr.onload = function() {
      // Validate the status of the request.
      if (xhr.status == 200) {
        // Fulfill the promise with the response data.
        resolve(JSON.parse(xhr.response));
      } else {
        // Reject with an appropriate error message based on the status.
        reject(Error(xhr.statusText));
      }
    };
    // Handle network errors
    xhr.onerror = function() {
      reject(Error("Network Error"));
    };
    // Initiate the request.
    xhr.send();
  });

}

let targetUrl = 'yoururlhere';

fetchData(targetUrl).then(function(response) {
  displayContent(response);
}, function(error) {
  console.error("An error occurred:", error);
});

Answer 2

Establish a promise with a callback function that will execute your designated function upon completion of the request. For further information about promises, visit the Mozilla Docs.

function fetchData(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Perform XHR operations.
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);

    xhr.onload = function() {
      // Validate the status of the request.
      if (xhr.status == 200) {
        // Fulfill the promise with the response data.
        resolve(JSON.parse(xhr.response));
      } else {
        // Reject with an appropriate error message based on the status.
        reject(Error(xhr.statusText));
      }
    };
    // Handle network errors
    xhr.onerror = function() {
      reject(Error("Network Error"));
    };
    // Initiate the request.
    xhr.send();
  });

}

let targetUrl = 'yoururlhere';

fetchData(targetUrl).then(function(response) {
  displayContent(response);
}, function(error) {
  console.error("An error occurred:", error);
});

Answer 3

Answer №2

If my solution doesn't work, feel free to share your code here for further assistance. Take a look at the example below to get an idea of how to handle your specific scenario. Both success and error alerts will be triggered after the return on the GET call.

var jqxhr = $.get( "example.php", function() {
  alert( "success" );
})
.fail(function() {
  alert( "error" );
})

Answer 4

If my solution doesn't work, feel free to share your code here for further assistance. Take a look at the example below to get an idea of how to handle your specific scenario. Both success and error alerts will be triggered after the return on the GET call.

var jqxhr = $.get( "example.php", function() {
  alert( "success" );
})
.fail(function() {
  alert( "error" );
})

Answer 5

Answer №3

If you are facing a similar issue, I have found a straightforward solution using async and await.

The button will be displayed as block when a is greater than b (a=10, b=9).

var a = 10;
var b = 9;
if (a>b) {
async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    myResolve('block');
  });
  document.getElementById("demo").style.display = await myPromise;
}

myDisplay();
}else{
myResolve('none');
}

#demo{
display: none;
}

<h1 id="demo">Hi</h1>

The button will be displayed as none when a is less than or equal to b (a=8, b=9).

var a = 8;
var b = 9;
if (a>b) {
async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    myResolve('block');
  });
  document.getElementById("demo").style.display = await myPromise;
}

myDisplay();
}

#demo{
display: none;
}

<h1 id="demo">Hi</h1>

Answer 6

If you are facing a similar issue, I have found a straightforward solution using async and await.

The button will be displayed as block when a is greater than b (a=10, b=9).

var a = 10;
var b = 9;
if (a>b) {
async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    myResolve('block');
  });
  document.getElementById("demo").style.display = await myPromise;
}

myDisplay();
}else{
myResolve('none');
}

#demo{
display: none;
}

<h1 id="demo">Hi</h1>

The button will be displayed as none when a is less than or equal to b (a=8, b=9).

var a = 8;
var b = 9;
if (a>b) {
async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    myResolve('block');
  });
  document.getElementById("demo").style.display = await myPromise;
}

myDisplay();
}

#demo{
display: none;
}

<h1 id="demo">Hi</h1>

Conditionally Changing the Display Attribute of an HTML Button based on the Result of a jQuery Get() Request

Answer №1

Answer №2

Answer №3

Similar questions

Tips for arranging five images side-by-side in a row

transferring a variable between two Ajax functions

Guide to creating dynamic borders around your PHPexcel output

Seeking assistance with implementing setInterval and clearInterval functionalities in JavaScript programming

The functionality of Express JS routers is experiencing issues

Is there a sleek way to create a JavaScript function that can provide two string values as output?

Calculating the total of selected values in Checkboxes and Selectors using KnockoutJS

A step-by-step guide on showcasing three post images in separate divs at the bottom of a webpage with Reactjs and Css

Is there a method to retrieve fresh data in HTML without the need to restart the server?

Sleek dialog sliding animation with Svelte

Issue with deactivating attribute through class name element retrieval

Turning a multi-row table header into div elements using Javascript

Trigger the D3 component to re-render in React after a state change occurs in the parent component

What is the best way to refresh the script located within the head tag of an index.html file in an Angular

"Optimizing Pagination in AngularJS: A Guide to Fixing

What's the most effective method for identifying a pattern within a string of text?

What is the best way to create subpages within a survey?

Unable to locate phonepe.intentsdk.android.release:IntentSDK:2.4.1 while integrating React Native

Having trouble with loading multiple HTML files simultaneously in two webviews causing flickering?

Mongodb failing to recognize the concat function