PDA

View Full Version : Loading Scripts with AJAX



bspringston
16 Oct 2007, 11:35 AM
I'm creating a Ext.ContentPanel when a user clicks a menu item and setting the url parameter and autoCreate:true. The page I built has all of the script and html for that page (in my example a live search box). The page loads, but the search doesn't work. It's as though the scripts aren't being ran.

I removed the Ext.onReady piece so that it would run right away... but that doesn't work either.

If I load this page by itself, it works fine....

This is the code that creates the ContentPanel
<code>
<div id="o1_LANSA_11307">
<div>Order</div>
<div>
<div id="panel_content_o1_LANSA_11307" class="text-content"><a href="http://www.ibm.com">test link</a><br/><br/></div>
</div>
</div>


<script language="javascript" type="text/javascript">
//<![CDATA[

Ext.onReady(function() {

var panel_o1_LANSA_11307 = new Ext.ux.InfoPanel('o1_LANSA_11307', {
trigger:'title',
collapsed:true,
icon: '/IMAGES/wshImage/silk/icons/basket.png'
});

layoutWestNav.add(panel_o1_LANSA_11307);

panel_o1_LANSA_11307.body.on({

click: {
stopEvent: true,
delegate: 'a',
scope: null,

fn: function(e, target) {
mainLayout.beginUpdate();
mainLayout.add('center', new Ext.ContentPanel(Ext.id(), {
title:"Order",
fitContainer:true,
fitToFrame: true,
autoScroll: true,
closable: true,
autoCreate: true,
url: g_lxmlAR + '?webapp=ZM_TITL+webrtn=Main+p=' + g_lxmlPartition + '+lang=' + g_lxmlLang + '+',
}));
mainLayout.endUpdate();
} // end fn object

} // end click object

}); // end panel_01_LANSA_11307.body.on

}); // end Ext.onReady

//]]>
</script>
</code>



This is the page that is returned:
<code>
<html xmlns="http://www.w3.org/1999/xhtml"><head><title> </title><meta http-equiv="content-type" content="text/html; charset=ISO8859-1"/><link href="/IMAGES/style/std_style.css" type="text/css" rel="stylesheet"/><style type="text/css"> .hidden { display: none; } </style><script language="javascript" type="text/javascript">//<![CDATA[ var jslog = {debug:function(){},info:function(){}, warning:function(){}, error:function(){}, text:function(){}};var debug = function(){};if (location.href.match(/\?.*enablejslog/)){ document.write('<script type="text/javascript" src="/IMAGES/script/jslog.js">' + '<' + '/script>');} var g_lxmlServiceName = "ZM_TITL";var g_lxmlWAMName = "ZM_TITL";var g_lxmlWRName = "Main";var g_lxmlTs = "LANSA:XHTML";var g_lxmlAR = "/CGI-BIN/lansaweb";var g_lxmlPartition = "APP";var g_lxmlLang = "ENG";var g_lmxlSKMethod = "hidden";var g_lxmlSK = (g_lmxlSKMethod == "url") ? "" : null;var g_debug = "";var g_lw3Trace = "false";var g_checkNumeric = ("false" == "false") ? false : true;var g_lxmlTransform = "";var g_lweb_images_path = "/IMAGES";//]]></script><script language="javascript" src="/IMAGES/script/std_script_messages.js" type="text/javascript" charset="iso-8859-1"> </script><script language="javascript" src="/IMAGES/script/std_script.js" type="text/javascript"> </script><script language="javascript" src="/IMAGES/script/std_script_v2.js" type="text/javascript"> </script><script language="javascript" src="/IMAGES/script/rsi_script.js" type="text/javascript"> </script><script type="text/javascript" src="/IMAGES/script/extjs/adapter/ext/ext-base.js"> </script><script type="text/javascript" src="/IMAGES/script/extjs/ext-all-debug.js"> </script><script type="text/javascript" src="/IMAGES/script/extux/accordion/Ext.ux.InfoPanel.js"> </script><script type="text/javascript" src="/IMAGES/script/extux/accordion/Ext.ux.InfoPanel.GoogleSearch.js"> </script><script type="text/javascript" src="/IMAGES/script/extux/accordion/Ext.ux.Accordion.js"> </script><link rel="stylesheet" type="text/css" href="/IMAGES/script/extjs/resources/css/ext-all.css"></link><link rel="stylesheet" type="text/css" href="/IMAGES/script/extux/accordion/accordion.css"/><link rel="shortcut icon" href="/IMAGES/wshImage/silk/icons/application_side_list.png" type="image/png"/><link id="theme" rel="stylesheet" type="text/css" href="/IMAGES/script/extjs/resources/css/xtheme-default.css"/><script language="javascript" type="text/javascript">//<![CDATA[ if (trapError) window.onerror=trapError; new StdLocaleMgr(g_lxmlLang, false); function HandleEvent(WAM, WebRoutine, optForm, optTarget, optProtocol){ _HandleEvent(WAM, WebRoutine, g_lxmlTs, g_lxmlAR, g_lxmlPartition, g_lxmlLang, optForm, optTarget, optProtocol, g_lxmlSK, g_debug); }function HandleWebEvent(Process, Webevent, optForm, optTarget/*, fieldname1, fieldname2, etc...*/){ var stdAnchorVal = ""; _HandleWebEventEx(Process, Webevent, optForm, optTarget, g_lxmlAR, g_lxmlPartition, g_lxmlLang, g_debug, stdAnchorVal, arguments, 4);}function HandleServiceEvent(ServiceName, optForm, optTarget, optProtocol){ _HandleServiceEvent(ServiceName, g_lxmlTs, g_lxmlAR, g_lxmlPartition, g_lxmlLang, optForm, optTarget, optProtocol, g_lxmlSK, g_debug);}function HandleEventTarget(Form, Target, WebApp, WebRoutine, optProtocol){ _HandleEventTarget(Form, Target, g_lxmlTs, g_lxmlAR, g_lxmlPartition, g_lxmlLang, WebApp, WebRoutine, optProtocol, g_lxmlSK, g_debug);}function isValidNumber(theObj, integers, decimals, decimalPoint){ if (g_checkNumeric) { return _isValidNumber(theObj, integers, decimals, decimalPoint); } else { return true; }}//]]></script></head><body onload="SetFocus()"><h1 class="title"></h1><div align="center"><div class="messages" id="__std_x_message_elem" style="display:none;"><div class="messages_label">Messages:</div><div class="messages_list"><ul></ul></div></div><script language="javascript" type="text/javascript">//<![CDATA[ stdTransferMessages("", "__std_x_message_elem"); //]]></script></div><form name="LANSA" onsubmit="return _HandleDefaultSubmit(this)" action="/CGI-BIN/lansaweb?" method="post"><div class="hidden"><input type="hidden" name="_SERVICENAME" value="ZM_TITL"/><input type="hidden" name="_WEBAPP" value="ZM_TITL"/><input type="hidden" name="_WEBROUTINE" value="Main"/><input type="hidden" name="_PARTITION" value="APP"/><input type="hidden" name="_LANGUAGE" value="ENG"/><input type="hidden" name="_SESSIONKEY" value=""/><input type="hidden" name="_LW3TRCID" value="false"/></div><br clear="all"/><script language="javascript"> // Custom rendering Template var myresultTpl = new Ext.Template( '<div class="search-item">', '<h3><span>{ZTITLID}: {ZTITDSC}</span></h3>{Z1CATTXT}', '</div><br/>' ); </script><div class="hidden"></div><div style="width:500;"><div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div><div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3 style="margin-bottom:5px;">Search Titles</h3><input type="hidden" name="Z1TITLE.." value="0"/><input id="o1_LANSA_31336" name="o1_LANSA_31336" maxlength="200" size="40"/><script language="javascript" type="text/javascript">//<![CDATA[ var ds_LANSA_o1_LANSA_31336 = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: g_lxmlAR + '?webapp=ZM_TITL+webrtn=SearchTitle+p=' + g_lxmlPartition + '+lang=' + g_lxmlLang }), reader: new Ext.data.JsonReader({ root: 'results', totalProperty: 'count', id: 'ZTITLID' }, [ {name: 'ZTITLID', mapping: 'ZTITLID'}, {name: 'ZTITDSC', mapping: 'ZTITDSC'}, {name: 'ZTITAUT', mapping: 'ZTITAUT'}, {name: 'ZNOTEID', mapping: 'ZNOTEID'}, {name: 'Z1CATTXT', mapping: 'Z1CATTXT'}, {name: 'ZTITHOL', mapping: 'ZTITHOL'}, {name: 'ZTITCHL', mapping: 'ZTITCHL'}, {name: 'ZTITSCH', mapping: 'ZTITSCH'}, {name: 'ZTITALL', mapping: 'ZTITALL'}, {name: 'ZTITLPC', mapping: 'ZTITLPC'}, {name: 'ZTITLPP', mapping: 'ZTITLPP'}, {name: 'ZTITRTL', mapping: 'ZTITRTL'}, ]) }); var ComboBox_LANSA_o1_LANSA_31336 = new Ext.form.ComboBox({ store: ds_LANSA_o1_LANSA_31336, typeAhead: false, loadingText: 'Searching Titles...', width: 200, pageSize: 5, listWidth: 600, hideTrigger: false, tpl: myresultTpl, queryParam: 'z1query', queryDelay: 300, resizable: true, maxlength: 200, onSelect: function(record, index){ // override default onSelect to do redirect this.collapse();InsertHidden(document.LANSA, 'ZTITLID', record.get('ZTITLID') );HandleEvent('ZM_TITL', 'viewTitle', document.LANSA, '_blank');return false; } }); // apply it to the exsting input element ComboBox_LANSA_o1_LANSA_31336.applyTo('o1_LANSA_31336'); //]]></script><div style="padding-top:4px;">Live search requires a minimum of 4 characters. </div></div></div></div><div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div></div></form></body></html>

</code

evant
16 Oct 2007, 1:38 PM
A few things:

1) You don't include a whole HTML page, the thing returned should only be a fragment, since whatever is returned gets inserted into the DOM.

2) You don't need to do includes again.

3) You need to use loadScripts in your contentpanel



mainLayout.beginUpdate();
mainLayout.add('center', new Ext.ContentPanel(Ext.id(), {
title:"Order",
fitContainer:true,
fitToFrame: true,
autoScroll: true,
closable: true,
autoCreate: true,
loadScripts: true,
url: g_lxmlAR + '?webapp=ZM_TITL+webrtn=Main+p=' + g_lxmlPartition + '+lang=' + g_lxmlLang + '+', //you also have an extra comma here
}));