Location of Embedly (JQuery-Preview) Results

Question

Embedly/Jquery-Preview has been fantastic. However, I'm trying to change the location of the preview result, and having trouble. Right now, the result appears right below the input field...but I'd rather have it in a separate part of the page. Is there a way to do this?

I've tried changing the location of the selector and loading divs, but that hasn't helped. It seems to ignore those divs and put it right below the submit button.

Below is my code:

   <form accept-charset="UTF-8" action="private" class="new_comment" data-remote="true" id="new_comment" method="post">
   <input class="photo_comm" id="comment_comment" name="comment[comment]" placeholder="add a comment or link..." size="30" type="text" /><span type="text" id="counter">1000</span>
   <input class="btn btn-primary btn-mini" data-disable-with="Submitting..." name="commit" type="submit" value="Post" />
   </form>

   <!-- Placeholder that tells Preview where to put the loading icon-->
   <div class="loading">
        <img src='http://embedly.github.com/jquery-preview/images/loading-rectangle.gif'>
   </div>

   <!-- Placeholder that tells Preview where to put the selector-->
   <div class="selector"></div>

$('#comment_comment').preview({ key:'60f1dcdf3258476794784148a6eb65e7', // Sign up for a key: http://embed.ly/pricing
  selector : {type:'rich'},
  preview : {
    submit : function(e, data){
      e.preventDefault();
      $.ajax({
        dataType: 'script',
        url: this.form.attr('action'),
        type: 'POST',
        data: data
      });
    },
  },
  autoplay : 0,
  maxwidth : 400,
  display : {display : 'rich'}
});

UPDATE

I can move the selector () up and down within the form...but cannot move it outside of the form, or put a between the selector div and the end of the form. I need to move the selector outside of the form, which is the issue. Any help would be great. Thank you.

Answer 1

I believe you actually have to set the selector on the Selector Object and not the Display.

Try:

...
selector : {type:'rich', selector: '#show_me'},
...

Note the the selector needs to live inside the form element.

Answer 2

The display option have selector option

from docs

Display
Create's a Feed item for a given object.
.....
selector
    Tells create where to prepend the Feed item html to. The default value is #feed.

With your sample:

HTML:

<div id="show_here"></div>
<form accept-charset="UTF-8" action="private" class="new_comment" data-remote="true" id="new_comment" method="post">
   <input class="photo_comm" id="comment_comment" name="comment[comment]" placeholder="add a comment or link..." size="30" type="text" /><span type="text" id="counter">1000</span>
   <input class="btn btn-primary btn-mini" data-disable-with="Submitting..." name="commit" type="submit" value="Post" />
   </form>

   <!-- Placeholder that tells Preview where to put the loading icon-->
   <div class="loading">
        <img src='http://embedly.github.com/jquery-preview/images/loading-rectangle.gif'>
   </div>

JS:

$('#comment_comment').preview({ key:'60f1dcdf3258476794784148a6eb65e7', // Sign up for a key: http://embed.ly/pricing
  selector : {type:'rich'},
  preview : {
    submit : function(e, data){
      e.preventDefault();
      $.ajax({
        dataType: 'script',
        url: this.form.attr('action'),
        type: 'POST',
        data: data
      });
    }
  },
  autoplay : 0,
  maxwidth : 400,
  display : {display : 'rich',selector : "#show_here"}
});