[英]Replacing img src in <input type=“image” after AJAX success
I have a series of icons that when clicked open various tooltip popups where the user can perform actions such as updating meta tags for a product 我有一系列图标,单击这些图标可以打开各种工具提示弹出窗口,用户可以在其中执行操作,例如更新产品的元标记
One such icon is coded like this 这样的图标就是这样编码的
<input type="image" class="icon-meta meta-288" src="images/icon_edit_metatags_off.png" border="0" alt="Meta Tags" title="Meta Tags">
When the user has added the required content I want to change the icon from icon_edit_metatags_off.png to icon_edit_metatags_on.png 当用户添加了必需的内容后,我想将图标从icon_edit_metatags_off.png更改为icon_edit_metatags_on.png
In the php file for my AJAX I have the following 在我的AJAX的php文件中,我有以下内容
if (zen_get_metatags_keywords($products_id, (int)$_SESSION['languages_id']) or zen_get_metatags_description($products_id, (int)$_SESSION['languages_id'])) {
$metatag_icon = '<input type="image" class="icon-meta meta-'.$products_id.'" src="images/icon_edit_metatags_on.png" border="0" alt="Meta Tags" title="Meta Tags" />';
} else {
$metatag_icon = '<input type="image" class="icon-meta meta-'.$products_id.'" src="images/icon_edit_metatags_off.png" border="0" alt="Meta Tags" title="Meta Tags" />';
}
echo json_encode(array('meta'=>$metatag_icon, 'asHtml' => '<div class="alert alert-info admin-meta-update-success"><strong>Meta Tags Updated</strong></div>'));
And my script is 我的剧本是
$('.product-meta-tags').submit(function(e){
e.preventDefault();
$.ajax({
url: 'update_product_meta_tags_ajax.php',
type: 'POST',
data: $(this).serialize(),
dataType: 'html'
})
.done(function(data) {
var obj = JSON.parse(data);
console.log(obj.meta);
$('.tooltip-metatags-<?php echo $products_id; ?>').tooltipster('close');
var elem = $('.update-<?php echo $products_id; ?>');
var elem2 = $('.meta-<?php echo $products_id; ?>');
elem.fadeOut('slow', function() {
elem.html(obj.asHtml).fadeIn('slow', function() {
elem.delay(1200).fadeOut('slow');
});
});
elem2.fadeOut('slow', function() {
elem2.html(obj.meta).fadeIn('slow');
});
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
When the tooltip closes the original icon fades, but then instead of showing the changed state, it instead shows the original image. 当工具提示关闭时,原始图标消失,但不显示更改后的状态,而是显示原始图像。
If I view source on the icon, the HTML has changed to 如果我在图标上查看源代码,则HTML已更改为
<input type="image" class="icon-meta meta-288" src="images/icon_edit_metatags_off.png" border="0" alt="Meta Tags" title="Meta Tags"><input type="image" class="icon-meta meta-288" src="images/icon_edit_metatags_on.png" border="0" alt="Meta Tags" title="Meta Tags"></input>
I thought the content from the AJAX success would just replace what was originally in the div, as I have used to update displayed prices etc, but it just seems to be appending it. 我以为AJAX成功的内容将取代div中原来的内容,因为我曾经用来更新显示的价格等,但似乎只是在添加它。
I did try to target the src directly using something like 我确实尝试使用类似的方法直接定位src
$("#elementId").attr("src","value");
but that gave me a basic image rather than replace the one used as the input src. 但这给了我一个基本的图像,而不是替换用作输入src的图像。
Where have I gone wrong here? 我在哪里错了?
I've resolved my issue with some edits to the ajax .php file and the Ajax success script. 我通过对ajax .php文件和Ajax成功脚本进行一些编辑解决了我的问题。 I was actually on the right lines with .attr("src","value");
我实际上与.attr(“ src”,“ value”);的对接 but had some errors in the code I wrote.
但是我编写的代码中有一些错误。 For the benefit of anyone who visits this post in the future, I changed the relevant section of my ajax .php file to
为了以后访问此帖子的任何人的利益,我将ajax .php文件的相关部分更改为
if (zen_get_metatags_keywords($products_id, (int)$_SESSION['languages_id']) or zen_get_metatags_description($products_id, (int)$_SESSION['languages_id'])) {
$metatag_icon = "images/icon_edit_metatags_on.png";
} else {
$metatag_icon = "images/icon_edit_metatags_off.png";
}
echo json_encode(array('meta'=>$metatag_icon, 'asHtml' => '<div class="alert alert-info admin-meta-update-success"><strong>Meta Tags Updated</strong></div>'));
and updated my script to 并将我的脚本更新为
$('.product-meta-tags').submit(function(e){
e.preventDefault();
$.ajax({
url: 'update_product_meta_tags_ajax.php',
type: 'POST',
data: $(this).serialize(),
dataType: 'html'
})
.done(function(data) {
var obj = JSON.parse(data);
$('.tooltip-metatags-<?php echo $products_id; ?>').tooltipster('close');
var elem = $('.update-<?php echo $products_id; ?>');
elem.fadeOut('slow', function() {
elem.html(obj.asHtml).fadeIn('slow', function() {
elem.delay(1200).fadeOut('slow');
});
});
$('.meta-<?php echo $products_id; ?>').attr("src",obj.meta);
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
I now get the success message momentarily displayed in my div location, and the icon changes to show that the meta tags have been set. 现在,我会立即在div位置中显示成功消息,并且图标更改为显示已设置meta标签。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.