Remember that twit I made regarding my creation of a web app without using a PHP framework? It was because of this project that made me to try out JQuery Modal Dialogs.

My purpose of having a modal dialog in the web app is to let the users have somewhere to refer to if in case they forgot or don’t remember what exact value to provide.

Please let me show you how I did it to the web app.

JQuery Modal Form

In the web app, the user may click the link to the “Reason Codes Dictionary” and the window shows up and the user will be provided the list of reason codes with their corresponding description.

My code for it is like this:

$("div#dialog a").click(function(){
a_id = $(this).attr('id');
textbox = "#" + $("#textbox_01").val() + "_textbox";
$(textbox).attr("value",a_id);
$("#dialog").dialog("close");
});

$(" :input").change(function() {
$("div#dialog #textbox_01").attr("value",$(this).attr("id"));

url = "admin/verify.php?search=reasoncode&reason_code=" +   $(this).attr("value");

$.get(url,function(data) {
if(data == "") {
alert("Sorry, there's no such reason code in our database.");
textbox = "#" + $("#textbox_01").val();
$(textbox).attr("value","");
$(textbox).addClass("bad_reason_code");
}else {
textbox = "#" + $("#textbox_01").val();
$(textbox).removeClass("bad_reason_code");
}
});
});

Note: I remember in my previous work, (where Ajax and JQuery didn’t exist yet,), our team used JSRS.