4

This is the first time I've ever tried to load a view using Ajax in Drupal7 and I would be appreciated if you help me from scratch. I've spent hours to learn how to do this but I still failed!

I created a view called image_gallery, it has three blocks called hd,tablet and phone and it displays set of images.I created a tab and I want to display and load these blocks (generally views) with Ajax. this my HTML:

    <div>
        <div id="image_gallery_tab">
            <ul>
                <li id="igt1">HD</li>
                <li id="igt2">Tablet</li>
                <li id="igt3">Cellphone</li>
            </ul>
        </div>
        <div id="image_gallery_content">
            <div class="igc" id="igc1">
                <?php print views_embed_view("image_gallery","hd") ?>
            </div>
            <div class="igc" id="igc2">
            </div>
            <div class="igc" id="igc3">
            </div>
        </div>
    </div>

I set the Use Ajax to "yes" in the views UI. this is my jQuery code:

$("#image_gallery_tab ul li").click(function(){
        var id = $(this).attr("id").slice(-1);
        $(".igc").css("display","none");
        if(id==2)
            {
            $.ajax({
                url: Drupal.settings.basePath + 'views/ajax',
                type: 'POST',
                dataType: 'json',
                data: 'view_name=image_gallery&view_display_id=tablet', // Pass a key/value pair.
                success: function(response) {
                  $("#igc2").innerHTML=response.display;
                },
                error: function(data) {
                 alert('An error occured!');
                }
              });
            }
    });

but it displays nothing. what is wrong here and what shall I do? thanks

3
  • I use your code and it worked great but there is a small problem. After switching between tabs jquery actions does not work. I have two views of comments in two tabs, when I switch between tabs I can not vote comments or reply comments any more. I have used ajax comments, votingAPI and rate module too. None of them work with ajax after switching between tabs. Got it?
    – shekoufeh
    Feb 7 '17 at 12:09
  • @shekoufeh May be the problem is with your JS code. Since when a new object is created, you need to define a-live functions in order to work with new objects
    – M a m a D
    Feb 8 '17 at 4:51
11

For anyone who ends up here looking for an answer, this is how you do it. First you need to enable "Use AJAX" under Other settings in the view and take note of the "Machine Name" as that is your display ID:

Views Other Settings

Then, this is how you pull it with JS using jQuery ajax:

$.ajax({
  url: Drupal.settings.basePath + '/views/ajax',
  type: 'post',
  data: {
    view_name: 'your_view_name',
    view_display_id: 'page', //your display id
    view_args: VIEW_ARGUMENT_HERE, // your views argument(s)
  },
  dataType: 'json',
  success: function (response) {
    if (response[1] !== undefined) {
      console.log(response[1].data); // do something with the view
    }
  }
});
6
  • where shuold I put this code? do you write both html and js in a block and load it in a page?
    – shekoufeh
    Jan 22 '17 at 5:30
  • Note that view_args has to be a string.
    – Huelfe
    Mar 2 '17 at 12:24
  • will that work even if view does have only block display without any page display?
    – kiranking
    Sep 26 '17 at 18:26
  • finally got it worked!. things missing in your answer is 1. what if drupal is under sub directory 2 what if clean url is not enabled(mod_rewrite). it won't work at all(404 not found). After struggling so many hours finally I found it.
    – kiranking
    Sep 26 '17 at 20:48
  • Link to some documentation would be nice :) Oct 6 '17 at 1:28

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.