How to format jEditable field value after it cancels

Question

I am trying to use the "onreset" option but I am having issues. I have a field that is meant for users to enter 10 numbers only. I want to make the 10 numbers display in a phone format ie. (310) 490-1235. So far I can do this, and the HTML of the field gets set to 3104901235 while the text is (310) 490-1235, but when a user cancels or goes to another field, the current field closes, and displays the HTML (3104901235) instead of the text (310) 490-1235.

I have a function set in the "onreset" option for it to set the text but it doesnt apply.

//Phone field
// Set the fields 10 digits to phone format
set_phone();

function isNumeric(value) {
  if (value == null || !value.toString().match(/^[-]?\d*\.?\d*$/)) return false;
  return true;
}
$('.edit-phone').editable('<?php echo base_url(); ?>home_resume/builder/ajax_save_field', {
 onsubmit: function(settings, td) {
  rm_class();
      var input = $(td).find('input');
        var original = input.val().trim();
        if (isNumeric(original) && original.length == 10) {
          $('#notification-saved').miniNotification({opacity: 1.0});
            return true;
        } else {
          $('#notification-phone').miniNotification({opacity: 1.0});
            input.css('background-color','#c00').css('color','#fff');
            return false;
        }
    }, 
         type      : 'text',
         cancel    : 'Cancel',
         onreset : function(value, settings){
                    $(this).closest("li").removeClass("active");
                    // Since the HTML is now just 10 digits, set it back to phone format with
                    set_phone();
                  },
         style     : 'display: inline',
         select    : 'true',
         submit    : 'OK',
         event     : "edit-phone",
         indicator : '<img src="<?php echo base_url(); ?>themes/resume-builder/images/fb-indicator.gif">'
     });
$(".edit-phone-trigger").on("click", function() {
  strip_phone();
  $(this).closest("li").addClass('active');  
  var edit_id = $(this).attr("id").split("-");
    $('#' + edit_id[1]).trigger("edit-phone");
    return false;
});

// Format the 10 digit phone number
function set_phone() {
    var num = $("#7").text();
    var num_1 = num.slice(0,3);
    var num_2 = num.slice(3,6);
    var num_3 = num.slice(6,11);
    var new_num = "("+num_1+") "+num_2+"-"+num_3;
    $("#7").text(new_num);
}

// Remove characters from phone number input
function strip_phone() {
  var pnum = $("#7").text();
  pnum = pnum.replace(/\(/g, "");
  pnum = pnum.replace(/\)/g, "");
  pnum = pnum.replace(/-/g, "");  
  pnum = pnum.replace(/\s/g, "");
  $("#7").html(pnum);
}

Answer 1

You can try using the data and callback options for changing the way the text is displayed inside the input, this way you also avoid the need to use your custom event.

data will be called when the element is first clicked and can be used to alter the text before editing. Here you strip the phone to just numbers to be displayed on the input.

callback will run after after the form has been submitted. Here you format the submitted content to a phone number and change the text of the original element. (Inside function this refers to the original element)

$('.edit-phone').editable('<?php echo base_url();?>home_resume/builder/ajax_save_field', {
    type      : 'text',
    cancel    : 'Cancel',
    style     : 'display: inline',
    select    : 'true',
    submit    : 'OK',
    event     : 'click',
    indicator : '<img src="<?php echo base_url(); ?>themes/resume-builder/images/fb-indicator.gif">',
    data      : function(value, settings) {
                    return strip_phone(value);
                },
    callback : function(value, settings){
                    $(this).text(set_phone(value));
                }
    onsubmit  : function(settings, td) {
                    rm_class();
                    var input = $(td).find('input');
                    var original = input.val().trim();
                    if (isNumeric(original) && original.length == 10) {
                        $('#notification-saved').miniNotification({opacity: 1.0});
                        return true;
                    } else {
                        $('#notification-phone').miniNotification({opacity: 1.0});
                        input.css('background-color','#c00').css('color','#fff');
                        return false;
                    }
                },
});

// Format the 10 digit phone number
function set_phone(text) {
    var num = text;
    var num_1 = num.slice(0,3);
    var num_2 = num.slice(3,6);
    var num_3 = num.slice(6,11);
    var new_num = "("+num_1+") "+num_2+"-"+num_3;
    return new_num;
}

// Remove characters from phone number input
function strip_phone(text) {
  var pnum = text;
  pnum = pnum.replace(/\(/g, "");
  pnum = pnum.replace(/\)/g, "");
  pnum = pnum.replace(/-/g, "");  
  pnum = pnum.replace(/\s/g, "");
  return pnum;
}

Note that I updated your set_phone() and strip_phone() functions to return the value instead of setting it directly to the element so they can be called dynamically