CODEWITHSUNDEEP
javascriptjquery
hippolas_cage
hippolas_cage

Reputation: 71

Automatically refresh content of collapsible after opening it

I want to automatically refresh content of a collapsible when it is opened. How could I manage that?

I have this code down below:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <a href="#demo" class="btn btn-info" data-toggle="collapse">Read more</a>
  <div id="demo" class="collapse">
    This needs to be refreshed everytime it shows up.
  </div>
</div>

</body>
</html>

Upvotes: 0

Views: 83

Answers (2)

Max
Max

Reputation: 1345

To do this, you'll want to use AJAX, Asynchronous Javascript and XML.

If possible, create a separate page, collapsable.html, which contains just the contents of the collapsable div.

Then, add an event listener to the button.

document.querySelector("a[data-toggle='collapse']").addEventListener("click", function() {
    output("Refreshing content...");
    var xmlhttp = new XMLHttpRequest(); // AJAX
    xmlhttp.open("GET", "collapse.html"); // Replace with your filename here
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState === 4) { // If finished loading
            if(xmlhttp.status === 200) { // If loaded correctly
                output(xmlhttp.responseText);
            } else {
                output("Error loading content -- check your internet connection");
        }
    }
    xmlhttp.send();
});

You'll need to define output, which I used to set the contents of the div.

Currently, it overrides the contents to "Refreshing content...", makes the internet request using AJAX, and then if all goes well, replaces "Loading" with the actual contents. If you don't want to override the existing contents while it's loading, you can remove the output("Refreshing content...") line.

function output(content) {
    document.querySelector("#demo").innerHTML = content;
}

You can also load the full page again, also using AJAX, but then you may need to parse the response data.

Read more about AJAX -- https://developer.mozilla.org/en-US/docs/AJAX

Upvotes: 1

A. Iglesias
A. Iglesias

Reputation: 2675

If you want to trigger the refresh just when the show process start you can use show.bs.collapse event...

$('#demo').on('show.bs.collapse', function () {
  // Put here your code for refreshing the div content (ajax call, etc.)
});

If you want to trigger the refresh when div is totally visible (the transition has finished ), then you have the shown.bs.collapse event...

$('#demo').on('shown.bs.collapse', function () {
  // Put here your code for refreshing the div content (ajax call, etc.)
});

In case you need it, you have the equivalent events hide.bs.collapse and hidden.bs.collapse to use when the div is hidden.

I hope it helps

Upvotes: 2

Related Questions