Saving Bootstrap Data - Modals, Tags and Notifications

Question

Saving Bootstrap Data - Modals, Tags and Notifications

Check out my code snippets on this example/demo page.

 

/* Messages Modal */
$(document).ready(function(){
    var informer = $("#messageInformer a");
    var refreshBadge = function(messageCount) {
        var badge = informer.find(".badge");
        
        if (messageCount > 0) {
            if (!badge.length) {
                informer.text("Messages ");
                informer.append("<span class=\"badge\">" + messageCount + "</span>");
            } 
            
            else {
                badge.text(messageCount);
            }
        } 
        
        else {
            // informer.text("No messages");
            informer.text("Messages ");
            informer.append("<span class=\"badge\">" + messageCount + "</span>");
        }
    };

    var buildMessage = function(message) {
        var htmlMessage = "<div class=\"alert fade in\">";
        
        htmlMessage += "<a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-lable=\"close\" data-id=\"" + message.id + "\">&times;</a>";
        htmlMessage += "<strong>" + message.title + "</strong>";
        htmlMessage += "<p>" + message.text + "</p>";
        
        return htmlMessage;
    }

    // Messages To Display
    var messages = [
        { 
        id: "1", 
        title: "Title 01:",
         text: "<ul> \
         <li>List Item</li> \
         <li>List Item</li> \
         </ul> \
         <br/> \
<p>Paragraph</p> \
<p>E-Mail: <a href=\"mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d7dfd3dbdef2d3d6d6c0d7c1c19cd1dddf">[email protected]</a>\"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27424a464e4b67349434542344542e40444a">[email protected]</a></a></p> \
        " 
        },
        { 
        id: "2", 
        title: "Title 02:", 
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat velit et vehicula vulputate." 
        },
        { 
        id: "3", 
        title: "Title 03:", 
        text: "Quisque viverra nisl ut arcu eleifend aliquam. Ut faucibus efficitur nibh, sit amet tincidunt est volutpat non." 
        }
    ];

    refreshBadge(messages.length);

    informer.on("click", function(e) {
        e.preventDefault();
        var modalBody = $(".modal-body");
        modalBody.empty();
        for (var i = 0; i < messages.length; i++) {
            modalBody.append(buildMessage(messages[i]));
        }
        
        if (messages.length == 0) {
            $('.modal-body').text('There are no more messages to display.');
        }
    });

    $("body").delegate(".alert .close", "click", function() {
        var messageId = $(this).data("id");
        // AJAX 
        messages = messages.filter(function(el) {
            return el.id != messageId;
        });
        
        if (messages.length == 0) {
            // $("#messagesModal").modal("hide");
            $('.modal-body').text('There are no more messages to display.');
        }
        
        refreshBadge(messages.length);
    });
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<p data-toggle="modal" data-target="#messagesModal" id="messageInformer"><a href="#">Messages <span class="badge"></span></a>
</p>

<!-- Modal -->
<div class="modal fade" id="messagesModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Messages</h4>
      </div>

      <div class="modal-body">
      </div>

      <div class="modal-footer">
        <div class="col-md-8 pull-left">
        </div>

        <div class="col-md-4">
          <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

Is there a way I can ensure the data of the modal, badge, and alerts is preserved when the page is refreshed?

For instance, if one of the three messages is deleted and the page is refreshed, only two messages should remain available.

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

I will not be making any edits to my response because the previous answer was for a sample purpose, aimed at those looking to implement sessionStorage. Here, I will address your specific issue by providing additional code that should resolve your problem.

In this solution, we are utilizing the sessionStorage technique to manage previously removed elements within a single tab. For testing purposes, I have not included a fiddle link, so you will need to copy the provided code and run it in your local environment.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head>

<script>
 // JavaScript code here
</script>

    <!-- Body content goes here -->

</html>

Answer 2

I will not be making any edits to my response because the previous answer was for a sample purpose, aimed at those looking to implement sessionStorage. Here, I will address your specific issue by providing additional code that should resolve your problem.

In this solution, we are utilizing the sessionStorage technique to manage previously removed elements within a single tab. For testing purposes, I have not included a fiddle link, so you will need to copy the provided code and run it in your local environment.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head>

<script>
 // JavaScript code here
</script>

    <!-- Body content goes here -->

</html>

Answer 3

Answer №2

If you want to store data for your webpage, you have the option of using either sessionStorage or localStorage.

localStorage is used for storing data without an expiration date.

sessionStorage is used for storing data that will be lost when the browser tab is closed, essentially lasting only for one session.

Instead of making changes to your code directly, I'm providing a sample code snippet below that can guide you on how to achieve your desired functionality:

All you need to do is understand the logic behind the code and implement it in your own script. Good luck!

<html>
<head>
<script src=" http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function(){

    var id = sessionStorage.getItem("id");
    if(id != null){
        var temp = id.split(',');   
        $.each(temp, function(index, value){
                        $('#'+value).hide();
        });
    }
});

function deleteItem(obj, object){

var id = sessionStorage.getItem("id");

if(id == null){
    sessionStorage.setItem("id", obj);
}else{
    var str = id.split(',').join();
    str = str + ','+ obj
    sessionStorage.setItem("id", str);
}
$(object).parent().hide();
}
</script>

</head>
<body>

<h2 id="1">Header 1 &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="deleteItem('1', this)">X</a></h2>
<h2 id="2">Header 2 &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="deleteItem('2', this)">X</a></h2>
<h2 id="3">Header 3 &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="deleteItem('3', this)">X</a></h2>

</body>
</html>

Answer 4

If you want to store data for your webpage, you have the option of using either sessionStorage or localStorage.

localStorage is used for storing data without an expiration date.

sessionStorage is used for storing data that will be lost when the browser tab is closed, essentially lasting only for one session.

Instead of making changes to your code directly, I'm providing a sample code snippet below that can guide you on how to achieve your desired functionality:

All you need to do is understand the logic behind the code and implement it in your own script. Good luck!

<html>
<head>
<script src=" http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function(){

    var id = sessionStorage.getItem("id");
    if(id != null){
        var temp = id.split(',');   
        $.each(temp, function(index, value){
                        $('#'+value).hide();
        });
    }
});

function deleteItem(obj, object){

var id = sessionStorage.getItem("id");

if(id == null){
    sessionStorage.setItem("id", obj);
}else{
    var str = id.split(',').join();
    str = str + ','+ obj
    sessionStorage.setItem("id", str);
}
$(object).parent().hide();
}
</script>

</head>
<body>

<h2 id="1">Header 1 &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="deleteItem('1', this)">X</a></h2>
<h2 id="2">Header 2 &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="deleteItem('2', this)">X</a></h2>
<h2 id="3">Header 3 &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="deleteItem('3', this)">X</a></h2>

</body>
</html>

Saving Bootstrap Data - Modals, Tags and Notifications

Answer №1

Answer №2

Similar questions

Can Big Data flow on Mongo DB be effectively simulated?

Increase the count for each category with the help of JavaScript

What is the best way to resize SVG graphics effectively?

Can the parcel bundler dist folder be customized for decoration?

Testing Ajax code encounters error

What is the best method for submitting a form individually using jQuery?

Leveraging ruby/watir/page_object for testing a jQuery UI autocomplete feature (AJAX)

Could there be a coding issue stopping <div class="rating"> from aligning more centrally along the horizontal axis on the screen?

Having trouble locating the componentwillunmountafterInteraction in the React Native deck swiper

Ways to display an image overlay on hover using sprite sheets

Struggling to maintain context with axios in React despite diligent use of arrow functions

The function addClass() seems to be malfunctioning

Error: The `Field` component encountered a failed prop type validation due to an invalid prop `component` after upgrading to MUI version

What is the best way to extract text/html that appears between two consecutive <input> tags?

The Protractor test scripts are running with lightning speed, outpacing the webpage loading time

Mastering regular expressions in TypeScript

Troubles with CSS Child Hover, Rotation, and Clipping in Pie Chart styling

Retrieve a specific HTML using the returned jQuery AJAX POST request

A comprehensive guide on creating a package that combines an href link with an <li> element

Simple way to automatically reload your script using an npm server