Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
AJAX on Write Tab for Content Accordion
How would one go about reloading a portion of the Write page with AJAX when a user clicks the save button? Specifically, I am using a content accordion like the one in Gil Goldshlager’s TXPTIP and would like to update the accordion content without having to refresh the whole page after article edits are saved.
Last edited by photonomad (2014-04-29 05:52:38)
Offline
Re: AJAX on Write Tab for Content Accordion
Since building a plugin and utilizing callbacks for this is a bit over my head right now, I am using the following method. This code is pasted in the Additional JS Code area of the bot_write_tab_customize plugin. It uses MutationObserver() to monitor for the #message pane success message after an article is saved (successfully) and then reloads the content accordion:
<link rel="stylesheet" type="text/css" media="screen" href="css.php?n=tabber_content_accordion" />
<script type="text/javascript" src="jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#page-article td#article-col-1').prepend('<div id="ca_container"></div>');
$( "#ca_container" ).load( "index.php?event=content-accordion .content_accordion_wrap", function() {
$('.content_accordion a.title').click(function(event){
var items = $(this).next();
var level = $(this).attr('class').replace(/ title| active/g,'');
var lower_levels = $('.'+level).parent('li').find('.title');
var others = $('.'+level).parent('li').find('ul');
$('.'+level+'.title').not($(items).parent().children('.title')).removeClass('active');
$(others).not(items).slideUp('slow');
items.slideToggle('slow');
$(this).toggleClass('active');
if($(this).hasClass('active')){
}else{
$(lower_levels).removeClass('active');
}
event.preventDefault();
return false;
});
$('.content_accordion ul').each(function(){
$(this).find('.item:last').addClass('last');
});
});
var target = $( "#messagepane" )[0];
var observer = new MutationObserver(function( mutations ) {
mutations.forEach(function( mutation ) {
var newNodes = mutation.addedNodes;
if( newNodes !== null ) {
var $nodes = $( newNodes );
$nodes.each(function() {
var $node = $( this );
if( $node.hasClass( "success" ) ) {
$( "#ca_container" ).load( "index.php?event=content-accordion .content_accordion_wrap", function() {
$('.content_accordion a.title').click(function(event){
var items = $(this).next();
var level = $(this).attr('class').replace(/ title| active/g,'');
var lower_levels = $('.'+level).parent('li').find('.title');
var others = $('.'+level).parent('li').find('ul');
$('.'+level+'.title').not($(items).parent().children('.title')).removeClass('active');
$(others).not(items).slideUp('slow');
items.slideToggle('slow');
$(this).toggleClass('active');
if($(this).hasClass('active')){
}else{
$(lower_levels).removeClass('active');
}
event.preventDefault();
return false;
});
$('.content_accordion ul').each(function(){
$(this).find('.item:last').addClass('last');
});
});
}
});
}
});
});
var config = {
attributes: true,
childList: true,
characterData: true
};
observer.observe(target, config);
});
</script>If anyone finds this useful, great! If anyone thinks this method is awful and has suggestions for something different, let me know. Thanks.
Last edited by photonomad (2014-04-30 19:07:07)
Offline