:: Forum >> Version 2 >>

Quick hint needed on loading grid data with AJAX

Hi,

maybe just a stupid question, but... As I said in other post, I am making some app for my Boss, and i get stacked a bid with this (not sure if it belongs here, but propably at last some one could help me here ;-) ):

I am dynamicaly loading form into the page using Ajax.updater method from prototype.js library. It works fine and puts the form into "appWin_div". If the form contains grid, it calls the updater again and puts some script to evaluate but puts it into "profreFrame" (DIV).

The problem is, that the new loaded script calls methods to update data in the grid but allwayd throws error : "gridClients - method not supported" but it exist and is visible in "appWin_div".

So how should i call the methods of that dynamicaly loaded object ? Cause direct call just does not work :(

Here is the main from the code:

Main page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<
html>
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
LINK href="default.css" rel=stylesheet type="text/css" charset="utf-8">
<
meta http-equiv="pragma" content="no-cache">



<
title>PNC WAIS 2.0 :: </title>

<
style type="text/css">
    .
WAIS_icon_new_off {backgroundurl(AW/styles/main_icons_off.png)     -280px 0pxposition:absoluteleft:10pxtop2pxvisibility:hidden;}
    .
WAIS_icon_save_off {backgroundurl(AW/styles/main_icons_off.png)    -40px 0px;  position:absoluteleft:30pxtop2pxvisibility:hidden;}
    .
WAIS_icon_report_off {backgroundurl(AW/styles/main_icons_off.png)  -360px 0pxposition:absoluteleft:50pxtop2pxvisibility:hidden;}
</
style>

    <
style type="text/css">
        .
aw-system-control {positionabsolute;}
        .
aw-ui-group {background-image:url('./AW/styles/aqua/bg1.png');}
        
Contextual .aw-gecko .aw-ui-group {background-image:url('./AW/styles/aqua/bg1.png');}
        
        .
aw-grid-row {border-bottom1px solid threedlightshadow;}
        .
aw-cells-selected, .aw-rows-selected {color#fff!importantbackground#396FA2!important;}
        .
aw-rows-selected .aw-grid-cell {backgroundnone!important;}
    </
style>

<
script type="text/javascript" src="./prototype/dist/prototype.js"></script>
<
SCRIPT language=JavaScript1.2 src="./Engine/stm31.js" type=text/javascript></script>
<
script src="./AW/lib/aw.js"></script>
<
link href="./AW/styles/aqua/aw.css" rel="stylesheet" charset="utf-8">

<
script>

function 
getHTML(target_div,urlpars)
{    
    var 
appWinLoader = new Ajax.Updatertarget_divurl, { method'post'parametersparsevalScriptstrue });
}

function 
getDATA(target_div,urlpars)
{    
    var 
appDataLoader = new Ajax.Updatertarget_divurl, { method'post'parametersparsevalScriptstrue });
}

AW.UI.Input.prototype.onControlActivated = function(event){
   
this.setStyle('background''#CFDEFF');
}

AW.UI.Input.prototype.onControlDeactivated = function(event){
   
this.setStyle('background''white');
}



</
script>
</
head>
<
body bgcolor="#ffffff" text="#000000" link="#009966" vlink="#5493B4" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" style=" background-image:url('./AW/styles/aqua/bg2.png'); margin:Opx; padding:0px;" onLoad="javascript:getHTML('appWin_div','http://itc.ace-com.cz/PNC/templates/Login_screen.html', '');">

<
div id="main_WAIS_menu" style="position:absolute; top:Opx; left:0px; height:25px; width:100%; background-image: url(./images/design/cellpic3.gif);">
        <
SCRIPT language=JavaScript1.2 src="./Engine/hmenu_to_var.php" type=text/javascript></script>
</
div>

<
div id="mainMenuButtons" style="position:relative; top:5px; height:25px; text-align:right">
 

<
a id="setup_link" name="setup_link" href="javascript:alert('Not Implemented Yet');" style=" border-width:0px"><img src="./images/icons/configure.png" alt="setup" align="baseline"  style="border-width:0px"></a>&nbsp;
<
a id="help_link" name="help_link" href="javascript:alert('Not Implemented Yet');" style="border-width:0px"><img src="./images/icons/help.png" alt="help" align="baseline" style="border-width:0px"></a>&nbsp;
<
a id="logout_link" name="logout_link" href="javascript:alert('Not Loged In!');" style="border-width:0px"><img src="./images/icons/exit_small.png" alt="exit" align="baseline" style="border-width:0px"></a>&nbsp;

            
</
div>

<
div style="background-image:url('./images/design/midle_menu_back.gif'); height:23px; width:100%; position:absolute; left:Opx; top:26px;">

<
div class="WAIS_icon_new_off"><a  href="" title="Nový záznam"><img src="images/design/blank.gif" alt="Spacer" width="23" height="23" border="0" /></a></div>
<
div class="WAIS_icon_save_off"><a href="" title="Uložit"><img src="images/design/blank.gif" alt="Spacer" width="23" height="23" border="0" /></a></div>
<
div class="WAIS_icon_report_off"><a href="javascript:appWin.grid1.sendRequest('POST','http://itc.ace-com.cz/PNC/includes/getRecords.php','')" title="Sestavy"><img src="images/design/blank.gif" alt="Spacer" width="23" height="23" border="0" /></a></div>

</
div>        

<
div align="center" id="appWin_div" style="width:100%; position:absolute; top:50px; vertical-align:middle">
    



</
div>


<
div id="progresFrame" align="center" style="background:#CC9966; position:absolute; left:500px; top:200px; width:200px; height:100px; visibility: hidden;">
    <
h3>
        
Zpracovávám informace
    
</h3>
</
div>
<
script>

window.document.body.scroll="no";
top.document.getElementById("Stm0p0i").style.visibility="hidden";
var 
userIDcard = new Object;
userIDcard.userId '';
</
script>
                    
</
body>
</
html
 
Form grid definition called by:

getHTML('appWin_div','http://itc.ace-com.cz/PNC/templates/485_form.php?''')
 
Form grid definition is:

var gridClients_data 
    [    
    [
"","","","","""""""",""],
    ];

    var 
gridClients_Columns = ["ID","&#268;.Z.","Spole&#269;nost""Ulice""&#269;.p.""M&#283;sto""St&#345;.""OTZ","Postavení"];
    var 
gridClients = new AW.Grid.Extended;
    var 
str = new AW.Formats.String;
    var 
num = new AW.Formats.Number;
    
gridClients.setCellFormat([num,num,str,str,str,strnumnum,str,str]);
    
gridClients.setCellText(gridClients_data);
    
gridClients.setHeaderText(gridClients_Columns);
    
gridClients.setRowCount(2);
    
gridClients.setColumnCount(9);
    
gridClients.setSelectionMode("single-row");
    
gridClients.setSelectorVisible(false);
    
gridClients.setSelectorText(function(i){return this.getRowPosition(i)+1});
    
gridClients.setSelectorWidth(28);
    
gridClients.setHeaderHeight(20);
    
gridClients.setCellEditable(false);
    
gridClients.setFixedLeft(3);
    
gridClients.setVirtualMode(true);
    
gridClients.defineRowProperty("Mybackcolor", function(row){ 
        return 
this.getCellValue(8row); 
        }); 
    
gridClients.getRowTemplate().setStyle("background-color", function(){ 
        return 
this.getRowProperty("Mybackcolor"); 
        }); 
        
    
gridClients.onCurrentRowChanged = function()
    { 
         
inputClientName.setControlText(gridClients.getCellText(2,gridClients.getCurrentRow()));
         
inputStreet.setControlText(gridClients.getCellText(3,gridClients.getCurrentRow()));
         
inputTown.setControlText(gridClients.getCellText(4,gridClients.getCurrentRow()));
         
inputZip.setControlText(gridClients.getCellText(5,gridClients.getCurrentRow()));
    }
    
gridClients.setSelectedRows([0]);
    
gridClients.setPosition(20210);
    
gridClients.setSize(960280);

var 
page1 = [    groupClientId
                    
pictureGroupClientId
                    
labelClientNamelabelStreet,labelTown,labelOwner,labelWebPage,
                    
inputClientNameinputStreetinputHouse,inputTown,inputZip,inputOwnerinputWebPage,
                    
                    
groupClientType,
                    
pictureGroupClientType,
                    
labelClientResortlabelBussinesTypelabelClientTypelabelOtz,
                    
comboClientResortcomboBussinesTypecomboClientType,
                    
inputOtz,
                    
                    
gridClients
                
];    

document.getElementById("appWin_div").innerHTML tabs+formFrame+container;

container.element().innerHTML page1.join("");

getDATA('progresFrame','http://itc.ace-com.cz/PNC/templates/485_data.php?tabno=1','');



    
tabs.onCurrentItemChanged = function(i) {

        
container.element().innerHTML pages[i].join("");
        
getDATA('progresFrame','http://itc.ace-com.cz/PNC/templates/485_data.php?tabno=' i,'');
    }
 
Form grid data sample:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<
html>
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
LINK href="default.css" rel=stylesheet type="text/css" charset="utf-8">
<
meta http-equiv="pragma" content="no-cache">
</
head>
<
body>


<
script type="text/javascript">

        
    
//    insert javascript arrays produced by PHP functions
    
var myHeaders = ["ID","cisodb","jméno spole&#269;nosti","ulice","&#269;p","PS&#268;","m&#283;sto","st&#345;edisko","postavení","druh spole&#269;nosti","OTZ","status klienta","frekvence návšt&#283;v"];
 
    var 
myCells = [
    [
"8","1","Antonín Bárta, Pneuservis","Bílovecká","116","747 06","OPAVA - Kylešovice","12","","","","1",""],
    [
"9","2","A.S. CAR v.o.s.","Gen. Krátkého","9","787 01","ŠUMPERK","21","","","","2",""],
    [
"10","3","AGROFOREST a.s.","Nová plá&#328;","26","792 01","BRUNTÁL","","","","","3",""],
    [
"11","4","AGROMARKET Opava","Jaselská","10","746 01","OPAVA","","","","","4",""],
    [
"12","5","AGROPODNIK a.s., Mydlovary","st&#345;. Mydlovary","0","373 49","MYDLOVARY 90","","","","","5",""],
    
¨

    
...

    [
"13","6","AGROPODNIK Tábor a.s.","Ústecká","704","390 01","TÁBOR","41","","","","6",""],
    [
"14","7","AGROSLUŽBY","","","793 97","SLEZSKÉ RUDOLTICE","","","","","7",""],
    [
"15","8","ALEŠ Václav","Malá","2736","738 01","FRÝDEK-MÍSTEK","","","","","1",""],
    [
"16","9","Alfa Plastik a.s.","Opavská","45","792 11","BRUNTÁL","","","","","1",""],
    [
"3371","2659","JOB FACTORY s.r.o.","Dr.Martínka 1491/7","14917","700 30","OSTRAVA-Ostrava Jih-Hrab&#367;vka","12","","","","1",""]
];
    
    
//    set grid text
    
gridClients.setHeaderText(myHeaders);
    
gridClients.setCellText(myCells);

    
//alert('Po&#269;et sloupc&#367;:' + myHeaders.length +'\n Po&#269;et &#345;ádk&#367;: ' + myCells.length);
    
//    set number of columns/rows

    
gridClients.setColumnCount(myHeaders.length);
    
gridClients.setRowCount(myCells.length);
    
    
gridClients.refresh();

</
script>


</
body>
</
html>
 
ASJ
Monday, May 1, 2006
Ok Seems I that of I setId for grid I can call it through:

document.getElementById("gridClients")
 
But on calling any method it says that it is not supported by this object...

for example:

document.getElementById("gridClients").setHeaderText(myHeaders)
 
does not work. So how should I call it ? How to get to the object the right way ?? Time is getting me into the pressure :(:(:(
ASJ
Monday, May 1, 2006
Here is a guess:

AW.all["gridClients"].setHeaderText(myHeaders);
DT
Monday, May 1, 2006
Althrough I had problems with special character parsed into my XML, I am hapy that this worked, so I can go on with the first philosophy to load dynamicaly data and parse them into JS Array as usualy ;-)

THXL
ASJ
Thursday, May 4, 2006



This topic is archived.

Back to support forum

Forum search