jQuery json data not formatting

Question

OK. jQuery is definitely not my strength. In fact I'm a total noob to both jQuery and js in general. I'm trying to simply format a phone number and display it but all I'm getting is the original 10 digit number without the formatting. Here is the code:

function phoneFormat(phone) {
        phone = phone.replace(/[^0-9]/g, '');
        phone = phone.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
        return phone;
    }
function editUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('setTitle','Prospect Details');
            $('#fm').form('load',row);
            url = 'update_user.php?id='+row.id;
            $('#dia_name').html(row.Name);
            var phone = $('#dia_phone').html(row.Phone);
            phone = phoneFormat(phone);
            $('#dia_phone').text(phone);
        }
    }


<div id="dlg" class="easyui-dialog" style="width:500px;height:280px;padding:10px 20px"
        closed="true" buttons="#dlg-buttons">
    <div id="dia_name" class="ftitle">Prospect Name</div>
    <div id="dia_phone" class="rtitle">Prospect Phone</div>
    <form id="fm" method="post" novalidate>
        <div class="fitem">
            <label>Prospect Name:</label>
            <input name="Name" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Phone:</label>
            <input name="Phone">
        </div>
        <div class="fitem">
            <label>Email:</label>
            <input name="Email" class="easyui-validatebox" validType="email">
        </div>
        <div class="fitem">
            <label>Received Datetime:</label>
            <input name="rcvd_datetime" class="easyui-validatebox" required="true">
        </div>
    </form>
</div>

The data is coming from a pretty simple php script that is definitely passing the data back properly. The problem I'm having is really only the formatting of the phone number. The number comes from the DB query as a pure 10 digit string and I'm wanting to display it as (555) 555-5555 format.

Thanks in advance for any help. Again I'm extremely new to javascript in general so please be gentle.

Answer 1

.html only returns data when you do not provide it an argument, take a look at the .html reference to see the proper usage

so:

var phone = $('#dia_phone').html(row.Phone);

does not return anything to phone because you are passing an argument it would need to be

var phone = $('#dia_phone').html();

what you want is:

var phone = phoneFormat(row.Phone);
$("#dia_phone").html(phone);