AJAX-вызов выполняется только один раз, пока событие .click () работает нормально. - PullRequest
0 голосов
/ 03 сентября 2018

Я загружаю изображения с помощью вызова AJAX через страницу трясогузки, используя RoutablePageMixin. Все отлично работает с первого раза. Однако при втором щелчке на том же изображении вызов AJAX не вызывает представление.

Я пытался переместить событие click за пределы функции ready js и каждый раз безуспешно создавать новый CSRF.

JS:

  function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }
  $('#start').click(function(evt) {
    var csrftoken = Cookies.get('csrftoken');
    var instance = $("#lazy").Lazy({
      ajaxLoader: function(element, response) {
        $.ajaxSetup({
          beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
              xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
          }
        });
        $.ajax({
          url: "/ajax/",
          method: "GET",
          dataType: "html",
          cache: false,
          data: {
            cosa: element.data("cosa")
          },
          success: function(data) {
            var magnificPopup = $.magnificPopup.instance;
            magnificPopup.open({
              closeOnContentClick: true,
              mainClass: 'mfp-img-mobile',
              image: {
                verticalFit: true
              },
              items: {
                src: data
              },
              type: 'image'
            });
            response(true);
          },
          error: function() {
            response(false);
          }
        });
      }
    });
    evt.preventDefault();
  });

Wahtail вид:

class HomePage(RoutablePageMixin, Page):
    @route(r'^ajax/$')
    def past_events(self, request):
        gallery_item_id = request.GET['cosa']
        image = GalleryItem.objects.filter(id=gallery_item_id).first().image
        image_url = image.file.url

        """
        View function for the ajax image from the gallery
        """
        return HttpResponse(request.build_absolute_uri(image_url))

Шаблон:

<div class="portfolio-hover">
    <div id="start" class="action-btn">
        <a id="lazy" class="" data-loader="ajaxLoader" data-cosa="{{value.id}}">
          <i class="icon-basic_magnifier"></i>
        </a>
    </div>

...