CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
user4313162
user4313162

Reputation:

jQuery remove only works on the second click after an AJAX call

I have two divs each with a list of links, when a link is clicked an AJAX call is made which appends some JSON data to a separate div. At the same time as the data is appended I want the div with the links where the link that was just clicked to be hidden/removed.

There is a third div with the class "panel-close" that can be clicked which removes the div with data that was just appended and makes the div containing the links reappear again. So everything is back to the original state

The problem I'm having is that once the div containing the data has been removed sometimes the div containing the links does not appear again, sometimes it happens on a second click of the panel close div and sometimes the JSON data does not append again after clicking on a link.

My is the basic set up of my HTML:

<div class="curation-panel">
 <div class="curation-contents-list">
   <a class="load-article"></a>
 </div>

 <div class="article-container">
 </div>
</div>

<div class="film-panel">
 <div class="film-contents-list">
   <a class="load-project"></a>
 </div>

 <div class="project-container">
 </div>
</div>

<div class="panel-close">
</div>

I'm a Jquery noob, I've probably taken completely the wrong approach but this is my jquery code:

$(function(){
  var element = $('.load-article');
  var url     = element.data('page') + '.json';
  var target  = $('.article-container');

  $(element).on('click', function(e) {
    e.preventDefault();

    $.get(url, function(data) {
      $('.curation-contents-list').hide();
      $(target).append(data);
    });
      $("body").addClass("load-article-is-open"),
      $(this).animate({
          scrollTop: 0
      }, 300, "easeInOutExpo")

  });
}),

$(function(){
  var element = $('.load-project');
  var url     = element.data('page') + '.json';
  var target  = $('.project-container');

  $('.load-project').on('click', function(e) {
    e.preventDefault();

    $.get(url, function(data) {
      $('.film-contents-list').hide();
        $(target).append(data);
    });
      $("body").addClass("load-project-is-open"),
        $(this).animate({
            scrollTop: 0
        }, 300, "easeInOutExpo")
  });
}),

$(".panel-close").click(function() {
    $("body").removeClass("curation-panel-is-open").removeClass("film-panel-is-open").removeClass("load-article-is-open").removeClass("load-project-is-open"),
    $(".curation-panel").animate({
        scrollTop: 0
    }, 300, "easeInOutExpo"),
    $(".film-panel").animate({
        scrollTop: 0
    }, 300, "easeInOutExpo"),

    $('.curation-contents').show();
    $('.film-contents-list').show();
    $('.article-container').remove();
    $('.project-container').remove();
});

Upvotes: 0

Views: 1037

Answers (1)

epascarello
epascarello

Reputation: 207501

You reference an element which you than append the results of the Ajax call to

var target  = $('.article-container');

And the problem here is the fact you are removing the elements

$('.article-container').remove();
$('.project-container').remove();

After you remove them, the code that references them can not find them.

I think you want to use empty() and not remove()

Upvotes: 1

Related Questions