Как остановить цикличную загрузку $.getScript?

Question

[Артем]

Есть функция $.getScript которая по логике должна после каждого срабатывания аякса запускать файл скрипта, но она запускает сразу как только страница начинает загружаться и не останавливается. Функция находится в том же файле который должна запускать, я так понимаю что и-зза этого она и грузится циклично. Просьба подсказать как сделать все правильно, сам я что-то не могу сообразить.

$.ajax({
    complete: function() {
         $.getScript("/js/custom.js", function() {
         });
    }
})

Comments

[Александр Каторгин]

Можно чуть бльше информации? Не совсем понятна суть, вы получается грузите тот же самый js-файл?

[Артем]

Александр Каторгин, П сути да. Пробовал отдельно его в head выносить, но в таком случае он загружает файл custom.js только один раз, и после отработки ajax не срабатывает

[Александр Каторгин]

Артем, А какой в этом смысл? Зачем загружать тот же js-файл? Всё, что в нем есть, вы и так уже можете использовать

[Артем]

Александр Каторгин, смысл в том что после загрузки данных на странице аяксом, к новым данным ранее загруженные скрипты не применяются.

[Александр Маджугин]

А где функция getScript-то? Покажите нам ее.
В коде у вас кусок вызова ajax который мало о чем говорит.

Я могу попробовать догадаться - после ajax у вас меняется страница, и соответственно в новых блоках которые появились, не навешиваются скрипты на селекторы. Поэтому вы решили что хорошей идей будет перезагрузить скрипт который эти события навешивает.
Если я прав - это очень плохая идея.

[Александр Каторгин]

Артем, так оберните эти скрипты в функции и применяйте их заново к новым данным после получения.
getScript вам тут абсолютно не нужен.
Т.е. есть у вас, например, какие-то манипуляции с данными, например:
$('div').html('обновляю текст');

Оберните это в

function nameFunction()
{
   $('div').html('обновляю текст');
}

И затем в аяксе просто вызывайте эту функцию

$.ajax({
    complete: function() {
         nameFunction();
    }
})

[Артем]

Александр Маджугин, не навешиваются скрипты на селекторы верно. Почему плохая идея. чтоб знать на будущее?

[Александр Каторгин]

Артем, ваш пример отлично вам же показывает, почему это плохая идея :)
У вас уже есть скрипт на странице, реализуйте правильно логику в нем. Не нужно его перезагружать. Для повторения каких-либо действий в коде используйте функции.

[Артем]

Александр Каторгин,

если правильно понял (но скорее всего нет) то как-то так

jQuery(function($) {
function nameFunction()
{
           var swiper = new Swiper('.swiper-container', {
          slidesPerView: 1,
          spaceBetween: 30,
          loop: true,
          autoplay: false,
          delay: 4000,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
}

$.ajax({
    complete: function() {
         nameFunction();
    }
});
});

Код к которому должен применятся скрипт выше

<div class="modal" id="postModal<?php the_ID(); ?>" data-id="<?php the_ID(); ?>">
  <div class="modal-dialog modal-dialog-centered" style="max-width:70%">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="float:right;border:none;"></button>
        <div class="row-popup">
          <div class="col-popup-left">
            <?php
              $images = get_field('gallery');
                if( $images ): ?>
                <div class="swiper-container">
                  <div class="swiper-wrapper">
                    <?php foreach( $images as $image ): ?>
                      <div class="swiper-slide">
                          <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                      </div>
                    <?php endforeach; ?>
                   </div>
                   <div class="swiper-pagination"></div>
                   <div class="swiper-button-next"></i></div>
                   <div class="swiper-button-prev"></div>
                  <?php endif; ?>
                </div>
              </div>
              <div class="col-popup-right">
                <h5 class="title" ><?php the_field('type')?></h5>
                <p class="customer"><?php the_field('customer')?></p>
                <p class="review"><?php the_field('review')?></p>
                <p class="price"><?php the_field('quantity')?></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

[Александр Каторгин]

Артем, в целом да, решение именно такое

[Артем]

Александр Каторгин, Попробовал сделать, не сработало

цикл записей которые дозазагружаются по нажатию копки «Показать еще»

//post query
	$query = new WP_Query( $query_args );
	ob_start();

	echo ( $pagination_type == 'load_more' ) ? '<div class="am-postgrid-wrapper">' : '';

	if( $query->have_posts() ): ?>

		<div class="<?php echo esc_attr( "am_post_grid am__col-3 am_layout_{$args['layout']} {$args['animation']} " ); ?>">

		<?php while( $query->have_posts()): $query->the_post(); ?>

			<!-- Modal -->

			<?php if($args['layout'] == "1"){ ?>
			<div class="am_grid_col">
				<div data-bs-toggle="modal" data-bs-target="#postModal<?php the_ID(); ?>" data-id="<?php the_ID(); ?>" class="am_single_grid"><div class="more-button"><p>Подробнее</p></div>
					<div class="am_thumb">
						<?php the_post_thumbnail('full'); ?>
					</div>
					<div class="am_cont">
						<h2 class="am__title"><?php echo get_the_title(); ?></h2></a>
						<div class="portfolio-price--grid"><?php the_field('quantity-and-price'); ?></div>
					</div>
				</div>
			</div>
			<?php } else if( $args['layout'] == 2 ){ ?>
			<?php } ?>

		<?php endwhile; ?>
		</div>

		<div class="am_posts_navigation">
		<?php
			$big = 999999999; // need an unlikely integer
			$dataNext = $dataPaged+1;

			$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;

			$paginate_links = paginate_links( array(
			    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
			    'format' => '?paged=%#%',
			    'current' => max( 1, $dataPaged ),
			    'prev_next' => false,
			    'mid_size' => 2,
			    'total' => $query->max_num_pages
			) );

			// Load more button
			if( $pagination_type == 'load_more' ){

				if( $paginate_links && $dataPaged < $query->max_num_pages ){
					echo "<button type='button' data-paged='{$dataPaged}' data-next='{$dataNext}' class='{$args['infinite_scroll']} am-post-grid-load-more trigger'>" . esc_html__( 'Показать еще', 'ajax-filter-posts' )."</button>";
				}

			} else {

				// Paginate links
				echo "<div id='am_posts_navigation_init'>{$paginate_links}</div>";
			}

		?>
		</div>

		<?php
	else:
		esc_html_e('No Posts Found','ajax-filter-posts');
	endif;
	wp_reset_query();

	// Wrap close when infinity load
	echo ( $pagination_type == 'load_more' ) ? '</div>' : '';

	// Echo the results
	return ob_get_clean();
}

[Александр Каторгин]

Артем, тут скорее всего уже потому что есть особенности работы Swiper. И чтобы добавлять в него данные можно использовать его методы:

swiper.appendSlide(content);
swiper.update(true);

Посмотрите документацию по плагину:
swiper-api appendSlide

Пример использования:
Пример на codepen

[Артем]

Александр Каторгин,

swiper.appendSlide('<div class="swiper-slide"><img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" /></div>');
    swiper.update(true);

и в консоли ошибка

Uncaught SyntaxError: Unexpected identifier 'swiper' (at custom.js?ver=6.1.1:25:5)

[Артем]

Нашел еще такое решение

jQuery(document).ready(function($){
    $.ajaxSetup({cache:false});
    $(document).on('click', ".post-link", function () {
        $( ".sidebar" ).toggleClass( "sidebar-slide" );
        $( ".content-wrap" ).toggleClass( "content-slide" );
        var post_link = $(this).attr("href")+' #content';
        $("#single-post-container").html("<div class='loader'></div><span class='tload'>بارگذاری ...</span>");
        $("#single-post-container").load($(this).attr("href")+' #content', function(response, status, xhr) { // complete callback

                // create a empty div
                var div = document.createElement('div');
                // fill div with response
                div.innerHTML = response;
                // take correct part of the response
                var ref = $($(div).find('#content').html());
                // filter response for script tags
                ref.filter('script').each(function () {
                    // execute the scripts
                    $.globalEval(this.text || this.textContent || this.innerHTML || '');
                });
                var mySwiper = $('.swiper-container').swiper({
                  mode: 'horizontal',
                  loop: true
                })

        });

    return false;
    });

   document.addEventListener('DOMContentLoaded', function(){
   var mySwiper = $('.swiper-container').swiper({
   mode:'horizontal',
   loop: true
  });
  }, false)

});

[Александр Маджугин]

Артем, тоже плохое решение.
Давайте начнем с того, что плох сам подход когда за создание DOM элементов отвечает один актор (в вашем случае бэкенд), а за развешивание событий на них - другой (js на сайте). Это порождает высокую связность между бэкендом и фронтэндом. Связность это всегда плохо.
Именно по этой причине от jQuery отказались к концу десятых годов и массово стали переходить на реактивные фреймворки.
Но это не значит что на jsquery нельзя сделать нормально.
В принципе можно. Для начала вам придется помнить о том что все функции применительно к элементам должны быть одноразовыми. Т.е. вызов одной и той же функции не должен приводить к тому что она будет обрабатывать одни и те же элементы. Проще всего сделать это удаляя селектор на который трегирится функция. В вашем случае после получения ноды DOM удаляя с нее класс swiper-container, перед запуском Swiper.
Для Swiper это не оч. важно - кажется он умный и понимает что его второй раз трегирят на ноде, но для всех функций остальных это необходимо, чтобы разорвать связность между ними и историей запуска. После этого вы сможете вызывать на странице функции инициализации плагинов "безопасно", не боясь что на один элемент повиснут два, три или больше кликов.
Затем засуньте всю вашу инициализацию в одну функцию. Добейтесь чтобы она нормально работало в любое время не только на jQuery.ready и убедитесь что ее перевызов ничего не ломает.
Далее можете использовать ее и в ready и в ajax и где угодно.

[Александр Маджугин]

Артем, потому что ее нет. Вы объявили ее внутри анонимной функции, а потом пытаетесь заюзать за ее пределами.
Так сделайте:

$.ajax({
    complete: nameFunction
});