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

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);
                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) {
                error: function(data) {
                 alert('An error occured!');

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

  • 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, 2017 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, 2017 at 4:51
  • Related: drupal.stackexchange.com/questions/70079/… Oct 6, 2017 at 1:43

1 Answer 1


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:

  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
  • 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, 2017 at 5:30
  • Note that view_args has to be a string.
    – Huelfe
    Mar 2, 2017 at 12:24
  • will that work even if view does have only block display without any page display?
    – kiranking
    Sep 26, 2017 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, 2017 at 20:48
  • Link to some documentation would be nice :) Oct 6, 2017 at 1:28

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.