Hey folks,

I know this one is not exactly EE, but I was wondering if anyone has used jquery ajax to display comment previews?  I was hoping to use it on a site, and wasn’t sure how to go about it.

Thanks!
Zac

You could have a look at this plugin:

http://rikrikrik.com/jquery/magicpreview/

Hey jedidiah,

A little different than what I had though, but that may work just fine!

Thanks

I’m using MagicPreview on a site I’m working on right now and it works like a charm.

Yeah, I plugged it in and it’s working great!

Jedidiah - 02 December 2008 12:10 PM

You could have a look at this plugin:

http://rikrikrik.com/jquery/magicpreview/

beautiful find - I have a use for this right now.

Zac G. - 02 December 2008 03:19 PM

Yeah, I plugged it in and it’s working great!

Glad it worked for you, it is a great little plugin.

Not sure if anyone has made any changes to the MagicPreview plugin like this or not, but what I’d like to do with it is like what John is doing here with his comment form: http://www.tyssendesign.com.au/articles/which-is-better-for-search-engines-plain-text-or-alt-attributes/

Once someone starts typing their name, their name shows up in the preview as well as “says…” How could I go about doing something similar to that? I’d rather have the additional text show up once someone starts typing rather than simply putting it straight into the HTML statically.

Have a look at the source code of that page, it calls a script called live-comment-preview.js, it looks like it’s some kind of wordpress plugin.

On a site I’m wrapping up now I used this jQuery technique but added Markdown formatting instead of HTML.

Deron Sizemore - 02 December 2008 06:40 PM

Not sure if anyone has made any changes to the MagicPreview plugin like this or not, but what I’d like to do with it is like what John is doing here with his comment form: http://www.tyssendesign.com.au/articles/which-is-better-for-search-engines-plain-text-or-alt-attributes/

Once someone starts typing their name, their name shows up in the preview as well as “says…” How could I go about doing something similar to that? I’d rather have the additional text show up once someone starts typing rather than simply putting it straight into the HTML statically.

There is an option to call a function in the options either onBefore or onAfter

I’ve put a quick and nasty example that uses the onAfter up here
http://jedidiah.eu/code/javascript/magicpreview/

e-man - 02 December 2008 07:57 PM

Have a look at the source code of that page, it calls a script called live-comment-preview.js, it looks like it’s some kind of wordpress plugin.

On a site I’m wrapping up now I used this jQuery technique but added Markdown formatting instead of HTML.

I’ve never seen that one before. I thought I had searched through the jQuery site pretty thoroughly too. I suppose not.

When you say you added Markdown formatting instead of HTML. Is that something done via jQuery?

@ jedidiah: seriously sweet this
@ deron: the markdown is a combination of the standard EE comment form, the jQuery in abovementioned article and Showdown to handle the Markdown formatting in the JS.
EE-code:

jQuery code:

with, of course a call to the the showdown script in the head of your page:

and, where you display the actual comment:

How does using a jQuery “preview” differ from using EE’s built in preview?

RonnieMc - 02 December 2008 09:22 PM

How does using a jQuery “preview” differ from using EE’s built in preview?

LOL, EE has a built-in preview?

Jedidiah - 02 December 2008 08:13 PM

Deron Sizemore - 02 December 2008 06:40 PM

Not sure if anyone has made any changes to the MagicPreview plugin like this or not, but what I’d like to do with it is like what John is doing here with his comment form: http://www.tyssendesign.com.au/articles/which-is-better-for-search-engines-plain-text-or-alt-attributes/

Once someone starts typing their name, their name shows up in the preview as well as “says…” How could I go about doing something similar to that? I’d rather have the additional text show up once someone starts typing rather than simply putting it straight into the HTML statically.

There is an option to call a function in the options either onBefore or onAfter

I’ve put a quick and nasty example that uses the onAfter up here
http://jedidiah.eu/code/javascript/magicpreview/

$(function () {
    $('input:text, textarea').magicpreview('mp_', { 'onAfter': function (value) {
            if(value){
                $('#previewbox').fadeIn("slow");
            }
      } });
          
});

Nice!! Works like a charm even though I don’t fully understand how it works. *Runs to start reading his Learning jQuery book*

e-man - 02 December 2008 08:53 PM

@ jedidiah: seriously sweet this
@ deron: the markdown is a combination of the standard EE comment form, the jQuery in abovementioned article and Showdown to handle the Markdown formatting in the JS.
EE-code:

<h4>Live Comment Preview</h4>
<div id="live-preview">
</div><!-- #live-preview -->
<div id="comment_form_holder">
{exp:comment:form weblog="weblogged"}
<label for="comm_name">Name: <input type="text" name="name" value="{name}" size="50" id="comm_name" /></label>
<label for="comm_email">Email: <input type="text" name="email" value="{email}" size="50" id="comm_email" /></label>
<label for="comm_website">Website: <input type="text" name="url" value="{url}" size="50" id="comm_website" /></label>
<label for="comm_content">Your comment: <span id="markdown">Use of <a href="http://daringfireball.net/projects/markdown/syntax" title="guide to markdown syntax">Markdown</a> allowed</span><textarea name="comment" cols="70" rows="10" id="comm_content">{comment}</textarea></label>
<input type="submit" name="submit" value="Submit" />
{/exp:comment:form}

jQuery code:

// easy comment previewing + showdown for markdown parsing in preview
    
      var $comment = '';
      $('#comm_content').keyup(function() {
        var converter = new Showdown.converter();
        $comment = $(this).val();
        $comment = converter.makeHtml($comment);
        $('#live-preview').html($comment);
      });

with, of course a call to the the showdown script in the head of your page:

<script src="{site_url}js/showdown.js" type="text/javascript"></script>

and, where you display the actual comment:

{exp:markdown}{comment}{/exp:markdown}

That’s awesome! Thanks for the preview of how it works with Markdown.

RonnieMc - 02 December 2008 09:22 PM

How does using a jQuery “preview” differ from using EE’s built in preview?

They’re referring to a live preview. So it shows you what your post will look like in real time, as you write it.

EE’s preview requires a form submit and a page refresh to display it.

JT Thompson - 02 December 2008 10:39 PM

They’re referring to a live preview. So it shows you what your post will look like in real time, as you write it.

EE’s preview requires a form submit and a page refresh to display it.

Got it. Looks very slick and sassy.

Just two more jQuery plugins and my web pages will be so heavy they’ll need to be delivered by the post office.

Wow!  Thanks for all of the great options here… better go try some of them out

I’ve tried three or four of these already. The one I like best is from Rockatee. Very easy installation, small script, painless, highly customizable via CSS.