jQuery, AJAX: how to pass variable into ajax url parameter in dynamic HTML

Question

Using jQuery, I dynamically replace div's content with form which contains two textboxes and a button. After clicking this button, ajax is used to get results from public webservice according to data collected from textboxes. The code:

$(document).ready(function () {
  $(document).on('submit', '#formId', function (e) {
    e.preventDefault();
    $("#formId").on("click", "#btnShowCurrency", function (event) {
      var currencyCode = $('#txtCode').val();
      var currencyDate = $('#txtDate').val();
      var urlWithVar = 'http://api.nbp.pl/api/exchangerates/rates/a/' + currencyCode + '/' + currencyDate + '/?format=json';
      var urlWithoutVar = 'http://api.nbp.pl/api/exchangerates/rates/a/usd/2018-03-26/?format=json';
      $.ajax({
        url: urlWithVar,
        type: "GET",
        dataType: "json",
        error: function(xhr, ajaxOptions, thrownError) {
          alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);},
        success: function (parsed_json) {
          var currency = parsed_json['currency'];
          var code = parsed_json['code'];
          var mid = parsed_json['rates']['0']['mid'];
          var effectiveDate = parsed_json['rates']['0']['effectiveDate'];
          alert("Average exchange rate for: " + currency + " [" + code + "]" + ", day: " + effectiveDate + ", is: " + mid);}
      });
    });
  });
});

So, when I use hardcoded urlWithoutVar - it works without problems. But when urlWithVar is used instead - 404 NotFound error is raised. I'm confused, can anyone help?

What does `console.log(urlWithVar);` show you in the console? — suchislife, Mar 31 '18 at 18:56

score 0 · Answer 1 · answered Mar 31 '18 at 19:37

I think you tried usd and not usa, either way I managed to use the link with urlWithVar here is my code (I also simplified a bit the code)

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {

  $("#btnShowCurrency").click(function (e) {

      var currencyCode = $('#txtCode').val();
      var currencyDate = $('#txtDate').val();
      var urlWithVar    = 'http://api.nbp.pl/api/exchangerates/rates/a/' + currencyCode + '/' + currencyDate + '/?format=json';
      var urlWithoutVar = 'http://api.nbp.pl/api/exchangerates/rates/a/usd/2018-03-26/?format=json';
      $.ajax({
        url: urlWithVar,
        type: "GET",
        dataType: "json",
        error: function(xhr, ajaxOptions, thrownError) {
        console.log(xhr);

         },
        success: function (parsed_json) {
           var currency = parsed_json['currency'];
          var code = parsed_json['code'];
          var mid = parsed_json['rates']['0']['mid'];
          var effectiveDate = parsed_json['rates']['0']['effectiveDate'];
          alert("Average exchange rate for: " + currency + " [" + code + "]" + ", day: " + effectiveDate + ", is: " + mid);}

          });


      });
});
</script>
</head>
<body>
    <form id='formId'>
        <input type='text' id='txtCode' value='usd'/>
        <input type='text' id='txtDate' value='2018-03-26'/>
        <input type='button' value='Submit' id='btnShowCurrency'/>
    </form>
</body>
</html>

Thanks @Anton Makov, however notice that Your code will not work with dynamic replaced HTML - event delegate for button click must be used in that case, for example: [link](https://stackoverflow.com/questions/14346954/jquery-on-change-not-firing-for-dynamic-content) — adros, Mar 31 '18 at 19:56
I didn't know you use dynamic buttons(in your main post you mentioned dynamic div's) are you creating the text box's dynamically as well? — Anton Makov, Mar 31 '18 at 20:00
Sorry, I wasn't precise enough with my post. Textboxes and button are created dynamically: $(document).ready(function () { $("#btnCurrency").on("click", function (event) { var divData = '//code for textboxes and button' $("#under").html(divData);});}); — adros, Mar 31 '18 at 20:09

score 0 · Answer 2 · answered Mar 31 '18 at 19:50

0

Ok, it seems I'm a little bit dumb. I typed another date in textbox - and I've jest realized that it was sunday. And this public webservice is obtainable only on working days...
So my code is correct - hope that will help somebody in future!

answered Mar 31 '18 at 19:50

adros

13
1
6

jQuery, AJAX: how to pass variable into ajax url parameter in dynamic HTML

2 Answers2