I'm working on a page which contains various Youtube video thumbnails in divs which have links attached to each `<img>` and has Masonry on the container to control class switching to resize selected videos.

The idea is that the `div` is clicked on, which triggers masonry to change the CSS and also triggers an `.ajax()` request to django which returns the template for the selected video. (And will perform the opposite when you select it again to return the thumbnail template and reset to normal with Masonry).

As it stands I have two javascript functions, one triggering masonry on the div, and then another triggering the ajax request on the video link;

```
<script>
(function($) {
    $(document).ready(function() {
        var container = $('.masonry'), masonry;
        //masonry = new Masonry(container[0]);
        container.masonry('stamp', container.find('.stamp'));

        container.unbind('click').on('click', '.item', function() {
            var $this = $(this),
                this_link = $this.find('a'),
                $this_link = $(this_link),
                this_href = $this_link.attr('href'),
                video_id = $this.attr('data-video-id'),
                gigante = $this.hasClass('gigante'),
                selector = 'div#panel-area.video_grid div.masonry div.item.' + video_id;

            $.ajax({
                type: "GET",
                async: false,
                url: this_href,
                timeout: 5000,
                data: {'g': gigante},
                dataType: 'html',
                success : function(data) {
                    $(selector).html(data);
                    container.find('.item').removeClass('gigante');
                    $(this).toggleClass('gigante', !gigante);
                    container.masonry();
                    console.log('Selector: ' + selector + '\nSuccess');
                }
            })
            .done(function(msg){
                console.log('Done: ' + msg);
            })
            .fail(function(jqXHR, textStatus){
                console.log('Failed: ' + textStatus);
            });

        });
    });
})(jQuery);    </script>

```

And the HTML;

```
<div class="masonry js-masonry" data-masonry-options='{ "stamp": ".stamp", "isOriginLeft": false }'>
    <div class="mpus stamp">            
    </div>
    <div class="item video {{ object.id }}" data-video-id="{{ object.id }}">
        <a class="GetYoutubeVideo" href="{% url 'show_video' video_id=object.id %}">
            <i class="icon-play-circled play"></i>

            <span class="title">
                {{ object.get_title|slice:":20" }}...<br/>
                {{ object.date_created|date:"d/m/Y" }}
            </span>
            {{ object.get_img_tag }}
        </a>
    </div>
</div>

```

I'm a javascript novice essentially so I'm sure this is a very basic issue. When I run this through chrome dev tools with `async` disabled I see the ajax request return the expected content, but then ultimately end up on the target page instead of loading the content in to `$(selector)` as expected.
When I enable `async` it just instantly fails. I've been reading docs for ages but don't feel like I'm getting anywhere. Any help would be appreciated.