Dialoguing with web events

draw.js

rule draw {
    select when explicit directory
    pre {
        html = <<
            <div><form name="byufb_directory_search" id="byufb_directory_search">
                Last name: <input type="text" name="byufb_last" class="inputtext" />
                First name: <input type="text" name="byufb_first" class="inputtext" />
                <input type="button" value="Search" class="uiButton" onclick="byu_fb_submit();"/>
            </form></div>
            <div id="byufb_dir_res">&nbsp;</div>
        >>;
    }
    {
        emit <|
            byu_fb_app = KOBJ.get_application("a163x104");
            byu_fb_app.page_params.kynetx_app_version = "dev";
            byu_fb_submit = function() {
                $K("#byufb_dir_res").show();
                $K("#byufb_dir_res").prepend('<img src="' + spinner_url + '" /><br />');
                first = $K("[name=byufb_first]").val();
                last = $K("[name=byufb_last]").val();
                byu_fb_app.raise_event("directory_searched", {"byu_fb_first": first, "byu_fb_last": last});
            };
        |>;
        byufb:addsection("Directory", html);
    }
}

handle.js

rule handle_submit {
    select when web directory_searched
    pre {
        first = event:param("byu_fb_first");
        last = event:param("byu_fb_last");
        results = datasource:person_lookup("#{last}/#{first}");
        names = results.pick("$..result_set");
        all_names = listnames(names, 0);
        html = <<
            <div id="byufb_dir_res">
                <strong>Search results for "#{last}, #{first}":</strong><br /><br />
                #{all_names}                    
            </div>
        >>;
    }
    {
        replace_html("#byufb_dir_res", html);
    }
}