adam98110

Okay, here’s the deal. The last bit of code was slowing down the site because .ajaxComplete() can only bind to $(document). So this code was firing all the time!

Here is the fix. Go into P2.js and get rid of the second code block we added (above). Then look towards the bottom (around line 861) for this:

$.post(
	ajaxUrl,
	args,
	function(result) {
	...
},
'json');

and modify it to look like this:

$.post(
	ajaxUrl,
	args,
	function(result) {
	...
	/*-- Catch changes to existing posts --*/
	$('post_id').ready(function(){
		MathJax.Hub.Queue(["Typeset",MathJax.Hub,this]);
	});
},
'json');

Then just make sure you have the Simple MathJax plugin and everything should work great!

Okay, I think I figured out something that works for existing posts that get edited. Feels a little slow (ideas??) but it gets the job done. Here is the complete code:

// Catch new posts submit
$("#new_post").submit(function(trigger) {
	if ( $( 'ul.ui-autocomplete' ).is( ':visible' ) )
		return false;

	p2.posts.submit(trigger);
	trigger.preventDefault();

	/*-- New code here --*/
	$(document).ajaxComplete(function(){
		MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
	});
});

/*-- New code to catch changes to existing posts --*/
$('.edit-post-link').click(function(){
	$('.posttext').ready(function(){
		$('div').ajaxComplete(function(){
			MathJax.Hub.Queue(["Typeset",MathJax.Hub,this]);
		});
	});
});

Hi Kathryn,

Apparently, this solution works for new posts but not for existing posts that the user later edits. This is either because $(‘#new_post’) specifically targets a newly created post or perhaps because edited posts are not refresh using Ajax?

Is there another div ID or class that I should use to target existing posts that get edited? Or perhaps a method other than .ajaxComplete?

Thanks!

Okay, I figured out part of this. In order to refresh just the active div, replace this code:

/*-- New code here --*/
$(document).ajaxComplete(function(){
	MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
});

with this code:

/*-- New code here 2 --*/
$('div').ajaxComplete(function(){
	MathJax.Hub.Queue(["Typeset",MathJax.Hub,this]);
});

I just solved my own problem ?? Here’s what I did:

Open the file: p2.js and change this code block:

// Catch new posts submit
$("#new_post").submit(function(trigger) {
	if ( $( 'ul.ui-autocomplete' ).is( ':visible' ) )
		return false;

	p2.posts.submit(trigger);
	trigger.preventDefault();
});

to look like this:

// Catch new posts submit
$("#new_post").submit(function(trigger) {
	if ( $( 'ul.ui-autocomplete' ).is( ':visible' ) )
		return false;

	p2.posts.submit(trigger);
	trigger.preventDefault();

	/*-- New code here --*/
	$(document).ajaxComplete(function(){
		MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
	});
});

If anyone can tell me a less invasive way to get this done, I’d love to get some feedback.

Thanks!
-Adam

Thanks Kathryn.

Actually, it looks like this is something that can be handled in the configuration script for MathJax. I have TiddlyWiki setup with a similar MathJax plugin and it works fine.

Here is a code snippet:

config.extensions.MathJax = {
  mathJaxScript : "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML",

  displayTiddler: function(TiddlerName) {
    config.extensions.MathJax.displayTiddler_old.apply(this, arguments);
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
  }
};

jQuery.getScript(config.extensions.MathJax.mathJaxScript, function(){
    MathJax.Hub.Config({
      tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
      extensions: ["tex2jax.js"],
      "HTML-CSS": { scale: 100 }
    });

    MathJax.Hub.Startup.onload();
    config.extensions.MathJax.displayTiddler_old = story.displayTiddler;
    story.displayTiddler = config.extensions.MathJax.displayTiddler;
});

It looks like all I would need to get this to work with P2 is a callback that fires when a post is updated… something equivalent to:

displayTiddler: function(TiddlerName) {}

Any ideas?

Thanks,
-Adam