A N Other A N Other - 1 month ago 6
jQuery Question

passing variables to function with jquery

I'm new to javascript although I do use PHP.

I'm having issues passing variables using javascript/jquery on an onclick event on a href.

I'm pulling json data from a remote URL and there are 3 parameters that need to go with each request.

Date, price and currency.

I have a function to build the URL that looks like this:

function getIndexData(date, price, currency){
ajaxURL = "/data/"+date+"/"+price+"/"+currency+"";
}


This works well and builds the URL I need.

However, I have a jquery datepicker on the page to change the date to whatever I want which looks like:

$(function () {
$("#datepicker").datepicker(
{
dateFormat: 'yymmdd',
onSelect: function (date) {
getIndexData(date, price, currency )
}
}
);
});


Even if price and currency have previously been set they are now 'undefined'.

I have the same issue with the onclick events - if I try to send the price or the currency using (for example):

<a href="javascript:void(0);" onclick="getIndexData('date','price','currency')">NET</a></span>


price and currency are undefined.

Is there a way I can send only one of the variables to my function whilst retaining the already existent values?

Apologies for what must be a really basic question. I'm just new to this and I've obviously misunderstood something along the way.

Answer Source

Ok so here is the updated answer. As you can see, if variables are declared in the global scope of the code, the date picker function will have access to it. I think it previously did not work because the html was wrong. I deleted all of the html and included only the date picker and if you test it in the browser, you will see that in the console the price, currency variables are available inside date picker onSelect function and you can also execute the function getIndexData inside it. I've assigned the function to a variable that way you can use the variable getIndexData if you want to use the function.

<html>
  <head>
    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>
  <body>
  <div class="col-sm-5 index-grid">
  <span class="grid-label">Price</span>
  <span class="btn btn-grid"><a href="javascript:void(0);" onclick="getIndexData(indexDate, indexCurrency ,indexPrice);">CLOSE</a></span>
   <span class="btn btn-grid"><a href="javascript:void(0);" onclick="getIndexData(indexDate, indexCurrency ,indexPrice);">RETURN</a></span>
  <span class="btn btn-grid"><a href="javascript:void(0);" onclick="getIndexData(indexDate, indexCurrency ,indexPrice);">NET</a></span>
</div>
<p>Date: <input type="text" id="datepicker"></p>
  </body>
  </html>
<script>

var ajaxURL;
var indexDate = "2017-08-20"
var indexPrice = "closeprice";
var indexCurrency = "EUR";


var getIndexData = function (indexDate, indexCurrency, indexPrice) {
  ajaxURL = "/data/" + indexDate + "/" + indexPrice + "/" + indexCurrency + "";
  alert(ajaxURL);

}

$(document).ready(function() {
  $(function() {
    $("#datepicker").datepicker({
      dateFormat: 'yymmdd',
      onSelect: function(date) {
      console.log(date);
      console.log(indexPrice);
      console.log(indexCurrency);
      console.log(getIndexData);

      }
    });
  });
});
</script>