CODEWITHSUNDEEP
javascriptjqueryajax
Krishnang K Dalal
Krishnang K Dalal

Reputation: 2556

JQuery SlideUp, Delay and SlideDown with every AJAX call

I want to slide up the header delay and slide it back down. I have the function bind to the form submission but it the slide up and slide happens only the first time. The code is as below. 

$(document).ready(function() {
  console.log("ready!");


$('form').on('submit', function() {

        setInterval(function() {
            $('header').slideUp(500, function() {
                 $('header').delay(10000).slideDown(500);
                });
            });

        var url = $('input[name="Value"]').val();
        console.log(url)                      
        $.ajax({                                  
                type:'POST',
                url:'/first_page',
                data: {'val': url },
                cache:false,
                success: function(results){
                        console.log(results);

                        $("#heading").html("Word Cloud")
                        $("#key1").html("The primary topic of this page is" + " " +results.pt) 
                        $("#key2").html(" with the relevancy score of" + " " + results.ptr)
                        $("#key3").html("The secondary topic of this page is" + " " + results.st)
                        $("#key4").html(" with the relevancy score of" + " " + results.str)
            },error:function(error){
                   console.log(error)
                 }
});
});

Can anyone please suggest me why this is happening only once when I refresh the page? Thank you.

Upvotes: 1

Views: 357

Answers (2)

imtheman
imtheman

Reputation: 4843

Since this is asynchronous you'll want to put the slideDown() method in the callback:

$('form').on('submit', function() {
    $('header').slideUp(500);
 
  var url = $('input[name="Value"]').val();
  console.log(url)
  $.ajax({
    type: 'POST',
    url: '/first_page',
    data: {
      'val': url
    },
    cache: false,
    success: function(results) {
      console.log(results);

      $("#heading").html("Word Cloud")
      $("#key1").html("The primary topic of this page is" + " " + results.pt);
      $("#key2").html(" with the relevancy score of" + " " + results.ptr);
      $("#key3").html("The secondary topic of this page is" + " " + results.st);
      $("#key4").html(" with the relevancy score of" + " " + results.str);
      $('header').delay(10000).slideDown(500);
    },
    error: function(error) {
      console.log(error)
    }
  });
  
  return false;
});

Upvotes: 1

Pritam Banerjee
Pritam Banerjee

Reputation: 18923

It is because it is an asynchronous method. And you will need to bind it with an event. Only then you would see it happening.

Upvotes: 0

Related Questions