修复 Pinghsu 主题开启评论 PJAX 后报错问题

经验 现有 11 评论

本博客所使用的主题在开启 PJAX 功能后在评论处回复可见报错。

前言

具体问题参见主题作者网站即可复现,如下图

或者参照 Typecho 博客 PJAX 报错 The new child element contains the parent

溯源

若未开启 HTML 压缩功能,可看见报错函数为:

            comment.appendChild(response);
            this.dom('cancel-comment-reply-link').style.display = '';
            if (null != textarea && 'text' == textarea.name) {
                textarea.focus();
            }
            return false;

解决

对应主题中的 comments.php 文件 70 行(原版主题)

<div id="<?php $this->respondId(); ?>" class="comment-container">
    <div id="comments" class="clearfix">
        <?php $this->comments()->to($comments); ?>
        <?php if($this->allow('comment')): ?>
            <span class="response">Responses<?php if($this->user->hasLogin()): ?> / You are <a href="<?php $this->options->profileUrl(); ?>" data-no-instant><?php $this->user->screenName(); ?></a> here, do you want to <a href="<?php $this->options->logoutUrl(); ?>" title="Logout" data-no-instant>logout</a> ?<?php endif; ?> <?php $comments->cancelReply(' / Cancel Reply'); ?></span>
        <form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" class="comment-form" role="form" onsubmit ="getElementById('misubmit').disabled=true;return true;">
            <?php if(!$this->user->hasLogin()): ?>
            <input type="text" name="author" maxlength="12" id="author" class="form-control input-control clearfix" placeholder="Name (*)" value="" required>
            <input type="email" name="mail" id="mail" class="form-control input-control clearfix" placeholder="Email (*)" value="" <?php if ($this->options->commentsRequireMail): ?> required<?php endif; ?>>
            <input type="url" name="url" id="url" class="form-control input-control clearfix" placeholder="Site (http://)" value="" <?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?>>
            <?php endif; ?>

            <textarea name="text" id="textarea" class="form-control" placeholder="Your comment here. Be cool. " required ><?php $this->remember('text',false); ?></textarea>

            <button type="submit" class="submit" id="misubmit">SUBMIT</button>
            <?php $security = $this->widget('Widget_Security'); ?>
            <input type="hidden" name="_" value="<?php echo $security->getToken($this->request->getReferer())?>">
        </form>

问题就在于此处,评论按钮产生新的子元素包含父元素,修改为:

<div class="comment-container">
    <div id="comments" class="clearfix">
        <?php $this->comments()->to($comments); ?>
        <?php if($this->allow('comment')): ?>
            <div id="<?php $this->respondId(); ?>">
            <span class="response" data-no-instant>Responses<?php if($this->user->hasLogin()): ?> / You are <a href="<?php $this->options->profileUrl(); ?>" data-no-instant><?php $this->user->screenName(); ?></a> here, do you want to <a href="<?php $this->options->logoutUrl(); ?>" title="Logout" data-no-instant>logout</a> ?<?php endif; ?> <?php $comments->cancelReply(' / Cancel Reply'); ?></span>
        <form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" class="comment-form" role="form" onsubmit ="getElementById('misubmit').disabled=true;return true;">
            <?php if(!$this->user->hasLogin()): ?>
            <input type="text" name="author" maxlength="12" id="author" class="form-control input-control clearfix" placeholder="Name (*)" value="" required>
            <input type="email" name="mail" id="mail" class="form-control input-control clearfix" placeholder="Email (*)" value="" <?php if ($this->options->commentsRequireMail): ?> required<?php endif; ?>>
            <input type="url" name="url" id="url" class="form-control input-control clearfix" placeholder="Site (http://)" value="" <?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?>>
            <?php endif; ?>

            <textarea name="text" id="textarea" class="form-control" placeholder="Your comment here. Be cool. " required ><?php $this->remember('text',false); ?></textarea>

            <button type="submit" class="submit" id="misubmit">SUBMIT</button>
            <?php $security = $this->widget('Widget_Security'); ?>
            <input type="hidden" name="_" value="<?php echo $security->getToken($this->request->getReferer())?>">
        </form></div>

此外在此文件约 58 行处

<span class="comment-reply"><?php $comments->reply('Reply'); ?></span>

改为

<span class="comment-reply" data-no-instant><?php $comments->reply('Reply'); ?></span>

或参照下图对比图进行修改(更直观一些)

小贴士:经 @泽泽社长 指正,图中第 61 行处修改为修正点击回复按钮时刷新页面的的问题。

修改完成后点击回复时可见在其父节点上新增一个回复框,控制台再无报错信息。

附录

支持信息

参考链接

如果遇到问题或者对文章内容存疑,请在下方留言,博主看到后将及时回复,谢谢!
回复
回答36+14=
  1. 软件小编

    请问博主菜单栏分类功能是如何实现的,可以开源修改后的主题吗

    Firefox 73.0 Windows 10 回复
  2. 老张说思路

    这个主题真的很漂亮,很有特色

    Chrome 79.0.3945.117 macOS Catalina 回复
  3. 很有用,感谢分享!

    Chrome 79.0.3945.88 macOS Catalina 回复
    1. @娜

      我修改后发现底边的页脚出现了其他的标记,请问这个如何处理?

      Chrome 79.0.3945.88 macOS Catalina 回复
  4. Jdeal

    已修改,很久前研究过评论框跟随问题,最后不了了之了,哈哈,没想到你这看到了,学习了,就是评论框跟随后的嵌在评论里面的样式有点不太喜欢,等有空再调整调整,再次感谢~

    Chrome 79.0.3945.88 macOS High Sierra 回复
    1. 空白海报
      @Jdeal

      客气了,我这也是借花献佛,感觉嵌入的框就是不太鲜明罢了,加个浅色的边框应该就可以解决了。

      Safari 605.1.15 macOS Catalina 回复
  5. zmmio

    你看下你登录后台,然后前端回复那里评论框还在不

    Chrome 79.0.3945.79 Windows 10 回复
    1. 空白海报
      @zmmio

      依然有啊,没有问题。怎么你改后存在 bug ?

      Chrome 79.0.3945.79 macOS Catalina 回复
      1. zmmio
        @空白海报

        可能我添加得css出了问题,我去看下。我早上也在泽泽那边看到了这个,哈哈

        Chrome 79.0.3945.79 Windows 10 回复
        1. 空白海报
          @zmmio

          他那篇博客的主题下载地址放错了,我今天下载才发现,然后通知了泽泽,然后遗憾地发现那篇文章那么久了都没人发现。

          Chrome 79.0.3945.79 macOS Catalina 回复
          1. zmmio
            @空白海报

            对,我也是今天收到他得邮件,然后下载来对比才知道,给个赞

            Chrome 79.0.3945.79 Windows 10 回复