Bild Vorschau in Rails Ansicht mit JS

Question

Ich habe ein Text_field, das ist die URL eines Bildes, und ich möchte das in und img-Tag laden. Ich möchte auch das Bild aktualisieren, wenn das Textfeld image_url den Fokus verliert, so dass sie die URL ändern und die Vorschau anzeigen können.

Hier ist die relevante erb für die Ansicht:

<div class="control-group"> 
    <%= f.label :image, :class => 'control-label' %> 
    <div class="controls"> 
     <%= f.text_field :image_url, :class => 'text_field', id: "image_url" %> 
    </div> 
    </div> 

    Preview: <img id="preview" src=""> 

und die eingebetteten js ...

<script type="text/javascript"> 

document.observe('dom:loaded', function() { 
    $('preview').src = $('image_url').text 
    $('image_url').bind("focusout",function(){ 
    $('preview').src = this.text 
    )} 

}); 

Auf Last ich nichts und das src ändert sich nicht

Answer 1

Sie müssen den Selektor des Objekts angeben, nach dem Sie suchen. Auch ich würde Dokument bereit verwenden.

$(document).ready(function() { 
    $('#preview').src = $('#image_url').text(); 
    $('#image_url').bind("focusout",function(){ 
    $('#preview').src = this.text(); 
    }); 
});