UI Page Help - Button click does nothing

[kchorny]

I have nearly 0 experience with UI Pages, but now I need one to meet a requirement.   So I started by copying the reset_password page and modifying it to suit.   However, clicking the Submit Authorization Request button does nothing.   Below are my HTML and Client script.   Where am I going wrong?

<g:ui_form>
<!-- used in exactly one place -->
<style>
div.sd_auth {
width: 20em;
margin: 1em;
padding: 1em;
padding-top: 0;
border: 1px solid lightgrey;
border-radius: 4px;
}
div.sd_auth div {
margin-top: 1em;
}
div.sd_auth input {
width: 100%;
}
div.sd_auth label {
font-weight: bold;
}
.welcome_content {
margin-left: 1em;
margin-right: 1em;
}
/* make breadcrumbs happy */
.welcome_content A.breadcrumb {
padding: 0 .5em;
margin-bottom: 0;
background-color: transparent;
border-radius: 0;
}
</style>
<div class="sd_auth">
<h3>${gs.getMessage('Authorize Service Desk Account')}</h3>
<div>
<label class="control-label" for="user">${gs.getMessage('Company ID')}</label>
<input id="user" type="text" name="company_id" value="" class="form-control" size="40" autocomplete="off" />
</div>
<div>
<label class="control-label" for="email">${gs.getMessage('Authorization Code')}</label>
<input id="email" type="text" name="auth_code" value="" class="form-control" size="40" autocomplete="off" />
</div>
<div>
<label class="control-label" for="email">${gs.getMessage('Email address')}</label>
<input id="email" type="text" name="email" value="" class="form-control" size="40" autocomplete="off" />
</div>
<div>
<label class="control-label" for="email">${gs.getMessage('First Name')}</label>
<input id="email" type="text" name="first_name" value="" class="form-control" size="40" autocomplete="off" />
</div>
<div>
<label class="control-label" for="email">${gs.getMessage('Last Name')}</label>
<input id="email" type="text" name="last_name" value="" class="form-control" size="40" autocomplete="off" />
</div>
<div>
<label class="control-label" for="email">${gs.getMessage('Personal 4-digit PIN')}</label>
<input id="email" type="text" name="pin" value="" class="form-control" size="40" autocomplete="off" />
</div>
<div class="text-center">
<button id="reset" class="btn btn-primary" type="button" onclick="checkAuth(); return false;">Submit Authorization Request</button>
</div>
<div class="text-center">
<button id="cancel" class="btn btn-default" type="button" style="margin-right:5px" onclick="window.history.back()">Cancel</button>
</div>
</div>
</g:ui_f
orm>

var ok_output = {
msg: getMessage("You are now authorized to send emails to xxx@xxx.com or phone the Service Desk."),
type: 'info'
};
var email_invalid_output = {
msg: getMessage("The email address you entered is not associated to the company you selected.   Please contact the service desk if you feel you've received this message in error."),
type: 'error'
};
var not_match_output = {
msg: getMessage("Either the Account ID or Authorization Code you entered is incorrect. Please try again."),
type: 'error'
};
function checkAuth() 
{
gs.log('Checking authorization...');
var sysparm_company_id = gel('company_id').value;
var sysparm_email = gel('email').value;
var sysparm_first_name = gel('first_name').value;
var sysparm_last_name = gel('last_name').value;
var sysparm_auth_code = gel('auth_code').value;
var sysparm_pin = gel('pin').value;
var ga = new GlideAjax('ServiceDeskAuthAjaxProcessor');
ga.addParam('sysparm_name', 'ServiceDeskAuth');
ga.addParam('sysparm_company_id', sysparm_company_id);
ga.addParam('sysparm_email', sysparm_email);
ga.addParam('sysparm_first_name',sysparm_first_name);
ga.addParam('sysparm_last_name',sysparm_last_name);
ga.addParam('sysparm_auth_code',sysparm_auth_code);
ga.addParam('sysparm_pin',sysparm_pin);
ga.getXML(ajaxResponse);
return false;
}
function ajaxResponse(response){
var answer = response.responseXML.documentElement.getAttribute("answer");
var output = "";
if(answer == "not_match_error"){
output = not_match_output;
}
else if(answer == "email_invalid_error"){
output = email_invalid_output;
}
else if (answer == 'ok')
output = ok_output;
outPutPrint(output);
}
function outPutPrint(output){
GlideUI.get().clearOutputMessages();
       GlideUI.get().addOutputMessage(output);
}
\

[Jon Barnes · Accepted solution]

you are using gs.log, which won't work (this will be causing an error and your code will not progress from there. instead of gs.log, use console.log() for testing out. open your javascript console and your messages / errors should show up there.

Also, I don't think you need the <g:ui_form> elements in your case. So you may want to try removing them and then remove the "return false;" part of your onclick event.   see if that gets you closer.

Also, where is your script defined? do you have it in the client script section?

[kchorny]

Yes, in the client script section of the UI Page.   And I'm calling it successfully now (thank for reminding me that I can't use gs.log in a client script!), but am not getting the inputted values here:

var sysparm_company_id = gel('company_id').value;  

var sysparm_email = gel('email').value;  

var sysparm_first_name = gel('first_name').value;  

var sysparm_last_name = gel('last_name').value;  

var sysparm_auth_code = gel('auth_code').value;  

var sysparm_pin = gel('pin').value;

Instead I get [object HTMLInputElement]

[Jon Barnes]

couple of things: The "id" attribute is the critical one when using gel. I see you have set the "name" attribute, which is fine, but "id" should be set to the appropriate value and they have to be unique across the entire html dom.

make sense?

[kchorny]

My first issue was the gs.log statement in the client script, so I've marked your answer as correct.

My next issue was the 'id' part of my div tags.   When I changed them to match the "name", I started seeing what I expected to see.   Sometimes you just have to sleep on these things, I guess!