0

I have a function that gets called named requestData(). The other values show in the HTML (valueYTD, valueMAA etc) but valueCurrent does not UNLESS I add console.log so effectively it's pushing it to run.

However I don't want to use console.log in my script as its a hacky way of showing all values without a refresh. Whats the best way to do this, please? I have tried using return and && operator to return all queries but this doesn't work.

birst is where I am getting the data from, where the data is stored. It is a asynchronous problem from requestData to handleResponse....

var executeQueryResultHandler;
var processQueriesHandler;


var birstFilters = [];
var birstQueryIds = [];

var birstVis = {
  id: 0,

  callBack: function(listener) {
    window.onmessage = function(e) {
      if (e.data.operation === "executeQueryResult") {
        if (birstQueryIds.indexOf(e.data.callerId) >= 0) {
          listener(e);
        }
      } else {
        listener(e);
      }
    };
  },
  postData: function(data) {
    this.report.postData(data);
  },
  getData: function(query) {
    if (!this.report) {
      this.report = new BirstReport();
    }
    this.messageId = this.getQueryId(query)
    birstQueryIds.push(this.messageId);
    this.report.getData(query, this.messageId);
  },
  init: function() {
    this.callBack(birstResponseHandler);
    this.id = guid();
  },
  start: function() {
    getFilters();
  },
  getQueryId: function(query) {
    return (this.id + query).split("").
    reduce(function(a, b) {
      a = ((a << 5) - a) + b.charCodeAt(0);
      return a & a
    }, 0);
  },
};



function birstResponseHandler(e) {

  var birstOperation = e.data.operation;

  if (birstOperation === "setFilters") {
    handleSetFilters(e);

  } else if (birstOperation === "executeQueryResult") {
    executeQueryResultHandler(e);
  }
}

function handleSetFilters(e) {
  //clear any existing ids
  birstQueryIds.clear;

  //set new filters
  birstFilters = e.data.filters;

  //reprocess queries
  processQueriesHandler();
}


function getWhereStatement() {
  if (birstFilters === undefined || birstFilters.length === 0) //if undefined or an empty list
    return '';

  var statement = ' WHERE ';

  for (var i = 0; i < birstFilters.length; i++) {
    var filter = birstFilters[i];

    statement += '[';
    statement += filter.key;
    statement += ']';

    if (filter.operator === '=')
      statement += ' IN ';
    else
      statement += ' NOT IN ';

    statement += '(';

    for (var j = 0; j < filter.value.length; j++) {
      var value = filter.value[j];

      statement += '\'';
      statement += value;
      statement += '\'';

      if (j !== filter.value.length - 1)
        statement += ',';
    }
    statement += ')';

    if (i < birstFilters.length - 1)
      statement += ' AND ';
  }

  return statement;
}


function getFullBasicQuery(selectStatement) {
  return selectStatement + getWhereStatement();
}

// CONFIGURATION

var kpis = {

  K025: {
    id: 'GRP-K025',
    title: 'Employee Absence %',
    clickThrough: 'Employee Absence %',
    periodExp: 'SELECT (SavedExpression(\'GRP K025 MONTH ACT\'))',
    ytdExp: 'SELECT (SavedExpression(\'GRP K025 YTD ACT\'))',
    maaExp: 'SELECT (SavedExpression(\'GRP K025 MAA ACT\'))',
    periodRag: 'SELECT (SavedExpression(\'GRP K025 MONTH ACT RAG\'))',
    ytdRag: 'SELECT (SavedExpression(\'GRP K025 YTD ACT RAG\'))',
    maaRag: 'SELECT (SavedExpression(\'GRP K025 MAA ACT RAG\'))',
    ragType: 'reduction',
    startSymbol: '',
    endSymbol: '%',
    decimal: 1
  }
};

var constants = {
  current: '\'Current\' FROM [ALL] ',
  ytd: '\'YTD\' FROM [ALL] '
};


var kpi;

var birstVisKPIGroupBoxes = {
  init: function(configuration) {
    kpi = configuration;

    executeQueryResultHandler = handleResponse;
    processQueriesHandler = requestData;
    birstVis.init();

  }
};

//DATA REQUEST

function requestData() {

  var valueCurrent = getQuery(kpi.periodExp, constants.current);
  var valueYTD = getQuery(kpi.ytdExp, constants.ytd);
  var valueMAA = getQuery(kpi.maaExp, constants.current);

  birstVis.getData(valueCurrent);
  birstVis.getData(valueYTD);
  birstVis.getData(valueMAA);

}

function handleResponse(e) {

  var currentValueId = birstVis.getQueryId(getQuery(kpi.periodExp, constants.current));
  var ytdValueId = birstVis.getQueryId(getQuery(kpi.ytdExp, constants.ytd));
  var maaValueId = birstVis.getQueryId(getQuery(kpi.maaExp, constants.current));

  switch (id) {
    case currentValueId:
      updateValue(kpi, 'cur', e);
      return;
    case ytdValueId:
      updateValue(kpi, 'ytd', e);
      return;
    case maaValueId:
      updateValue(kpi, 'maa', e);
      return;

  }
}

function updateValue(kpi, id, e) {


  var htmlId = kpi.id + '-' + id + '-val';

  var value = e.data.result.rows[0][0];

  var valueString;

  if (isFinite(value)) {
    valueString = kpi.startSymbol + numberFormat(value, kpi.decimal) + kpi.endSymbol;
  } else {
    valueString = 'NA';
  }

  $('#' + htmlId).html(valueString);

}

function getQuery(query, constant) {
  return getFullBasicQuery(query + constant);
}
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Arriva Group KPIs</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://stage.sde.birst.com/js/birst_embed.js"></script>


  <script>
    window.onload = function() {
      birstVisKPIGroupBoxes.init(kpis.K025);
      birstVis.start();
    }
  </script>
</head>

<body>
  <span class="col_Detail three_col_left box_Detail">
            <div class="heading_Detail">Period</div>
    <div class="detail">
            <span class="date_Detail monthYear"></span>
  <span class="value_Detail" id="GRP-K025-cur-val"></span>

  </div>
  </span>

  <span class="col_Detail three_col_mid box_Detail">
            <div class="heading_Detail">YTD</div>
    <div class="detail">
            <span class="date_Detail monthYear"></span>
  <span class="value_Detail" id="GRP-K025-ytd-val"></span>

  </div>
  </span>

  <span class="col_Detail three_col_right box_Detail">
            <div class="heading_Detail">MAA</div>
    <div class="detail">
            <span class="date_Detail monthYear"></span>
  <span class="value_Detail" id="GRP-K025-maa-val"></span>

  </div>
  </span>


</body>

</html>
  • 2
    We need to see the logic in `getQuery()` and `getData()` in order to help you. Are they asynchronous? Also, what is `birstVis`? – Rory McCrossan Oct 19 '17 at 10:45
  • 1
    I would imagine this is (yet another) duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) but at the moment there isn't enough information in this question to confirm that – Liam Oct 19 '17 at 10:46
  • hi both have updated the script above. It is a asynchronous problem from requestData to handleResponse....I have had a look at the forum you have posted but I can see what would be best to solve this without any delay to displaying the data, any ideas? – Lauren Buxton Oct 19 '17 at 11:12
  • 1
    Please don't just dump your whole code base into the question. You need to create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) of your problem. There is not enough information (what you had before) and too much information (what you have now) – Liam Oct 19 '17 at 11:15
  • have reduced it to only what is needed, there's still quite a lot but theres a lot of functions – Lauren Buxton Oct 19 '17 at 11:28
  • This may be an oversimplification, but you might focus on what console.log is doing that its absence is not. (e.g. - some initialization script problem). –  Oct 19 '17 at 11:44
  • @Liam is that any better? – Lauren Buxton Oct 19 '17 at 13:06

0 Answers0