Jquery ajax - How to add fadeIn Jquery on a change event

user12669123
January 18, 2020
224 views
1 vote
2 Answers

I have a <div> which has a <p> element inside. I am making an AJAX call which the data returned is then appended into the paragraph. I want the <p> tag and all the relevant CSS to fade in on a change event. Here is my code so far:

$('#scenarioDropdownList').change(function() {
  var scenarioId = $('#scenarioDropdownList option:selected').attr('id');
  getscenarioDescription(scenarioId);
  getData(scenarioId);
});

function getscenarioDescription(scenarioId) {
  $.ajax({
    type: "GET",
    url: 'https://localhost:44340/api/ScenarioDescriptors/GetScenarioDescriptions',
    data: {
      scenarioId: scenarioId
    },
    dataType: 'JSON',
    success: function(data) {
      $.each(data, function(key, val) {
        $('#descriptionDisplay').text(val.scenarioDescription);
      });
    },
    error: function() {

    }
  });
}

#descriptionDisplay {
  border: solid 1px black;
  font-family: "SourceSansPro", Arial, sans-serif;
  padding: 10px;
  background-color: #EBEBE4;
  cursor: not-allowed;
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="descriptionArea">
  <p id="descriptionDisplay"></p>
</div>

As can be seen I have a function which is currently on a change event, which selects the current scenarioId of the chosen option in a drop down. This is then passed in as a parameter to the AJAX call which interfaces with a web API which filters the data. The data is then returned and I am currently appending it to the <p> tag. This all works correctly as it should.

However I would like to implement it so that when the user changes the selected drop down option the text is appended to the tag (as it currently is) but also it fades in and appears on screen. I know I have to use similar functionality of the change, but how would I go about adding in the fade in so that the element when the user first loads the page are not shown but when a drop down option is selected its fades in and appears.

Answers

If i understanded correctly this should help you. Include the animations on event change and after loading ajax.

$('#scenarioDropdownList').change(function() {
$('#descriptionDisplay').( "slow", function() {
    // Animation complete.
  });
  var scenarioId = $('#scenarioDropdownList option:selected').attr('id');
  getscenarioDescription(scenarioId);
  getData(scenarioId);
});

function getscenarioDescription(scenarioId) {
  $.ajax({
    type: "GET",
    url: 'https://localhost:44340/api/ScenarioDescriptors/GetScenarioDescriptions',
    data: {
      scenarioId: scenarioId
    },
    dataType: 'JSON',
    success: function(data) {
      $.each(data, function(key, val) {
        $('#descriptionDisplay').text(val.scenarioDescription);
      });
    $('#descriptionDisplay').fadeOut( "slow", function() {
    // Animation complete.
  });
    },
    error: function() {

    }
  });
}

You need to fade out the paragraph element when the user changes the option to be able to fade it in after changing its text.

$('#scenarioDropdownList').change(function() {
      var scenarioId = $('#scenarioDropdownList option:selected').attr('id');
      // Fade out
      $('#descriptionDisplay').fadeOut();
      getscenarioDescription(scenarioId);
      getData(scenarioId);
    });

    function getscenarioDescription(scenarioId) {
      $.ajax({
        type: "GET",
        url: 'https://localhost:44340/api/ScenarioDescriptors/GetScenarioDescriptions',
        data: {
          scenarioId: scenarioId
        },
        dataType: 'JSON',
        success: function(data) {
          $.each(data, function(key, val) {
            // Fade in
            $('#descriptionDisplay').text(val.scenarioDescription).fadeIn();
          });
        },
        error: function() {

        }
      });
    }

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery ajax – How to add fadeIn Jquery on a change event

Answers