如何重新显示我在输入中新添加的图片链接？

Question

我有一个用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();
});

在这个表单中，我有一个id='image-link-input'的输入，它是一个指向图片的链接。当我点击保存一切正常，如果我想重新编辑我把它放在第一位的链接，我希望它出现，这样我就可以知道我已经在里面放了什么。

Answer 1

好的，据我所知，您的用例是这样的: 1.用户在标题为" image“的字段中上传图像。2.用户在标题为"Liens vers URL”的输入框中输入一个url。3.用户单击"Save“，然后该链接将与图像相关联，这样当有人单击图像时，他/她将重定向到标题为"Liens vers URL”的字段中保存的链接。4.这将保存在数据库中。但是由于这需要一点时间，因为是AJAX调用，所以您希望图像立即链接到表单上的url。

如果所有这些都是正确的，那么请参阅下面的代码片段。

我在这里所做的是从文本框中捕获imagePath，然后将其设置为锚链接。

​

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

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

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

#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">
	<p>
		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>
	</p>
	<input type="text" id="image-link-input"/>
	<p>
		Enter the url where the image should redirect.  <em> eg. www.rediff.com</em>
	</p>
	<input type="text" id="image-destination"/>
	<button id="saveImage">Save</button>
</div>

​