JavaScript file not included for custom control when dynamically loaded on QPanel
Thu, 05/20/2010 - 14:43
I have a custom control which is basically a masked edit text box. When it is directly included on a QForm it works perfectly. However, I just created a QPanel with the control and loaded that Panel dynamically and the Control no longer works as a masked edit box....it is just a regular text box.
After some investigation, I realized that the only difference is the JavaScript file was not included on the page.
So, does anyone know how I can get that script to be included on the page? Any functions maybe that preloads the panel?
I'm using version 1.1
I've also tested the QPhoneTextBox plugin and the same thing is happening. Works fine directly on a form, but JavaScript not included when QPanel loaded dynamically.
I tried creating the same Panel with the Masked Textbox during Form_Create and the JavaScript did load and the control worked perfectly.
So this is an actual problem with loading Panels dynamically.
I'm going to see if I can make a change to QForm so allow for adding scripts manually or maybe even have it look through the file first to add any scripts that could be needed.
If anyone has any hints or suggestions, I would love to hear them.
I have several QPanels that are loaded dynamically with an included javascript file (i.e. this->AddJavascriptFile()) and have not had any problems... could you post some code?
Also - which version of QCubed are you seeing this issue on?
Using version 1.1.1
I'm including the main page here. During Form_Create() I call a function which loads the "Find" panel. If on that Panel, the masked text box control exists, then the "Edit" panel's masked text box works fine. If, however, the "Find" panel has only a regular textbox declared for the same control, then there is no masked functionality on the "Edit" panel.
At one point I simply declared an "Edit" panel within the Form_Create function which I later commented out because I decided to go ahead an use a masked textbox on the "Find" panel which worked just as well.
<?php
require('../includes/prepend.inc.php');
require('qcubed.inc.php');
require(__DOCROOT__ . __AA_PANELS__ . '/CustomerFindPanel.class.php');
require(__DOCROOT__ . __AA_PANELS__ . '/CustomerEditPanel.class.php');
require(__DOCROOT__ . __AA_PANELS__ . '/NotesEditDataGrid.class.php');
class CustomerFindForm extends QForm {
protected $pnlCustomer;
protected $pnlNotes;
protected $objCustomer;
protected $btnSave;
protected $btnCancel;
protected $lblErrorMsg;
protected function Form_Create() {
$this->pnlCustomer = new QPanel($this);
$this->pnlCustomer->AutoRenderChildren = true;
$this->pnlNotes = new QPanel($this);
$this->pnlNotes->AutoRenderChildren = true;
$this->btnSave = new QButton($this);
$this->btnSave->Text = 'Save';
$this->btnSave->AddAction(new QClickEvent(), new QAjaxAction('btnSave_Click'));
$this->btnSave->Display = false;
$this->btnCancel = new QButton($this);
$this->btnCancel->Text = 'Cancel';
$this->btnCancel->AddAction(new QClickEvent(), new QAjaxAction('btnCancel_Click'));
$this->btnCancel->Display = false;
$this->lblErrorMsg = new QLabel($this);
$this->lblErrorMsg->Display = false;
// do this just so the freaking JavaScript will load
//$pnlTemp = new CustomerEditPanel($this, null);
$this->LoadCustomerFindPanel();
}
protected function btnSave_Click() {
try {
$this->GetControl('pnlCustomerEdit')->Save();
$this->LoadCustomerFindPanel();
} catch (QCallerException $objExc) {
$this->lblErrorMsg->Text = $objExc->getMessage();
}
}
protected function btnCancel_Click() {
$this->LoadCustomerFindPanel();
}
public function LoadNotesPanel() {
$this->pnlNotes->RemoveChildControls(true);
new NotesEditDataGrid($this->pnlNotes, $this->objCustomer->Id, 'pnlNotes');
}
public function CustomerFindPanel_MethodCallBack($intCustomerId) {
$this->objCustomer = Customerinfo::Load($intCustomerId);
$this->LoadCustomerEditPanel($this->objCustomer);
}
public function LoadCustomerFindPanel() {
$this->pnlCustomer->RemoveChildControls(true);
$this->pnlNotes->RemoveChildControls(true);
$this->btnSave->Display = false;
$this->btnCancel->Display = false;
$this->lblErrorMsg->Text = '';
new CustomerFindPanel($this->pnlCustomer, 'CustomerFindPanel_MethodCallBack', 'pnlCustomerFind', false);
}
public function LoadCustomerEditPanel() {
$this->pnlCustomer->RemoveChildControls(true);
$this->btnSave->Display = true;
$this->btnCancel->Display = true;
new CustomerEditPanel($this->pnlCustomer, $this->objCustomer, 'pnlCustomerEdit');
$this->LoadNotesPanel();
}
}
CustomerFindForm::Run('CustomerFindForm', __DOCROOT__ . __AA_FORMS__ . '/customer_find.tpl.php');
?>
Your QForm looks fine, what about your CustomerFindPanel? If it works when you have a masked box on the other panel, but not when that box is just a textbox... I don't know.
Are you using Firebug?
When the panel loads does the response show that it is including your javascript file?
you should see something like this at the bottom:
<command>qc.loadJavaScriptFile("billpanel.js", function() {qc.regCA(new Array("c8","c11","billPanel","commentPanel")); });</command>check to see how your javascript is rendering for the masked textbox and try profiling to see if the onload/click/change events firing.
You've probably checked already, but I am asking anyway :)