Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've searched hi and dry, tried various tutorials but I just cant get anything to work and its been a good 3 weeks now :(

I have a loop that displays custom post thumbnails in a grid using this jquery script I'm trying to make these thumbnail call an ajax event along with a nonce for security as per this ajax tutorial .

I just can't seem to find a clear way of doing it as there just isn't one tutorial that implements this clearly. I'm not sure which part of the thumbnail (href/id/slug!?!?) I need to send along with my ajax call to display the correct post content in a new div.

There are lots of themes out there that do this of course and after purchasing 2 they both don't use the ajax-admin.php or nonces to do the request and I really want to learn how to do it like that as from what I've read its much better practice.

I'm pretty sure that where I'm failing is in the jQuery as all the WordPress script in my functions.php and index.php are carbon copies of the code from the ajax tutorial mentioned above.

If anyone has a working example or pointers to good tutorials that would be great.

I'm able to connect to the database (checked in firebug) but I don't know how via a click so my guess is thats its in the jquery side of things!

A snippet of my current code where I think changes might be made:

function showPreview( $item ) {

    var preview = $.data( this, 'preview' ),
        // item´s offset top
        position = $item.data( 'offsetTop' );

    scrollExtra = 0;

    // if a preview exists and previewPos is different (different row) from item´s top then close it
    if( typeof preview != 'undefined' ) {

        // not in the same row
        if( previewPos !== position ) {
            // if position > previewPos then we need to take te current preview´s height in consideration when scrolling the window
            if( position > previewPos ) {
                scrollExtra = preview.height;
            }
            hidePreview();
        }
        // same row
        else {
            preview.update( $item );
            return false;
        }

    }

    // update previewPos
    previewPos = position;
    // initialize new preview for the clicked item
    preview = $.data( this, 'preview', new Preview( $item ) );
    // expand preview overlay
    preview.open();

}

function hidePreview() {
    current = -1;
    var preview = $.data( this, 'preview' );
    preview.close();
    $.removeData( this, 'preview' );
}

// the preview obj / overlay
function Preview( $item ) {
    this.$item = $item;
    this.expandedIdx = this.$item.index();
    this.create();
    this.update();
}

Preview.prototype = {
    create : function() {
        // create Preview structure:
        this.$title = $( '<h3></h3>' );
        this.$description = $( '<p></p>' );
        this.$href = $( '<a href="#">Visit website</a>' );
        this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href );
        this.$loading = $( '<div class="og-loading"></div>' );
        this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
        this.$closePreview = $( '<span class="og-close"></span>' );
        this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
        this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
        // append preview element to the item
        this.$item.append( this.getEl() );
        // set the transitions for the preview and the item
        if( support ) {
            this.setTransition();
        }
    },



    update : function( $item ) {

        if( $item ) {
            this.$item = $item;
        }

        // if already expanded remove class "og-expanded" from current item and add it to new item
        if( current !== -1 ) {
            var $currentItem = $items.eq( current );
            $currentItem.removeClass( 'og-expanded' );
            this.$item.addClass( 'og-expanded' );
            // position the preview correctly
            this.positionPreview();
        }

        // update current value
        current = this.$item.index();

        // update preview´s content
        var $itemEl = this.$item.children( 'a' ),
            eldata = {
                href : $itemEl.attr( 'href' ),
                largesrc : $itemEl.data( 'largesrc' ),
                title : $itemEl.data( 'title' ),
                description : $itemEl.data( 'description' )
            };

        this.$title.html( eldata.title );
        this.$description.html( eldata.description );
        this.$href.attr( 'href', eldata.href );

        var self = this;

        // remove the current image in the preview
        if( typeof self.$largeImg != 'undefined' ) {
            self.$largeImg.remove();
        }

        // preload large image and add it to the preview
        // for smaller screens we don´t display the large image (the media query will hide the fullimage wrapper)
        if( self.$fullimage.is( ':visible' ) ) {
            this.$loading.show();
            $( '<img/>' ).load( function() {
                var $img = $( this );
                if( $img.attr( 'src' ) === self.$item.children('a').data( 'largesrc' ) ) {
                    self.$loading.hide();
                    self.$fullimage.find( 'img' ).remove();
                    self.$largeImg = $img.fadeIn( 850 );
                    self.$fullimage.append( self.$largeImg );
                }
            } ).attr( 'src', eldata.largesrc ); 
        }

    },


    open : function() {

        setTimeout( $.proxy( function() {   
            // set the height for the preview and the item
            this.setHeights();
            // scroll to position the preview in the right place
            this.positionPreview();
        }, this ), 25 );

    },


    close : function() {

        var self = this,
            onEndFn = function() {
                if( support ) {
                    $( this ).off( transEndEventName );
                }
                self.$item.removeClass( 'og-expanded' );
                self.$previewEl.remove();
            };

        setTimeout( $.proxy( function() {

            if( typeof this.$largeImg !== 'undefined' ) {
                this.$largeImg.fadeOut( 'fast' );
            }
            this.$previewEl.css( 'height', 0 );
            // the current expanded item (might be different from this.$item)
            var $expandedItem = $items.eq( this.expandedIdx );
            $expandedItem.css( 'height', $expandedItem.data( 'height' ) ).on( transEndEventName, onEndFn );

            if( !support ) {
                onEndFn.call();
            }

        }, this ), 25 );

        return false;

    }

and the ajax code I'd like inserted and implemented instead of appending the content via inline html

function ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
    type: 'POST',
    url: ajaxloadpostajax.ajaxurl,
    data: {
        action: 'ajaxloadpost_ajaxhandler',
        postid: postid,
        nonce: nonce
    },
    success: function(data, textStatus, XMLHttpRequest) {
        var loadpostresult = '#loadpostresult';
        jQuery(loadpostresult).html('');
        jQuery(loadpostresult).append(data);
    },
    error: function(MLHttpRequest, textStatus, errorThrown) {
        alert(errorThrown);
    }
});

}

share|improve this question
1  
Post your code please. –  s_ha_dum Apr 16 '13 at 13:19
    
additional code added –  cmdv Apr 16 '13 at 19:05
    
Javascript variables are not prefixed with $ as in PHP. –  s_ha_dum Apr 16 '13 at 20:36
    
ok but do you think changing the prefix will help me with the problem? this is why I kept the code out I wanted to see if people had any examples or tutorials where I could learn how to do this I'm new to jQuery Ajax in WordPress. Surely the time you took to correct my typos could have been better spent trying to help! Thanks for your help though. –  cmdv Apr 16 '13 at 21:31
    
You can use $ in a variable name but I'd expect it to cause trouble especially since at least a couple of libraries use it. And it looks like you might be trying to use $ as both a jQuery alias, which doesn't work in WordPress (look up "jQuery noConflict"), and as a variable prefix, which also might be causing issues. I don't know the answer. Just pointing out something that raised a flag. –  s_ha_dum Apr 16 '13 at 21:44
show 1 more comment

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.