RJM RJM - 1 month ago 20
Javascript Question

Ajax load doubles content

I have a site built using wordpress as the cms and the index has a long accordian style list of post titles and once you click on this heading the content for that post is loaded via ajax into the index page.

I have the problem that when the heading is clicked again, it loads the post content again and if you click a different heading it won't close and remove the previous one that has been clicked.

I am new to working with ajax and unsure how to go about fixing this. Is there a way to make the content be removed once the heading is clicked a second time to close the accordion or another heading is clicked to expand and open. Live site is here: http://www.minervasydney.com/

Below is the code for my ajax and the part in my index file that lists the headings. If anyone has ideas it would be greatly appreciated. Thank you!

AJAX

$("a.exhibitionInformation").on("click", function(event) {

var exhibitionContainer = $(this).parent(".exhibition");
var url = $(this).attr("href");
var doc = $(this).next(".exhibitionDocuments");
var title = convertToSlug($(this).text().split("\n")[1]);
var slug = $(this).attr("data-slug");
$(this).toggleClass("selected");

if($(doc).is(':not(:hidden)')) {
$(doc).slideToggle();
} else {


$.ajax({
url: url,
type: "GET",
success: function(data) {
var content = $(data).find(".single-document");
$(doc).append(content).slideToggle(300);
$("html, body").animate({ scrollTop: exhibitionContainer.offset().top - 26 });
window.location.hash = slug;
}
});

}

event.preventDefault();
});


//ajaxstarStop Loading
$( document ).ajaxStart(function() {
$( "#loading" ).fadeIn(100);
});

$( document ).ajaxStop(function() {
$( "#loading" ).fadeOut();
});


function convertToSlug(Text)
{
return Text
.toLowerCase()
.replace(/ /g,'-')
.replace(/[^\w-]+/g,'')
;
}


INDEX

<section class="exhibition">

<a class="exhibitionInformation" href="<?php the_permalink(); ?>" data-slug="<?php echo $post->post_name; ?>">
<span class="dates"><?php echo types_render_field("dates", array("argument1"=>"value1")); ?></span>
<span class="opening"><?php echo types_render_field("opening", array("argument1"=>"value1")); ?></span>
<span class="title">&#8220;<?php the_title(); ?>&#8221;</span>
<span class="artist"><?php echo types_render_field("artist", array("argument1"=>"value1")); ?></span>
<span class="extra"><?php echo types_render_field("extra", array("argument1"=>"value1")); ?></span>
</a>


<article class="exhibitionDocuments">

</article>

</section>

Answer

Within your ajax request:

$.ajax({
    url: url,
    type: "GET",
    success: function(data) {
        var content = $(data).find(".single-document");                 
        $(doc).append(content).slideToggle(300);                    
        $("html, body").animate({ scrollTop: exhibitionContainer.offset().top - 26 });
        window.location.hash = slug;
    }           
});

On the second line under success, change .append to .html.

The line should now be:

$(doc).html(content).slideToggle(300);

It will load the content AND remove previous if there was.


EDIT

To close a previously opened .exhibitionDocuments:

$(document).find(".exhibitionDocuments").hide();

Place it on top of your success callback.
   (right before var content = $(data).find(".single-document");)