Home » Javascript » How to fix search function issue in web app table

How to fix search function issue in web app table

Posted by: admin November 1, 2017 Leave a comment

Questions:

My web app table consists of some unique numbers, On-click on this numbers/ID detailed information mapped against that number /id should reflect in below respective tabs. (This flow is working fine)
However
My search function is not perfectly working, if I click anywhere in respective table it pull or search and update the output of 1st row only

Below are my complete script and web app URL

Script Sheet

Webapp

function doGet() {
  return HtmlService
      .createTemplateFromFile('index')
      .evaluate();
}



function fetchRequestDetails(id){
    var sheetDatabase = SpreadsheetApp.openById("1zmdyPWHw2N2tCKNvCYlsGDyyZ9wHtoVC8wbC1IIxyXI").getSheetByName("Sheet1");
    var columnValues = sheetDatabase.getRange(2, 1, sheetDatabase.getLastRow()-1).getValues(); 
    var searchResult = columnValues.findIndex(id);

    if(searchResult != -1)
    {
      var aData=sheetDatabase.getRange(searchResult+2, 1, 1,sheetDatabase.getLastColumn()).getValues();
      aData[0][1]= Utilities.formatDate(aData[0][1], "GMT +1","yyyy-MM-dd hh:mm:ss a")
      return aData;
    }
    return -1;
}


Array.prototype.findIndex = function(search){
  if(search == "") return false;
  for (var i=0; i<this.length; i++)
    if (this[i].toString().indexOf(search) > -1 ) return i;
  return -1;
} 

function getData() {
  return SpreadsheetApp
      .openById('1zmdyPWHw2N2tCKNvCYlsGDyyZ9wHtoVC8wbC1IIxyXI')
      .getSheetByName("Sheet2")
      .getDataRange()
      .getDisplayValues()
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>123</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--Icons-->
	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script>google.load("picker", "1");</script> 



</head>

<body>
<div class="container">
<div class="row">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
 </div>
<!-- This Works perfactly fine
       <!-- <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> [email protected]</a></li>
  
    <!--</ul> 
    <form class="navbar-form navbar-left" onsubmit="return searchRequest();">
      <div class="form-group">
        <input type="text" id="requestID" class="form-control" placeholder="Search Requset Number">
       <button type="submit" class="btn btn-primary">Search</button>
      </div>
    </form>
      </div>
      <!--/.nav-collapse -->

    <!--/.container-fluid -->
  </nav>
  </div>
</div>


<div class="container">
<div class="row">

<!-- Text input-->
<div class="form-group">
<div class="col-md-3">
<label class="control-label m5" for="textinput">Request Number</label> 
  <input id="requestNumber" name="textinput" type="text" placeholder="" class="form-control input-md">
</div>
   
  <div class="col-md-3">
  <label class="control-label m5" for="textinput">Assgined To</label> 
  <select id="assignedTo" name="selectbasic" class="form-control">
      <option value=" Ginka"> Ginka</option>
      <option value="Chavan"> Chavan</option>
    </select>
  </div>
  
  <div class="col-md-3">
<label class="control-label m5" for="textinput">Request Status</label> 
  <select id="status" name="selectbasic" class="form-control">
    <option value="1">New</option>
    <option value="1">Open</option>
    <option value="2">Hold</option>

  </select>
 
 <!--  <span class="help-block">help</span>   -->
</div>
 <div class="col-md-3">
<label class="control-label m5" for="textinput">Urgency</label> 
  <input id="Urgency" name="textinput" type="text" placeholder="" class="form-control input-md">
</div>
<div class="gap20"></div>
<div class="col-md-3">
<label class="control-label m5" for="textinput">Time Stamp</label> 
  <input id="timestamp" name="textinput" type="text" placeholder="" class="form-control input-md">
 <!--  <span class="help-block">help</span>   -->
</div>
<div class="col-md-3">
<label class="control-label m5" for="textinput">Bussiness User </label> 
  <input id="BU" name="textinput" type="text" placeholder="" class="form-control input-md">
 <!--  <span class="help-block">help</span>   -->
</div>
<div class="col-md-3">
<label class="control-label m5" for="textinput">Request Type</label> 
  <input id="rTpe" name="textinput" type="text" placeholder="" class="form-control input-md">
 <!--  <span class="help-block">help</span>   -->
</div>
<div class="col-md-3">
<label class="control-label m5" for="textinput">Request For</label> 
  <input id="rFor" name="textinput" type="text" placeholder="" class="form-control input-md">
 <!--  <span class="help-block">help</span>   -->
</div>
<div class="gap20"></div>

<div class="col-md-4">
<label class="control-label m5" for="textinput">Short Description</label> 
 <textarea class="form-control" id="shortDesc" rows="3" name="textarea"></textarea>
 <!--  <span class="help-block">help</span>   -->
</div>
<div class="col-md-4">
<label class="control-label m5" for="textinput">Business Reason For Request/Purpose</label> 
  <textarea class="form-control" id="BusinessReason" rows="3" name="textarea"></textarea>
 <!--  <span class="help-block">help</span>   -->
</div>
</div>
</div>
</div>

<div class="w3-container">
  <h2>Unassgined Requset</h2>


  <? var data = getData(); ?>
   <table id="mytable" class="table display table-striped table-bordered responsive-utilities jambo_table">
      <tr class="w3-pink">
        <th style="width:10%;">Requset Type</th>
        <th style="width:10%;">Requset ID</th>
      </tr>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td onclick="return searchRequest();" id="requestID"><span><?= data[i][j] ?></span> </td>
            <? } ?>
        </tr>
        <? } ?>
    </table>
</div>

</body>
</html>



<script>
function searchRequest(){
  $("form input,form button").attr("disabled",true);
  google.script.run.withSuccessHandler(displayData).fetchRequestDetails($("#requestID").val());
  return false;
}

function displayData(result){
  $("form input,form button").attr("disabled",false);
  if(result!= -1){
    console.log(result)
    $("#updateBtn").attr("disabled",false);
    $("#requestNumber").val(result[0][0]);
    $("#timestamp").val(result[0][1]);
    $("#BU").val(result[0][4]);
    $("#rTpe").val(result[0][5]);
    $("#rFor").val(result[0][6]);
    $("#shortDesc").val(result[0][7]);
    $("#BusinessReason").val(result[0][8]);
    $("#Urgency").val(result[0][9]);

  }else{
    alert("Not Found");
  }
}

</script>
Answers: