Submit search button not working

KennethRichards · ‎09-10-2013

I know this is going to be a lot of code but can anyone tell me why nothing happens when I click my submit search button. It should run my query but I get nothing.

JavaScript:

dojo.require("dojo.data.ItemFileReadStore");  require(["dojox/grid/DataGrid", "dojo/ready",//"dojo/data/ItemFileReadStore",     "esri/tasks/query","esri/tasks/QueryTask",     "dojo/dom","dojo/on","dojo/domReady!"], function(ready,on,Query,QueryTask,dom){     ready(function(){ //function init(){     var myQueryTask, myQuery;     myQueryTask = new QueryTask("http://.../ArcGIS/rest/services/aasggeothermal/AZWellHeaders/MapServer/0");      myQuery = new Query();     myQuery.returnGeometry = false;     myQuery.outFeilds = ["*"] //}    function runQuery(){     //myQuery.text = dom.byId("twpid").value;     var apiNo = dom.byId('apinum').value;     var otherId = dojo.byId('stateperm');     var wellName = dojo.byId('wellnameid');     var county = dojo.byId('countyid');     var twp = dojo.byId('twpid');     var rge = dojo.byId('rgeid');     var section = dojo.byId('sectionid');     var drillerDepth = dojo.byId('depthid');     var formation = dojo.byId('formationtdid');     var field = dojo.byId('fieldid');      myQuery.where ="apino = '" +apiNo +"'";      //apino otherid wellname county twp rge section_ drillertotaldepth formationtd field     myQueryTask.execute(myQuery,updateGrid);  }      on(dom.byId("executeButton"), "click", runQuery);     }); });

HTML code:
[HTML]
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=7,IE=9">
    <meta name="viewport" content="initial-scale=1,
    maximum-scale=1, user-scalable=no">

    <title>Text Search</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <script src="http://js.arcgis.com/3.6/"></script>
    <script src="Scripts/App2.js"></script>

    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojox/grid/resources/tundraGrid.css">
    <link rel="stylesheet" href="Styles/Base.css">

    <style type="text/css">

    </style>

</head>
<body>

<div id="tab_body">
<div id="titleBar">
    <div id="titleText" class="mapMenus">
        <a href='http://azogcc.az.gov/'>ARIZONA OIL AND GAS <br>CONSERVATION COMMISSION</a>
    </div>
    <div id="titleImg" class="mapMenus">
        <a href='http://azgs.az.gov/'><img src="photos/AZ_state_seal2.png" height="49" width="49"></a>
    </div>
</div>
<div id="navigationMenu" class="mapMenus">
    <ul>
        <li><a href='http://azogcc.az.gov/'>Home</a></li>
        <li><a href='http://azgs.az.gov/'>AZGS</a></li>
        <li><a href='http://welldata.azogcc.az.gov/OilGasViewer.html'>Map Search</a></li>
        <li><a href='http://welldata.azogcc.az.gov/PyCh_index.html'>Text Search</a></li>
    </ul>
</div>
<div id="image_box">
    <image src="photos/Arizona_Meridians.jpg">
        <div id="img_info">
            <p>Map of Arizona State Meridians</p>
        </div>
        </image>
</div>

<form action="">
<div id="search_body">
    <div id="search_info">
        <p>
            <span id="TextSearch">Text Search:</span> Complete one or multiple fields and press the Submit Search button to search for wells based on their attributes. Selecting LAS data will open the LAS data in a text file. The selected LAS data can be saved and downloaded by using the save page as function.
        </p>
    </div>
    <table>
        <tr>
            <td class="label">
                <label for="apinum">API Number</label>
            </td>
            <td>
                <input type="text" name="apino" id="apinum" size="14" maxlength="14"><br>
            </td>
        </tr>
        <tr>
            <td class="label">
                <label for="stateperm"> State Permit</label>
            </td>
            <td>
                <input type="text" name="otherid" id="stateperm" size="4" maxlength="4"><br>
            </td>
        </tr>
        <tr>
            <td class="label">
                <label for="countyid">County</label>
            </td>
            <td>
                <select name="county" id="countyid">
                    <option value=" "> </option>
                    <option value="Apache">Apache</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class="label">
                <label for="fieldid">Field Name</label>
            </td>
            <td>
                <input type="text" name="field" id="fieldid" size="30" maxlength="30"><br>
            </td>
        </tr>
        <tr>
            <td class="label">
                <label for="twpid">Township</label>
            </td>
            <td>
                <input type="text" name="twp" id="twpid" size="4" maxlength="4"><br>
            </td>
        </tr>
        <tr>
            <td class="label">
                <label for="rgeid">Range</label>
            </td>
            <td>
                <input type="text" name="rge" id="rgeid" size="4" maxlength="4"><br>
            </td>
        </tr>
        <tr>
            <td class="label">
                <label for="sectionid">Section</label>
            </td>
            <td>
                <select name="section_" id="sectionid">
                    <option value=""> </option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <label for="operatorid">Operator</label>
            </td>
            <td>
                <input type="text" name="operator" id="operatorid" size="30" maxlength="30"><br>
            </td>
        </tr>
        <tr>
            <td class="label">
                <label for="wellnameid">Well Name</label>
            </td>
            <td>
                <input type="text" name="wellname" id="wellnameid" size="30" maxlength="30"><br>
            </td>
        </tr>
        <tr>
            <td class="label">
                <label for="depthid">Well Depth</label>
            </td>
            <td>
               <input type="text" name="drillertotaldepth" id="depthid" size="10" maxlength="10"><br>
            </td>
        </tr>

        <tr>
            <td class="label">
                <label for="formationtdid">Formation at Total Depth</label>
            </td>
            <td>
                <input type="text" name="formationtd" id="formationtdid" size="30" maxlength="30"><br>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="executeButton" value="Submit Search"/>
            </td>
            <td>
                <input type="reset" value="Reset Search"/>
            </td>
        </tr>
    </table>
</div>

</form>
<div id="results">
    
    
    <table data-dojo-type="dojox.grid.DataGrid" escapeHTMLInData="false" jsid="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'" style="height:100%; width:100%">
        <thead>
        <tr>
            <th field="apino" width="auto">API No</th>
            <th field="otherid" width="auto">State Permit No</th>
            <th field="wellname" width="auto">Operator</th>
            <th field="county" width="auto">County</th>
            <th field="twp" width="auto">Township</th>
            <th field="rge" width="auto">Range</th>
            <th field="section_" width="auto">Section</th>
            <th field="drillertotaldepth" width="auto">Depth (ft)</th>
            <th field="formationtd" width="auto">Formation at Depth</th>
            <th field="folderField" width="auto" >Well Folder</th>
            <th field="logField" width="auto" >Scanned Well Log</th>
            <th field="lasField" width="auto" >LAS Data</th>
        </tr>
        </thead>
    </table>
</div>
</div>
</body>
</html>[/HTML]

KellyHutchins · ‎09-10-2013

Ken,

It looks like the issue is that the modules aren't mapped correctly to the function parameters. In the snippet below from your source code the parameters corresponding to the module aren't in the correct order. In this example the DataGrid would map to ready, ready would map to on etc.

require(["dojox/grid/DataGrid", "dojo/ready",     "esri/tasks/query","esri/tasks/QueryTask",     "dojo/dom","dojo/on","dojo/domReady!"], function(ready,on,Query,QueryTask,dom){

So because these aren't mapped correctly when you use on(dom.byId ... to hook up the buttons click event it doesn't work because on doesn't correspond to dojo/on. Try updating your code as follows:

require(["dojox/grid/DataGrid", "dojo/ready",//"dojo/data/ItemFileReadStore",     "esri/tasks/query","esri/tasks/QueryTask",     "dojo/dom","dojo/on","dojo/domReady!"], function(DataGrid, ready,Query,QueryTask,dom, on){

View solution in original post

KellyHutchins · ‎09-10-2013

Ken,

It looks like the issue is that the modules aren't mapped correctly to the function parameters. In the snippet below from your source code the parameters corresponding to the module aren't in the correct order. In this example the DataGrid would map to ready, ready would map to on etc.

require(["dojox/grid/DataGrid", "dojo/ready",     "esri/tasks/query","esri/tasks/QueryTask",     "dojo/dom","dojo/on","dojo/domReady!"], function(ready,on,Query,QueryTask,dom){

So because these aren't mapped correctly when you use on(dom.byId ... to hook up the buttons click event it doesn't work because on doesn't correspond to dojo/on. Try updating your code as follows:

require(["dojox/grid/DataGrid", "dojo/ready",//"dojo/data/ItemFileReadStore",     "esri/tasks/query","esri/tasks/QueryTask",     "dojo/dom","dojo/on","dojo/domReady!"], function(DataGrid, ready,Query,QueryTask,dom, on){