WordPress.org

Forums

P2
[resolved] Simple Mathjax does not refresh on P2 theme (10 posts)

  1. adam98110
    Member
    Posted 1 year ago #

    I'm hoping someone can help! I have installed WordPress with the P2 theme and the Simple Mathjax plugin.

    Mathjax renders find on load. But it breaks the moment I update one of the posts. I have to actually refresh the entire page to get this to render.

    I read on the mathjax homepage that this is an issue with AJAX. So I have tried placing this code into the P2 header.php file:

    <?php wp_enqueue_script('jquery'); ?>
    <?php wp_head(); ?>
    <script type="text/javascript">
    $(document).ready(function() {
    	$('.postcontent p').ajaxComplete('change', function() {
    		MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
    	});
    });
    </script>

    But this doesn't work.

    Any ideas?? Thanks!

  2. Hi there - you might want to try asking the Simple MathJax developer - it might be something they can help with:

    http://wordpress.org/support/plugin/simple-mathjax

    Good luck!

  3. adam98110
    Member
    Posted 1 year ago #

    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 : "http://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

  4. adam98110
    Member
    Posted 1 year ago #

    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

  5. adam98110
    Member
    Posted 1 year ago #

    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]);
    });
  6. Glad you got this working, and thanks for posting your solution!

  7. adam98110
    Member
    Posted 1 year ago #

    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!

  8. adam98110
    Member
    Posted 1 year ago #

    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]);
    		});
    	});
    });
  9. adam98110
    Member
    Posted 11 months ago #

    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!

  10. Kathryn
    Automattic Happiness Engineer
    Posted 11 months ago #

    Thanks for keeping this thread updated with your fixes!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic