CODEWITHSUNDEEP
jqueryajax
jsuissa
jsuissa

Reputation: 1762

Approach to save ajax requests in jQuery pending user action

The script below is part of a specialized text editor and works well. It sends an ajax request after 'blur'.

Because it contacts the database so frequently we want to compile these requests and then send them all at once via ajax when the user hits a 'SAVE' button.

I was wondering if there is a standardized approach for something like this in jQuery?

$(document).ready(function() {

  $("#resume_holder").ready(function () {

  $('#resume_holder').contents().find('[contenteditable]').on("focus", function(e) {
      var $this = $(this);
      $this.data('before', $this.html());

  }).on("blur", function(e) {

     var $this = $(this);
     var before = $this.data('before');
     var txt = $(e.target).closest("section").html();
     var id = $(e.target).closest("section").attr('id');

                $.ajax({
                        type : 'POST',
                        url : '<?php echo site_url('resume/edit_resume_ajax'); ?>',
                        dataType: "html",
                        context : $(this),
                        data: {
                            edit_id: id,                                
                            edit_value: txt,
                            edit_before: before
                        },
                        success : function(msg){
                        console.log(msg);
                        },
                        error: function(msg){
                        console.log(msg);
                        }
                    }); 
                }); 
            });

 });    
    </script>

Upvotes: 0

Views: 251

Answers (1)

MrCode
MrCode

Reputation: 64526

For me the options would be:

  1. HTML5 Local Storage. If the request queue/data needs to be retained even if the page is refreshed/changed then I would go with HTML5 Local Storage. See here or have a search.

  2. If it's a list/array of data just store it in a Javascript variable until the save button is clicked, if the data doesn't need to persist after a page request.

  3. Instead of doing the ajax call onblur(), detect the onblur() and record the period of time between the previous onblur(), if it's over X minutes then do the save ajax request.

Upvotes: 1

Related Questions