MB34
commented
9 years ago OK, I believe I have it working like I want now. I'm posting it here so people can learn from it. The only issue I've seen is that when setting the HTML value in the HTML, it sets the value for the control but doesn't format it the way it needs to like when you edit it.
/**
Phone editable input.
Internally value stored as {"ctry: "US", ac: "512", num: "3496105", ext: ""}
@class phone
@extends abstractinput
@final
@examples
<a href="#" id="phone" data-type="phone" data-pk="1">1-512-3496105-</a>
<script>
$(function(){
$('#phone').editable({
url: '/post',
title: 'Enter Phone Number',
value: { // set from user data
{
ctry: "US",
ac: "512",
num: "3496105"
ext: ""
}
}
});
});
</script>
<a href="#" id="phone" data-type="phone" data-pk="1" data-hasext="1">1-512-3496105-1234</a>
<script>
$(function(){
$('#phone').editable({
url: '/post',
title: 'Enter Phone Number',
value: { // set from user data
{
ctry: "1",
ac: "512",
num: "512-3496105",
ext: "1234"
}
}
});
});
</script>
**/
(function ($) {
"use strict";
/********************************************************************************************/
// This code gets the list of countries from my MVC application and loads the Country Select
/********************************************************************************************/
// var Countries = {};
/*
$.get("/Home/getCountries", function (data) {
Countries = data;
});
*/
// var x = 0;
var CountrySelect = "";
for(var i=0;i<Countries.length;i++){
var x = Countries[i];
CountrySelect += "<option value=\""+x.country_code+"\">"+x.country_name+"</option>";
}
/********************************************************************************************/
var Phone = function (options) {
this.init('phone', options, Phone.defaults);
};
//inherit from Abstract input
$.fn.editableutils.inherit(Phone, $.fn.editabletypes.abstractinput);
$.extend(Phone.prototype, {
/**
Renders input from tpl
@method render()
**/
render: function() {
this.$input = this.$tpl.find('input,select');
},
/**
Default method to show value in element. Can be overwritten by display option.
@method value2html(value, element)
**/
value2html: function(value, element) {
if(!value) {
$(element).empty();
return;
}
var html = $('<div>').text(this.lookupcountry(value.ctry)).html() + '-' +
$('<div>').text(value.ac).html() + '-' +
$('<div>').text(value.num).html() + '-' +
$('<div>').text(value.ext).html();
$(element).html(html);
},
/**
Gets value from element's html
@method html2value(html)
**/
html2value: function(html) {
/*
you may write parsing method to get value by element's html
e.g. "1-512-3496105-1234" => {"ctry: "1", ac: "512", num: "3496105", ext: "1234"}
but for complex structures it's not recommended.
Better set value directly via javascript, e.g.
.editable({
value: {ctry: "1",
ac: "512",
num: "3496105",
ext: "1234"
}
});
*/
var number = html.split('-');
if(number.length > 0) {
if(number.length == 5) {// has dash in number
var _num = number[2] + number[3];
var _ext = number[5];
} else {
var _num = number[2];
var _ext = number[4];
}
return {"ctry": number[0], "ac": number[1], "num": _num, "ext": _ext};
} else {
return null;
}
},
/**
Converts value to string.
It is used in internal comparing (not for sending to server).
@method value2str(value)
**/
value2str: function(value) {
var str = '';
if(value) {
for(var k in value) {
str = str + k + ':' + value[k] + ';';
}
}
return str;
},
/*
Converts string to value. Used for reading value from 'data-value' attribute.
@method str2value(str)
*/
str2value: function(str) {
/*
this is mainly for parsing value defined in data-value attribute.
If you will always set value by javascript, no need to overwrite it
*/
return str;
},
/**
Sets value of input.
@method value2input(value)
@param {mixed} value
**/
value2input: function(value) {
if(!value) {
return;
}
this.$input.filter('[name="ctry"]').val(value.ctry);
this.$input.filter('[name="ac"]').val(value.ac);
this.$input.filter('[name="num"]').val(value.num);
this.$input.filter('[name="ext"]').val(value.ext);
},
/**
Returns value of input.
@method input2value()
**/
input2value: function() {
return {
ctry: this.$input.filter('[name="ctry"]').val(),
ac: this.$input.filter('[name="ac"]').val(),
num: this.$input.filter('[name="num"]').val().replace('-', ''),
ext: this.$input.filter('[name="ext"]').val()
}
},
lookupcountry: function(value) {
for(var i=0;i<Countries.length;i++){
var x = Countries[i];
if(x.country_code == value) {
return x.phone_cc;
}
}
return 0;
},
/**
Activates input: sets focus on the first field.
@method activate()
**/
activate: function() {
this.$input.filter('[name="ctry"]').focus();
},
/**
Attaches handler to submit form in case of 'showbuttons=false' mode
@method autosubmit()
**/
autosubmit: function() {
this.$input.keydown(function (e) {
if (e.which === 13) {
$(this).closest('form').submit();
}
});
}
});
Phone.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
tpl: '<div class="editable-phone"><label><span>Country: </span><select id="ctry" name="ctry" style="width: 100%;">' + CountrySelect + '</select></label></div>'+
'<div class="editable-phone"><label><span>Area Code: </span><input type="text" name="ac" class="input-small"></label></div>' +
'<div class="editable-phone"><label><span>Number: </span><input type="text" name="num" class="input-small"></label></div>' +
'<div class="editable-phone"><label><span>Ext (opt): </span><input type="text" name="ext" class="input-mini"></label></div>',
inputclass: ''
});
$.fn.editabletypes.phone = Phone;
}(window.jQuery));
I’m trying to create a widget for phone numbers and want to add an option called hasext. This would allow a third field named Extension to be defined in the widget vs. just the original 2, Country Code and Number.
We have Business Phone numbers that have an extension and Cell Phone numbers that do not and I want to support both.
How do I add new options like this?
Below is my widget. Can anyone help out?