2

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

  • OK, but is that wrapped in a drupal behavior? – Ollie Jul 3 '14 at 15:04
0

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.

  • ok i used Drupal.behaviours but did not work.the content load fine but the content has drupal ajax link (i.e using use-ajax) and that still not wokring – karan Jul 3 '14 at 14:42
  • i think use-ajax is drupal's code and what could possible reasons – karan Jul 3 '14 at 14:44
  • What should these ajax links do? – Ollie Jul 3 '14 at 14:46
  • Perhaps you can find something useful here? computerminds.co.uk/drupal-code/… – Ollie Jul 3 '14 at 14:48
0

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

0

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();
            }
        }); 
0

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);
    });
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.