InnerHtml不会更新我的图像的src

时间:2013-08-29 18:26:58

标签: php javascript innerhtml

我正在尝试更新图片的src,但现场只显示  <img class="imagedisplayor" style="float: none;" alt="" width="200" height="200" src=""/>

以下是代码:

function ajaxFigure(){
var url = 'index.php?option=com_fabrik&format=raw&view=plugin&task=userAjax&method=imgclasse';
var product = Fabrik.blocks.form_8.formElements.orders___product.getValue();
var update = $('orders___image').firstChild;
new Request({
    url: url,
    data: {
        method: 'imgclasse',
        'product': product
    },
    onComplete: function (r) {
        update.src = 'http://www.youtraining.eu/preview' + r.replace('images/', 'images/');
        document.getElementById('orders___image').innerHTML = '<img class=\'imagedisplayor\' style=\'float:none;\' alt=

\'\'  width=\'200\' height=\'200\'  src="' + r + '">'
    }
}).send();


}

这里是我的imgClasse()

function imgclasse() {
$db = JFactory::getDBO();
$IdClasse = JRequest::getVar("product", "");  

$query = "SELECT product_image from products WHERE id=$IdClasse LIMIT 1";
$db->setQuery($query);
$result = $db->loadResult();
echo $result; 


}

更新了所有内容.. 我要做的是为下拉列表的每个元素显示一个图像,该列表是数据库中的条目。 Js和PHP是我可以使用的唯一方法,因为我在CMS中。

更改了var product = Fabrik.blocks.form_8.formElements.orders ___ product.getValue(); 现在它返回正确的值..但问题仍然存在

2 个答案:

答案 0 :(得分:0)

根据您的密码:

onComplete: function (r) {
        update.src = 'http://www.mysite.com/preview' + r.replace('images/', 'images/');
        document.getElementById('orders___image').innerHTML = '<img class=\'imagedisplayor\' style=\'float:none;\' alt=\'\'  width=\'200\' height=\'200\'  src=' + r + '>'
    }

我认为update.src是一个定义为的对象:

var update= {src:"..."};

因此,当您将值传递给此对象的.src键时:

update.src = 'http://www.mysite.com/preview' + r.replace('images/', 'images/');

然后是:

document.getElementById('orders___image').innerHTML = '<img class=\'imagedisplayor\' style=\'float:none;\' alt=\'\' width=\'200\' height=\'200\' src=' + r + '>'

  

r交换update.src因为r的值是您想要update.src包含的内容,包括.replace('images/', 'images/')

所做的替换

所以它应该是:

document.getElementById('orders___image').innerHTML = '<img class=\'imagedisplayor\' style=\'float:none;\' alt=\'\' width=\'200\' height=\'200\' src=' + update.src + '>

您可以确认您的r变量是否确实包含某些内容,或者完全可以通过执行以下操作来识别它:

onComplete: function (r) {

  console.log(r)
//Before running any other code

希望有所帮助!

答案 1 :(得分:0)

简答:

您没有使用新值更新图像源。您将使用提供给函数的值更新它。在连接它时,还需要为src属性提供双引号。

document.getElementById('orders___image').innerHTML = '<img class=\'imagedisplayor\' style=\'float:none;\' alt=\'\'  width=\'200\' height=\'200\'  src="' + r + '">'

建议:

如果我是你并且遇到了这个问题,我会对你的新图像路径执行console.log,以根据实际图像路径验证生成的路径。如果不知道r提供给你的函数的价值,很难说。

跳出来的另一个主要问题是你不需要完全替换图像元素。如果您直接引用图像元素然后将其src属性更新为新位置,那将更清晰。同样,如果没有更多信息,很难给你更具体的信息。