PDA

View Full Version : ContentPanels/Tabs - setURL(PHP file) - Javascript



mangesh
1 Jan 2007, 3:24 AM
Hi,

Here's the problem:
1) I have implemented a grid (create_contract.php)
2) Works perfect when I access it from browser.
3) Created another screen using BorderLayout and ContentPanel combination.
4) This screen has several tabs.
5) One of the tabs points to "create_contract.php".
6) PROBLEM: This time it doesn't show the contents of grid. It doesn't even show an alert message that I have put onLoad of <body>.

Any Clues?

Thanks,
Mangesh

tryanDLS
1 Jan 2007, 9:46 AM
Just guessing since you didn't post any code. Did you check for typos - maybe an extra comma. Are you using a debugger? Firebug will usually stop if an error is encountered. If you can't solve the problem, post a link or a code sample so someone can take a look.

mangesh
1 Jan 2007, 12:58 PM
I did check for typos. Actually when I access create_contract.php directly i.e. without going thru the tabs, it displays the javascript alert but when I go thru the tabs (index.php/index.js - ) it doesn't display this message. However, I can see the HTML part fine. Nor can I see the grid which is usually displayed when I access create_contract.php directly.

Here is the code:
var Viewer = function(){
// a bunch of private variables accessible by member function
var layout, statusPanel, south;
var suggested, feeds;

return {
init : function(){
// initialize state manager, we will use cookies
YAHOO.ext.state.Manager.setProvider(new YAHOO.ext.state.CookieProvider());

// create the main layout
layout = new YAHOO.ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 25,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true,
autoScroll:false,
useShim:true,
cmargins: {top:0,bottom:2,right:2,left:2}
},
east: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true,
autoScroll:false,
useShim:true,
collapsed:true,
cmargins: {top:0,bottom:2,right:2,left:2}
},
south: {
split:false,
initialSize: 22,
titlebar: false,
collapsible: false,
animate: false
},
center: {
titlebar: false,
autoScroll:false,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true,
resizeTabs: true
}
});
// tell the layout not to perform layouts until we're done adding everything
layout.beginUpdate();
layout.add('north', new YAHOO.ext.ContentPanel('header'));

// initialize the statusbar
statusPanel = new YAHOO.ext.ContentPanel('status');
south = layout.getRegion('south');
south.add(statusPanel);

// create the add feed toolbar
var feedtb = new YAHOO.ext.Toolbar('myfeeds-tb');
feedtb.addButton({id:'add-feed-btn', text: 'Add Feed', className: 'add-feed', click: this.showAddFeed.createDelegate(this)});

layout.add('west', new YAHOO.ext.ContentPanel('feeds', {title: 'My Feeds', fitToFrame:true, toolbar: feedtb, resizeEl:'myfeeds-body'}));
layout.add('east', new YAHOO.ext.ContentPanel('suggested', {title: 'Suggested Feeds', fitToFrame:true}));

var tabContract = new YAHOO.ext.ContentPanel('contract', {title: 'Contracts'});
var tabTransTkt = new YAHOO.ext.ContentPanel('transportTkt', {title: 'Transport Tkt'});
var tabAEMSvcTkt = new YAHOO.ext.ContentPanel('aemsvcTkt', {title: 'AEMSvc Tkt'});
tabContract.setUrl("create_contract.php", null, true );
tabTransTkt.setUrl("transport_ticket.php", null, true );
tabAEMSvcTkt.setUrl("aemsvc_ticket.php", null, true );
layout.add('center', tabContract);
layout.add('center', tabTransTkt);
layout.add('center', tabAEMSvcTkt);
layout.getRegion('center').showPanel('contract');

// restore any state information
layout.restoreState();
layout.endUpdate();

// load the default feed - setTimeout for FireFox Mac?
setTimeout(function(){
// this.loadFeed('http://www.jackslocum.com/yui/feed/');
// this.changeActiveFeed('jvs');
}.createDelegate(this), 50);
},

showAddFeed : function(){
getEl('feed-url').dom.value = '';
getEl('add-title').radioClass('active-msg');
addFeed.alignTo('add-feed-btn', 'tl', [3,3])
addFeed.show();
},
};
}();
//YAHOO.ext.EventManager.onDocumentReady(Viewer.init, Viewer, true);
YAHOO.util.Event.on(window, 'load', Viewer.init, Viewer, true);



create_contract.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Create Contracts</title>

<script type="text/javascript" src="yui/build/utilities/utilities.js"></script>

<link rel="stylesheet" type="text/css" href="yui-ext/resources/css/reset-min.css" />
<link rel="stylesheet" type="text/css" href="yui-ext/resources/css/grid.css" />

<script type="text/javascript" src="yui-ext/yui-ext.js"></script>
<script type="text/javascript" src="js/store-grid.js"></script>
<script type="text/javascript" src="js/utility.js"></script>


<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/contract.css" />
</head>
<body onLoad="alert('here');">
<div id="main" class="main">
<h1>Create Contracts</h1>

<table align="center">
<tr>
<td colspan="3" align="center">
<div id="avlAEMs" class="info">
Total AEM's available: <span id="availAEMs"><?php echo ($availAEMS); ?></span>


AEM's confirmed this Week: 22
</div>
</td>
</tr>
<tr>
<td><span class="smallHdr">Available stores</span></td>
<td></td>
<td><span class="smallHdr">Select stores and click "Schedule" to create Contracts</span></td>
</tr>
<tr>
<td><div id="store-grid" class="ygrid-mso"></div></td>
<td><input type="button" id="btnTo" value=" ==> " style="valign:bottom"/></td>
<td><div id="contract-grid"></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td align="right">
<input type="button" name="btnSchedule" id="btnSchedule" value=" Schedule "/>
</td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td><span class="smallHdr">Pending Requests waiting to be confirmed</span></td>
<td></td>
<td><span class="smallHdr">Select pending requests and click "Confirm" to confirm Contracts</span></td>
</tr>
<tr>
<td><div id="pending-grid" class="ygrid-mso"></div></td>
<td><input type="button" id="btnTo2" value=" ==> "/></td>
<td><div id="confirm-grid"></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td align="right">
<input type="button" name="btnConfirm" id="btnConfirm" value=" Confirm "/>
</td>
</tr>
</table>





<div id="postResult" class="result"/>
</div>
</body>
</html>

tryanDLS
1 Jan 2007, 1:24 PM
I've haven't tried this, but don't you need to have loadScripts=true on the updateMangager to get the content you're loading into the tab to execute it's scripts?

mangesh
1 Jan 2007, 4:12 PM
OK. I will try that.
I got another hack though. I am associating another page "create_contract_loader.php" with the tab. Content of this page is something like this:

<iframe name="create_contract" id="create_contract" src="create_contract.php" style="width:100%;height:100%;border:none"/>

This hack seems to work fine an I am able to see the grid properly.
Don't know however if this is a right thing to do.

On a side note, if I have a grid with no data, IE thows an error on calling grid.render()

this.storeDM4 = new YAHOO.ext.grid.DefaultDataModel(data);

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
this.storeCM4 = new YAHOO.ext.grid.DefaultColumnModel([
{ header: "Store#",
width: 60,
sortable: true
},
{
header: "Vendor",
width: 85,
sortable: true,
editor: new yg.SelectEditor('vendor'),
renderer:this.formatVendor
},
{
header: "Pickup",
width: 80,
sortable: true,
renderer:formatDate,
editor: new yg.DateEditor({format: 'm/d/Y', minValue: today})
},
{
header: "DropOff",
width: 80,
sortable: true,
renderer:formatDate,
editor: new yg.DateEditor({format: 'm/d/Y', minValue: today})
},
{
header: "DieBold Date",
width: 90,
sortable: true,
renderer:formatDate,
editor: new yg.DateEditor({format: 'm/d/Y', minValue: today})
},
]);

this.storeDM4.setDefaultSort(this.storeCM4, 0, "ASC");

// create the Grid
this.storeGrid4 = new YAHOO.ext.grid.EditorGrid('confirm-grid', this.storeDM4, this.storeCM4 );

////// PROBLEM CODE in IE/////////////////
this.storeGrid4.render();
////// PROBLEM CODE in IE/////////////////


Thanks,
Mangesh

tryanDLS
1 Jan 2007, 5:22 PM
You have an extra comma at the end of your ColumnModel def.


{
header: "DieBold Date",
width: 90,
sortable: true,
renderer:formatDate,
editor: new yg.DateEditor({format: 'm/d/Y', minValue: today})
},
]);

mangesh
1 Jan 2007, 11:09 PM
Removed extra comma and the problem still persists. Notice that there is no data to be added in the grid at the beginning. I use addRow() to add data to the gris later on.

Note that it works great in FireFox without any changes.