js newbie scratchin head.

[d0uble_hel1x]

hi all,

i'm trying to encapsulate a login dialog box in frmLogin but the async "Control" doesn't seem to trigger. pointers appreciated.

thx!


function frmLoginPost()
{
//var UserID = this.getEl('login_username').value ;
var UserID = document.getElementById('login_username').value ;
var PW = document.getElementById('login_pw').value;

if (UserID=="") return;

var url = "?username=" + UserID + "&password=" + PW;

var callback={

success:function(i){
if(i.responseText == 'OK'){
dialog.hide();
LoadApp();
return;
}

document.getElementById('login_error_msg').innerHTML = i.responseText;
},

failure:function(response){
if(response.responseText !== undefined)loginDlg.show();
}
};

YAHOO.util.Connect.asyncRequest('GET', url, callback, url);
};

function frmLoginShow(fromWhere)
{
function Control(){

alert("hehe");

var postData = "?username=" + "" + "password=" + "";

var callback={

success:function(i){
if(i.responseText != 'OK') alert(i.responseText);
else { dialog.hide(); LoadApp();}
},

failure:function(response){
if(i.responseText !== undefined)loginDlg.show();}
};

YAHOO.util.Connect.asyncRequest('POST', sUrl, callback,postData);
}

if(!this.dialog){
this.dialog = new Ext.BasicDialog(
Ext.id(),
{autoCreate: true, title: _('login_title'),modal:false,width:300,height:180,shadow:true,resizable: false,proxyDrag: false,shim: true}
);

LoginTemplate.overwrite(this.dialog.body.id,
{ 'login_title': _('login_title'),
'login_username':_('login_username'),
'login_pw':_('login_pw')
});

//this.dialog.addButton('Login', this.Control,this.dialog); // why is this not working???
this.dialog.addButton('Login', frmLoginPost,this.dialog);

this.dialog.addKeyListener(27, this.dialog.hide, this.dialog);
this.dialog.addKeyListener(13, frmLoginPost, this.dialog);
};

this.dialog.show(fromWhere);

};

[tryanDLS]

Are you using Firebug to break on errors? You may have a scoping issue - it's kind of hard to tell from your code. In the future, post code in side code tags so that it's readable.

[HoldemJacket]

I agree that this is a scoping issue. You have not declared Control as part on any object/scope. You declared it inside a function, not an Object. Therefore, Control is in the global scope, not part of 'this'.

If you change this.Control to just Control, I bet it will work. I'm guess in this is not the way you intended it to work, you should declare Control inside a scope/object.

[d0uble_hel1x]

thanks guys...it surely was a scoping issue. i got it working now. im not really accustomed to javascripting but i think i'm using JSON style coding. the "this" keyword doesn't quite work. need to use "frmLogin" instead and im not sure why is it so.




var frmLogin = {

dlg : null,
template : null,

GetText : function(){

LoginTemplate.overwrite(frmLogin.dlg.body.id,
{ 'login_title': _('login_title'),
'login_username':_('login_username'),
'login_pw':_('login_pw')
});
},

Init : function(){
frmLogin.template = new Ext.Template(
'<form id="frmLogin">' +

'<table width="100%" border="0" cellpadding="0" cellspacing="0">' +
'<tr>' +
'<td width="100" align="right">' + '<label for="login_username">{login_username}</label> ' + '&nbsp;</td>' +
'<td align="left">' + '<input id="login_username" name="login_username" type="text">' + '&nbsp;</td>' +
'</tr>' +

'<tr>' +
'<td align="right">' + '<label for="login_pw">{login_pw}</label>' + '&nbsp;</td>' +
'<td>' + '<input id="login_pw" name="login_pw" type="password">' + '&nbsp;</td>' +
'</tr>' +
'</table>' +
'<div id="login_error_msg"><small></small></div>' +

'</form>'
);
LoginTemplate.compile();

frmLogin.dlg = new Ext.BasicDialog(
Ext.id(),
{autoCreate: true, title: _('login_title'),modal:false,width:300,height:180,shadow:true,resizable: false,proxyDrag: false,shim: true}
);

frmLogin.GetText();
frmLogin.dlg.addButton('Login', frmLogin.Control,frmLogin.dlg);
frmLogin.dlg.addKeyListener(13, frmLogin.Control, frmLogin.dlg);
frmLogin.dlg.addKeyListener(27, frmLogin.dlg.hide, frmLogin.dlg);
},

Control : function() {

var UserID = document.getElementById('login_username').value ;
var PW = document.getElementById('login_pw').value;

if (UserID=="") return;

var url = "?username=" + UserID + "&password=" + PW;

var callback={

success:function(i){
if(i.responseText == 'OK'){
frmLogin.dlg.hide();
LoadApp();
return;
}

document.getElementById('login_error_msg').innerHTML = i.responseText;
},

failure:function(response){
if(response.responseText !== undefined)loginDlg.show();
}
};

YAHOO.util.Connect.asyncRequest('GET', url, callback, url);

return;

var formObject = document.getElementById('frmLogin');
YAHOO.util.Connect.setForm(formObject);
var cObj = YAHOO.util.Connect.asyncRequest('POST', "/", callback);

},

Show : function(fromWhere) {
/*if(!frmLogin.dlg){
alert("strange things can happen");
frmLogin.dlg = new Ext.BasicDialog(
Ext.id(),
{autoCreate: true, title: _('login_title'),modal:false,width:300,height:180,shadow:true,resizable: false,proxyDrag: false,shim: true}
);

frmLogin.GetText();
frmLogin.dlg.addButton('Login', frmLogin.Control,frmLogin.dlg);
frmLogin.dlg.addKeyListener(13, frmLogin.Control, frmLogin.dlg);
frmLogin.dlg.addKeyListener(27, frmLogin.dlg.hide, frmLogin.dlg);
};*/
frmLogin.dlg.show(fromWhere);
}
}

[tryanDLS]

If you're new to JS, you should check out this thread and the associated links. They will help you get a handle on OO Javascript, scoping, etc.
http://extjs.com/forum/showthread.php?t=441