0

Since my previous questions I learned and progressed a lot (this all started from HTML code in println inside a Java file !)

I'm close to my target.

I've got 2 dropdown : dd1 and dd2

I got a java to get values in database

  • dd1 is an independant list
  • dd2 options depend of the choice in dd1

Using gson/jquery it works perfectly

My issue is the initialisation of the page.
I load the dd1 using my fillOption function and by default my page display the first value as selected.
So I want that dd2 initialised with this value but when I trigger the change() on dd1 this.value is empty and I don't get why.

$(document).ready(function() {
  fillOptions('dd1', this); // Init the first dropdown with my values, works fine
  $('#dd1 option:eq(1)').prop('selected', true); // Here I tried to force the selection of the first item, doesn't change anything

  // Delcaration of the change function for the first dropwdown
  $('#dd1').on('change', function() {
    alert(this.value); // display blank on the page load, display the value if I select manually afterwards
    fillOptions('dd2', this); // at load, 'this' is blank so nothing is loaded for dd2. Works fine if selected manually. I expected to have the value displayed on screen here.
  });
  $('#dd1').trigger('change');
});

function fillOptions(ddId, callingElement) {
  var dd = $('#' + ddId);
  $.getJSON('${pageContext.request.contextPath}/optionsSousType?dd=' + ddId + '&val=' + $(callingElement).val(), function(opts) {
    $('>option', dd).remove(); // Clean old options first.
    if (opts) {
      $.each(opts, function(key, value) {
        dd.append($('<option/>').val(key).text(value));
      });
    } else {
      dd.append($('<option/>').text("Choisir parent"));
    }
  });
}

I also tried getting the value using :

$('#colonne').on('change', function() {
  var col = $('#colonne').find(":selected").text();
  alert(col);
  fillOptions('libelle', col);
});

Same result, col is blank. I'm pretty sure it's simple but I couldn't find an answer. Thanks for your help

terrorrussia-keeps-killing
  • 1,533
  • 1
  • 5
  • 17
Pandalex
  • 23
  • 7
  • 1
    `$.getJSON` makes an ajax call, where the a = asychronous. So your code does: call fillOptions / start an ajax call / return to previous code / continue with doc.ready / ... sometime later ... / receive json and update dropdown. – freedomn-m Apr 29 '21 at 08:47
  • 1
    Your next step is to learn to debug - the basic option is to liberally add `console.log()` in strategic places (or every line to start with) - make sure you have different text in each log eg `console.log("doc ready start")` `console.log("start of fillOptions")` `console.log("doc.ready: after fillOptions")` `console.log("$.getSJON callback", opts)`. Step through in the debugger can help, but can be confusing with ajax calls or slow with looping code. Add `debugger;` in your code to start the debugger at that line. – freedomn-m Apr 29 '21 at 08:49
  • 1
    This will help, not sure if it answers directly, but will help: [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?rq=1) – freedomn-m Apr 29 '21 at 08:51
  • 1
    @freedomn-m Thanks for your answers: - In fact I think that I did not completly realised I was writing AJAX, I never used it before and always pictured it as a proper langage. I now understand my issue - I'm not used to debugging JSP, I usually worked with non-web application. Thanks for the direction, this is waaaaaay better than my alert box I should not learn all this on the run and get a proper training, unfortunately it's not an option :( - I'll read this link to find the best way to resolve my issue – Pandalex Apr 29 '21 at 11:23

0 Answers0