How can I display a warm and welcoming message when a task is finished?

Question

How can I display a warm and welcoming message when a task is finished?

I need help with my CodeIgniter application that is running some heavy tasks in the back end. I want to display a status message or box while the app is executing AJAX commands, and then clear it once the task is complete. Can anyone suggest what terms I should search for to find a solution for this?

Thank you.

Edit: Here is the current jQuery/AJAX code snippet I am using...

  $('#availVLANS').click(function()  {
  $(this).attr("disabled","disabled");
  $.ajax({
    url:"<?php echo site_url('controller/methodABC/');?>",
    type:'POST',
    dataType:'json',
    success: function(returnDataFromController) {
    var htmlstring;
    var submitFormHTML;
    htmlstring = "<br><br><B>To reassign the port to a new vlan, click on a VlanId below and then click on the OK button</B><br><table class='table table-bordered table-striped'>";
    htmlstring = htmlstring + "<th>VlanId</th><th>Name</th>";
    for(i = 0; i < returnDataFromController.length; i++) {
        //alert(returnDataFromController[i].VlanId);
        htmlstring = htmlstring +  "<tr><td><a href=>"+returnDataFromController[i].VlanId+"</a></td><td>"+ returnDataFromController[i].Name+"</td></tr>";   

    }
    submitFormHTML = "<form method='post' accept-charset='utf-8' action='" + BASEPATH + "index.php/switches/changeportvlan/"+ $('#ip').val() +"/" + $('#hardwaremodel').val() +"/" + $('#port').val() + "'><input type='text' name='newVlanID' id='newVlanID' style='width:5em;height:1.5em'/>&nbsp;&nbsp;<button type='submit' class='btn' name='saveVlan' id='saveVlan' style='width:10em;height:2em'>Reassign Vlan</button></form>";
    //alert(submitFormHTML);
    $('#clientajaxcontainer').html(htmlstring);
    $('#newvlanform').html(submitFormHTML);                     

  }
});
$(this).removeAttr("disabled");
  });

php ajax codeigniter

Answer 1

Answer №1

To implement a progress indicator using an animated GIF image, create an absolutely positioned DIV on top of the page. Ensure that you include an invisible overlay DIV to prevent clicks on underlying interface elements. Here's an example structure:

╔════════════════════╗
║  #progress-overlay ║
║ ╔════════════════╗ ║
║ ║ #progress-indicator
║ ╚════════════════╝ ║
╚════════════════════╝

The #progress-overlay serves as the background for the indicator, giving a LightBox2 effect with a central progress display box. You can find animated GIFs at:

Place your progress element at the top level of the document structure, before other container DIVs. This ensures that when the #progress-overlay is absolutely positioned, it appears above all other content.

<html>
<head>
....
</head>
<body>
<div id="progress-overlay">
    <div id="progress-indicator">
        <img src="images/myprogress.gif" /> Please Wait...
    </div>
</div><!--progress-overlay-->
<div id="website-wrapper">
.... website content goes here ...
</div>
</body>
</html>

The #progress-overlay is initially hidden and displayed when needed, like this:

#progress-overlay{
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: 0.2;
}

#progress-indicator{
position: relative;
margin: 0 auto;
top: 40%;
width: 200px;
height: 50px;
}

You can use JQuery to show the progress indicator dynamically:

$(document).ready(function(){
    $('#progress-overlay').hide();
    });
function showProgressIndicator()
{
    $('#progress-overlay').show();
}

Answer 2

To implement a progress indicator using an animated GIF image, create an absolutely positioned DIV on top of the page. Ensure that you include an invisible overlay DIV to prevent clicks on underlying interface elements. Here's an example structure:

╔════════════════════╗
║  #progress-overlay ║
║ ╔════════════════╗ ║
║ ║ #progress-indicator
║ ╚════════════════╝ ║
╚════════════════════╝

The #progress-overlay serves as the background for the indicator, giving a LightBox2 effect with a central progress display box. You can find animated GIFs at:

Place your progress element at the top level of the document structure, before other container DIVs. This ensures that when the #progress-overlay is absolutely positioned, it appears above all other content.

<html>
<head>
....
</head>
<body>
<div id="progress-overlay">
    <div id="progress-indicator">
        <img src="images/myprogress.gif" /> Please Wait...
    </div>
</div><!--progress-overlay-->
<div id="website-wrapper">
.... website content goes here ...
</div>
</body>
</html>

The #progress-overlay is initially hidden and displayed when needed, like this:

#progress-overlay{
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: 0.2;
}

#progress-indicator{
position: relative;
margin: 0 auto;
top: 40%;
width: 200px;
height: 50px;
}

You can use JQuery to show the progress indicator dynamically:

$(document).ready(function(){
    $('#progress-overlay').hide();
    });
function showProgressIndicator()
{
    $('#progress-overlay').show();
}

Answer 3

Answer №2

To utilize the onreadystatechange event, check out this resource: http://www.example.com/ajax/xmlhttprequest_onreadystatechange

Answer 4

To utilize the onreadystatechange event, check out this resource: http://www.example.com/ajax/xmlhttprequest_onreadystatechange

Answer 5

Answer №3

In case you are using jQuery, the approach would involve displaying a div containing a message and/or spinner.

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  }
});

Answer 6

In case you are using jQuery, the approach would involve displaying a div containing a message and/or spinner.

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  }
});

Answer 7

Answer №4

If you are working with jQuery, here is a suggestion for a solution:

The jQuery code:

$(document).ready(function(){
    $("#click_button").click(function(){
        var url = "controller/method"
        var data = {info: "details"}
        // Show message before sending POST request
        $("#show_message").fadeIn();
        $.post(url, data, function(response){
            if(response.success){
                // If POST request is successful, hide the message 
                $("#show_message").fadeOut();
            }
            else console.log("An error occurred");
        }, 'json');
    });
});

The HTML structure:

<!-- Initially hidden message -->
<div id='show_message' style='display:none;'>
    Please wait.
</div>

The Controller code:

class The_controller extends CI_Controller{
    function the_method(){
        $params = $this->input->post();
        process_task($params);
        if(task_completed_successfully) return json_encode(array("success" => true));
        else return json_encode(array("success" => false));
    }
}

Answer 8

If you are working with jQuery, here is a suggestion for a solution:

The jQuery code:

$(document).ready(function(){
    $("#click_button").click(function(){
        var url = "controller/method"
        var data = {info: "details"}
        // Show message before sending POST request
        $("#show_message").fadeIn();
        $.post(url, data, function(response){
            if(response.success){
                // If POST request is successful, hide the message 
                $("#show_message").fadeOut();
            }
            else console.log("An error occurred");
        }, 'json');
    });
});

The HTML structure:

<!-- Initially hidden message -->
<div id='show_message' style='display:none;'>
    Please wait.
</div>

The Controller code:

class The_controller extends CI_Controller{
    function the_method(){
        $params = $this->input->post();
        process_task($params);
        if(task_completed_successfully) return json_encode(array("success" => true));
        else return json_encode(array("success" => false));
    }
}

How can I display a warm and welcoming message when a task is finished?

Answer №1

Answer №2

Answer №3

Answer №4

The jQuery code:

The HTML structure:

The Controller code:

Similar questions

Sending a form using Ajax and jQuery

Attempting to integrate information from an external API source

How to implement caching using XMLHttpRequest?

Scrolling to an id within dynamically loaded content using jQuery after an ajax request

Storing information in a database using Ajax in the Yii Framework

Is there a method to ensure the month remains unchanged?

CodeIgniter throwing a date error when it is being hosted

I'm wondering why this isn't working properly and not displaying the closing form tag

The issue of broken images in the Azure Blob module for Drupal

The model attribute is returned by Ajax

A step-by-step guide on incorporating universal CSRF tokens using JQuery AJAX

Loading of local resources is restricted in the Apache web server

jQuery behaving erratically following deployment to the testing server

PHP - Sending a JSON response from a class

Technique for dynamically incorporating Csrf tokens prior to every ajax request in CakePHP

Laravel has encountered a delay in processing

Uploading images simultaneously while filling out a form

Working with the WYSIWYG field in a custom module in Magento

Tips for using a JavaScript function to navigate to a specific division (<div>) on an HTML page

What steps should I take to refresh my Partial View after a successful form submission?