画像リンクを新しく入力に追加する方法を再表示するには？

Question

私はid='image-link-input'で入力を持つAjaxのクエリこのフォームで

$.ajax({ 
    type: "POST", 
    url: "{{ path('element_content_save', {'id': '__ID__'})}}".replace('__ID__', elementId), 
    data: postData, 
    beforeSend: function() { 
     NProgress.start(); 
    } 
}).done(function(r) { 
    $('#web-elements').show(); 
    $('#content-editor').hide(); 

    if(isCustom){ 
     if(typeof(elementIdentifier) != 'undefined'){ 
      var html = $('#frame')[0].contentWindow.getHtmlElement(elementIdentifier).html; 
      $.ajax({ 
       type: "POST", 
       url: "{{ path('element_save_configurable',{'id':'__ID__'}) }}".replace('__ID__', elementIdentifier), 
       data: {html: html}, 
       beforeSend: function() { 
        NProgress.start(); 
       } 
      }).done(function (r) { 
       $('#frame')[0].contentWindow.refreshElementByContentId(elementId); 
       NProgress.done(); 
      }); 
     } else { 
      $('#frame')[0].contentWindow.refreshElementByContentId(elementId); 
     } 
    } 
    NProgress.done(); 
}); 

で、データベース内のデータを保存するためのフォームを持っている、それが絵へのリンクです。私がすべてを保存したときに、私はそれが表示されたいので、私はすでにそれを入れて知ることができる最初の場所に置くそのリンクを再編集したい場合。

Answer 1

さて、私が理解から、ご使用の場合はこのようなものです： 1.ユーザーは、「イメージ」 2.ユーザーは「リアンのVERSのURL」 というタイトル入力ボックスにURLを入力するというフィールドに画像をアップロード3.ユーザーが「保存」をクリックすると、リンクがイメージに関連付けられます。その結果、ユーザーが画像をクリックすると、「Liens vers URL」というフィールドに保存されたリンクにリダイレクトされます。 4.これがデータベースに保存されます。しかし、これはAJAX呼び出しのために少し時間がかかるので、イメージをフォーム上のURLに即座にリンクさせたいと思っています。

これがすべて正しい場合は、下記のコードスニペットをご覧ください。

私がここでやっていることは、テキストボックスからimagePathをキャッチしてアンカーリンクとして設定していることです。

jQuery(document).ready(function() { 
 
\t jQuery('#saveImage').click(function() { 
 
\t \t var imgPath = jQuery('#image-link-input').val(); 
 
\t \t var imgDest = jQuery('#image-destination').val(); 
 
\t \t 
 

 
\t \t var imgElement = '<a href="' + imgDest + '">' + '<img src="' + imgPath + '">' + '</a>'; 
 

 
\t \t jQuery('#imageholder').html(imgElement); 
 
\t \t jQuery('#imageControls').append('<p class="success">Success!!. Now Click on the image to be redirected to the link</p>'); 
 
\t }); 
 
});

#imageholder { 
 
    background:url(http://www.gavaghan.ca/wp-content/uploads/2014/09/placeholder-300x200.png); 
 
    width:300px; 
 
    height:200px; 
 
    margin-bottom:30px; 
 
} 
 
.success { 
 
    margin-top:20px; 
 
    border:2px solid green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="imageholder"> 
 
    <img id="blah" src="http://www.gavaghan.ca/wp-content/uploads/2014/09/placeholder-300x200.png" alt="your image" /> 
 
</div> 
 

 

 
<div id="imageControls"> 
 
\t <p> 
 
\t \t Enter the path of an image in the text box below. <em> eg. http://free4kwallpaper.com/wp-content/uploads/nature/Colorful-UHD-4K-Mountains-Wallpaper-300x200.jpg </em> 
 
\t </p> 
 
\t <input type="text" id="image-link-input"/> 
 
\t <p> 
 
\t \t Enter the url where the image should redirect. <em> eg. www.rediff.com</em> 
 
\t </p> 
 
\t <input type="text" id="image-destination"/> 
 
\t <button id="saveImage">Save</button> 
 
</div>