use-ajax class for ajax link not working in dynamic content load

Question

use-ajax class link not working when i load new content using custom ajax code, which has the use-ajax class links.

I use normal jquery ajax to load the content because, i have drag and drop functionality which use ajax to load new content

i tried a lot but didn't get the idea why it is not working

Thanks in advance

jQuery(".clips-list .section-add-clip").droppable({
        accept: '.mysrapbook-clip-drag',
        hoverClass: "ui-state-active",
        drop: function(event, ui) {
            var source_url = ui.draggable.find('a').attr('rel');
            var destination_url = jQuery('.scrapbook-mongo-id').data('scrapbooid');
            var section_idx = Number(jQuery(this).attr('rel'));
            var ul_container = jQuery(this).parent().parent().find('li.clips-inner');

            var post_data = {
                source_url: source_url,
                destination_url: destination_url,
                idx: section_idx,
                load_node: 1,
                index_countr: ul_container.length
            };
            var ajax_data = jQuery(this);

            //call ajax to save clip to haggadah
            jQuery.ajax({
                url: "/clip-to-page",
                data: post_data,
                type: 'POST',
                success: function(data) {
                    //console.log(data);
                    console.log(data);
                    if (data[1].data != "") {
                        ul_container.last().after('<li class="clips-inner clip-idx-' + post_data.idx + '-id-' + post_data.index_countr + '">' + data[1].data + '</li>');
                    }
                }
            });
        }
    });

here is the code where i fire ajax to load new content and that content has 'use-ajax' class link which is not working it works fine page page is loaded

Answer 1

When you using jQuery load ajax content you need call Drupal behaviors manually to apply use-ajax and other Drupal behaviors for new content:

        jQuery.ajax({
            url: "/clip-to-page",
            data: post_data,
            type: 'POST',
            success: function(data) {
                Drupal.attachBehaviors();
            }
        }); 

Answer 2

Did you use Drupal.behaviors? Javascript event listeners that are attached to DOM objects at the jQuery(document).ready event won't be attached to ajax-loaded stuff. Drupal.behaviors sort that out for you.

Answer 3

I had the same problem. Using Drupal 8 and drupal.behaviour. My call is done via a periodicalupdater script that load a link which is itself 'ajax enabled' with the class 'use-ajax'. But behavious does not enable ajax to the link. I solved the above problem by calling another function after the link is returned and displayed. So this function should be called in from your script in 'success'

probably:

success: function(data) {
                //console.log(data);
                console.log(data);
                if (data[1].data != "") {
                    your code + **addajax();**
                }
            }

Maybe there is a better solution, but this one works.

the function is this one:

function addajax() {
  // Bind Ajax behaviors 
  jQuery('.use-ajax:not(.ajax-processed)').addClass('ajax-processed').each(function ()    {
    var element_settings = {};
    // Clicked links look better with the throbber than the progress bar.
    element_settings.progress = { 'type': 'throbber' };

    // For anchor tags, these will go to the target of the anchor rather
    // than the usual location.
    if (jQuery(this).attr('href')) {
      element_settings.url = jQuery(this).attr('href');
      element_settings.event = 'click';
    }
    var base = jQuery(this).attr('id');
    Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
  });
    }

inspired from http://drupalapi.attiks.com/api/drupal/misc%21ajax.js/property/Drupal.behaviors.AJAX/7

Answer 4

this is the solution I use for D8.

//html code

  <a href="#url" title="" id="link-dismiss-buynow" class="use-ajax">title</a>

//how to call

  $('#link-dismiss-buynow').attachAjaxToDynamicLink();

//magic function

  $.fn.attachAjaxToDynamicLink = function() {

    var base = $(this).attr('id');
    var elementSettings = {
      base: base,
      progress : { 'type': 'throbber' },
      url : $(this).attr('href'),
      event : 'click'
    };
    elementSettings.selector = '#' + base;
    $(elementSettings.selector).once('drupal-ajax').each(function () {
      elementSettings.element = this;
      elementSettings.base = base;
      Drupal.ajax(elementSettings);
    });
  }