I am having issues displaying images in a HTML div that loads dynamically using jQuery .load()
. The jQuery function I am currently using is included below:
jQuery(document).ready(function(e) {
// Past sendout nav trigger function
e( ".btn--nav-trigger" ).click(function() {
e( this ).toggleClass( "btn--nav-trigger-active" );
e( ".sendout__list" ).toggleClass( "sendout__list--open" );
});
// AJAX .load function for sendout post content
e( ".sendout-link" ).click(function() {
e( ".btn--nav-trigger" ).toggleClass( "btn--nav-trigger-active" );
e( ".sendout__list" ).toggleClass( "sendout__list--open" );
var post_url = e( this ).attr( "href" );
e( "#sendout-container" ).html( '<div class="loading"></div>' );
e( "#sendout-container" ).load( post_url, function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "Sorry but there was an error: ";
e( "#sendout-container" ).html( msg + xhr.status + "" + xhr.statusText );
}
});
return false;
});
});
The function successfully loads the text and YouTube iframe from the selected WordPress post, but it always strips the images.
The href
attribute from the function is using <?php the_permalink(); ?>
from WordPress. The individual posts load correctly, but something with the .load()
function is stripping out the full <img>
tags.
Update
It looks like the entire div that contains the image is being stripped as well. Not sure why this is happening. I have included the WordPress HTML/PHP code that is being fully stripped when using the .load()
function below. This code is displayed correctly using WordPress/PHP.
<?php if(get_field( 'meme_one_image' )): ?>
<div class="sendout__row sendout--meme">
<?php
$memeOneImage = get_field( 'meme_one_image' );
if( !empty($memeOneImage) ): ?>
<img src="<?php echo $memeOneImage['url']; ?>" alt="<?php echo $memeOneImage['alt']; ?>" />
<div class="sendout--meme_share">
<h4>Share this meme</h4>
<a href="http://www.facebook.com/sharer/sharer.php?u=<?php echo $memeOneImage['url']; ?>" class="button">Facebook</a>
<a href="http://twitter.com/intent/tweet?text=<?php echo $memeOneImage['title'] .' : '. $memeOneImage['url']; ?>" class="button">Twitter</a>
<button class="button copy-button" data-clipboard-text="<?php echo $memeOneImage['url']; ?>">Copy URL</button>
</div>
<?php endif; ?>
</div>
<?php endif; ?>