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);
}
});
}
