0

I have 2 functions in a custom AJAX callback which are really confusing me, one returns an image from a single node, the other retrieves a list of nodes first, then loops through them and returns images from each of them, even though the code which returns the image HTML is shared by both functions, the multiple node return wraps everything in a div.

Single AJAX callback

function _append_thumb_to_deck($node) {
    if (!empty($node)) {
        if ($node->field_image) {
            // Load the image as a thumbnail
            $thumbnails = get_thumbnails($node);

            // Prepare an ajax command to insert the node html into our ajax wrapper.
            $commands = array();
            $commands[] = ajax_command_append('#thumbs', $thumbnails);
            $commands['effect'] = 'fade';

            // Render the commands into JSON and print them.
            print ajax_render($commands);
            exit;
        }
    }
}

Multiple AJAX

function _append_multi_thumb_to_deck($node) {
    if (!empty($node)) {
        if ($thumbs = get_thumb_list($node->nid)) { 
            // get_thumb_list is just a function to return an array of Node ID => Node object
            // Load each image as a thumbnail
            foreach ($thumbs as $nid => $node) {
                if ($node->field_image) {
                    $thumbnails .= get_thumbnails($node);
                }
            }

            // Prepare an ajax command to insert the node html into our ajax wrapper.
            $commands = array();
            $commands[] = ajax_command_append('#thumbs', $thumbnails);
            $commands['effect'] = 'fade';

            // Render the commands into JSON and print them.
            print ajax_render($commands);
            exit; 
        }      
    }
}

HTML callback

function get_thumbnails($node) {
    $img = image_get_info($node->field_image[LANGUAGE_NONE][0]['uri']);
    $vars = array(
        'style_name' => 'thumbnail',
        'path' => $node->field_image[LANGUAGE_NONE][0]['uri'],
        'width' => $img['width'],
        'height' => $img['height'],
        'alt' => t(''),
        'title' => t(''),
        'attributes' => array(
           'data-nid' => $node->nid,
        ),
    );
    $thumbnail = theme_image_style($vars);
    $thumbnail = "<li class='thumb' data-nid='{$node->nid}'>{$thumbnail}</li>";
    return $thumbnail;
}

This returns something like

<li class="thumb" data-nid="9"><img data-nid="9" src="http://dummyimage.com/160x90/cccccc/000000.png" width="160" height="90" alt="" title=""></li>

I can even inspect the HTML which is intended to be returned by the multiple function and it appears to be correct, it's just a long string of multiple li tags containing images, properly formed HTML, no hanging tags, no opening or closing divs etc, and yet for some reason, the function to append multiple thumbs wraps everything in a div, whereas the other one doesn't.

Is there some kind of character limit or something which is causing it to be added in a div?

0

Apparently yes, because reasons

https://stackoverflow.com/questions/9607393/drupal-7-ajax-command-creates-unwanted-div

The solution to anyone else having this issue is to use either your own callback, or instead use ajax_command_invoke("#my-div", 'append', array($content)); and that will do the same as ajax_command_append, both solutions are more fleshed out in the link

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.