:: Forum >>

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 {background: url(AW/styles/main_icons_off.png) -280px 0px; position:absolute; left:10px; top: 2px; visibility:hidden;}
    .WAIS_icon_save_off {background: url(AW/styles/main_icons_off.png) -40px 0px; position:absolute; left:30px; top: 2px; visibility:hidden;}
    .WAIS_icon_report_off {background: url(AW/styles/main_icons_off.png) -360px 0px; position:absolute; left:50px; top: 2px; visibility:hidden;}
</style>

    <style type="text/css">
        .aw-system-control {position: absolute;}
        .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-bottom: 1px solid threedlightshadow;}
        .aw-cells-selected, .aw-rows-selected {color: #fff!important; background: #396FA2!important;}
        .aw-rows-selected .aw-grid-cell {background: none!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,url, pars)
{
    var appWinLoader = new Ajax.Updater( target_div, url, { method: 'post', parameters: pars, evalScripts: true });
}

function getDATA(target_div,url, pars)
{
    var appDataLoader = new Ajax.Updater( target_div, url, { method: 'post', parameters: pars, evalScripts: true });
}

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,str, num, num,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(8, row);
        });
    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(20, 210);
    gridClients.setSize(960, 280);

var page1 = [ groupClientId,
                    pictureGroupClientId,
                    labelClientName, labelStreet,labelTown,labelOwner,labelWebPage,
                    inputClientName, inputStreet, inputHouse,inputTown,inputZip,inputOwner, inputWebPage,
                    
                    groupClientType,
                    pictureGroupClientType,
                    labelClientResort, labelBussinesType, labelClientType, labelOtz,
                    comboClientResort, comboBussinesType, comboClientType,
                    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