1

I would like to achieve, if is possible, change the content of a div with another content of the same type. For example I have two nodes whose content type are "news" but i want them to render on the same page after clicking on their links.

Tried to achieve with jQuery but i have an undefined error.

This is my code:

  $(document).ready(function() {
    var selector = '.title-noticia a';

    $(selector).click(function(e) {
      e.preventDefault();

      $.ajax({
        url: $(this).attr('href') + '?ajaxrequest',
        success: function(data) {
          $('.region-content').replaceWith(data);
        }
      });
    });
  });
})(jQuery);

But it doesn't seem to work, is there any way to achieve that without the use of AJAX links API? (It's to slow for me). Thanks in advance!!!

UPDATE 1:

After some research, i managed to make it work (on the console), but the content doesn't replace on the page view.

This is my new code:

(function ($) {
  Drupal.behaviors.mybehavior = {
    attach: function (context, settings) {


      $('.title-noticia a').click(function(e) {
        e.preventDefault();

        $.ajax({
          url: $(this).attr('href'),
          type: 'post',
          data: {
            view_name: 'articulos_actualidad',
            view_display_id: 'page_2'
          },
          dataType: 'json',
          success: function (response) {
              $('.region-content').replaceWith(data);
              Drupal.attachBehaviors(); //Check on the console
          }
        }); 

      }); 
    }
  }
})(jQuery);

But the only result i have is:

XHR finished loading: POST "http://www.example.com/somerenderedpage".

So it literally works but i cannot see the results on the page.

Hope you can help me. Thanks!

UPDATE 2:

I will post what i want to achieveI have a headache :) trying to make it work. What i want to achieve is to display the content of the selected link on a div. So i made a graphic so you can understand.

enter image description here

When i click on link 1, i want to display on the main div the content of the link 1, the same with link 2, 3 and X.

Is there any way to achieve that? tried with jQuery AJAX but the performance is poor, the same programatically making an ajax call.

I know i can do something like an slideshow but with content, but i cannot figure it out. Could you lend me a hand please? I will appreciate it. Thanks!

1 Answer 1

1

You need to conform to the coding standards and make it anonymous so it doesnt conflict with jQuery.

(function ($) {
  Drupal.behaviors.mybehavior = {
    attach: function (context, settings) {
      var selector = '.title-noticia a';

      $(selector).click(function(e) {
        e.preventDefault();
      }

      $.ajax({
        url: $(this).attr('href') + '?ajaxrequest',
        success: function(data) {
          $('.region-content').replaceWith(data);
        }
      });
    });
  });
})(jQuery);

See more: https://www.drupal.org/docs/7/api/javascript-api/managing-javascript-in-drupal-7

Your behavior will be called automatically, so there is no need for $(document).ready.

6
  • That link is the answer to my jQuery headaches in Drupal for the past three months Feb 23, 2017 at 18:08
  • How did you solve it? the code works but it loads the entire website with the content page, is there any way to load only the page view? Thanks!
    – HomerO
    Feb 23, 2017 at 18:40
  • Because you are making a request to Drupal, which is going to reply with the default delivery callback which will return the entire rendered page. If you want just a piece of content, you need to do different things, which is somewhat beyond the scope of the original question.
    – Kevin
    Feb 23, 2017 at 18:45
  • What you want is some solution where the ajax request returns just the rendered view mode of the content and not the entire page response.
    – Kevin
    Feb 23, 2017 at 18:53
  • Yes, i will put my updated code on the first post, and what i did until now.
    – HomerO
    Feb 23, 2017 at 19:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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