IOL Techniques for Dialog box

I am not very familiar with JS but want a dialog box to popup when a user edits a field. Dialog box allows the user to type in value, close and reloads page. Typed in value updates the field in the record. PLEASE HELP

The code for my button is:

[iol] & "moduleDashboard.js" & [/iol]
&"<a class='QBU_Button6 Vibrant Success' style='margin: 3px'" &
" data-rid='" & [Record ID#] & "'" &
">Button 6</a>"

Code for my page moduleDashboard.js

   (function(){   (function(){
  var dbid = "appID"; 
var dbidDashboard = "TableID"; 
var apptoken = "AppToken"; 
$.ajaxSetup({data: {apptoken: apptoken}});

//Button 6 Click Handler  $("a.QBU_Button6").on("click", function(event) {
    var rid = this.dataset.rid;   
    var markup = "<h1>Filter Project</h1>";   
markup += "<div id='QBU_Expiry'></div>";
    var $mydialog = $("<div>").html(markup).dialog({     
title: "Filter Project",     
modal: true,     
autoOpen: false,     
width: 400,     
resizable: false,     
buttons: {       
UPDATE: function() {  var projectnum = prompt("Enter a project number: ", "");         
$.post(dbidDashboard, {           
act: "API_EditRecord",           
rid,           
_fid_20: projectnum         
}).then(function(xml) {           
document.location.reload(true);               
});         
},         
CANCEL: function() {           
$(this).dialog("close");         
}                 
},       
open: function(event, ui) {         
$mydialog.html(markup);       
},        close: function(event, ui) {         
//do something       
}      });     
$mydialog.dialog("open");
    });
  });
})();