Jquery图像加载已取消

时间：2013-09-18 07:26:46

标签： javascript jquery shadowbox

我正在使用shadowbox打开弹出窗口。在弹出窗口完成工作后，我在父页面上添加一行，然后按照代码中的操作关闭影子框。

var row$ = $("<tr id='"+data.entityContactId+"'>");
row$.append("<td align='left' valign='top'>"+data.entityContactId+"</td>");
row$.append("<td align='left' valign='top'>"+data.fName+"</td>");
row$.append("<td align='left' valign='top'>"+data.mName+"</td>");
row$.append("<td align='left' valign='top'>"+data.lName+"</td>");
row$.append("<td align='left' valign='top'>"+data.functionalRole+"</td>");
row$.append("<td align='left' valign='top'>"+data.designation+"</td>");
row$.append("<td align='left' valign='top'>"+data.status+"</td>");
row$.append("<td align='left' valign='top'><a rel='shadowbox[]; width=1000; height=565;' 
        href='../contactDetails/contactDetails.html?entityContactId="+entityContactId+"&companyId="+entityId+"&companyCode="+entityCode+'>
        <img src='http://26fc614be383109f4ed8-83b958a355d4ec1f6468075626f4c2ef.r23.cf1.rackcdn.com/edit.png' title='View Contact'/></a></td>");
                         ...... more code for appending 2 more images...
window.parent.$("#"+rowID+"").replaceWith(row$);
window.parent.Shadowbox.setup();
window.parent.Shadowbox.close();

功能明智的一切都很好，在父页面的表格中附加了一行。但图像不会附加在页面上。我进一步深入研究，发现请求被jquery取消，或者如下面的文件所示。 enter image description here

很抱歉由于声誉而无法发布图片。

但是我可以在按下f12后发布chrome的网络标签。

路径 - ＆gt;方法 - ＆gt;状态 - ＆gt;类型 - ＆gt;引发剂

/edit.png - ＆GT;获取 - ＆gt; （已取消）待定 - ＆gt;的jquery-1.10.js6569

我能解决这个问题吗？

1 个答案:

答案 0 :(得分：0)

当您附加包含图片的行时，引号和双引号（'和“）的打开和关闭存在问题。

我会再次尝试写一遍：

row$.append("<td align='left' valign='top'><a rel='shadowbox[]; width=1000; height=565;' 
    href='"../contactDetails/contactDetails.html?entityContactId="+entityContactId+"&companyId="+entityId+"&companyCode="+entityCode'>
    <img src='http://26fc614be383109f4ed8-83b958a355d4ec1f6468075626f4c2ef.r23.cf1.rackcdn.com/edit.png' title='View Contact'/></a></td>");

如果还有其他类似的行，你也需要修改它们。

我做的是：我在“../ contactDetails / cont ...”之前添加了双引号（“），并在”entityCode“之后删除了一个+。

修改

这与您的示例类似。我试过这个并且效果很好。

<!DOCTYPE HTML>
<html>
<head>
<title>Show Image Dimensions Locally</title>
<style type='text/css'>
    body {
        font-family: sans-serif;
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
    $(document).ready(function(){
        console.log("document is ready");
        var $row = $("<tr id='newrow'>");
        $row.append("<td align='left' valign='top'><img src='http://eofdreams.com/data_images/dreams/image/image-03.jpg' title='Image' style='max-width: 400px; max-height:200px' /></td>");
        $row.append("<td>New Text 1</td>");
        $row.append("<td>New Text 2</td>");
        $row.append("<td>New Text 3</td>");
        $row.append('</tr>');
        window.parent.$("#row").replaceWith($row);
    });

</script>
</head>

<body>
<table>
    <thead>
        <tr>
            <th>Image</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Columt 3</th>
        </tr>
    </thead>

    <tbody>
        <tr id="row">
            <td>Image goes here</td>
            <td>Text 1</td>
            <td>Text 2</td>
            <td>Text 3</td>
        </tr>
    </tbody>
</table>
</body>


</html>

我不知道你方有什么不同。 如果需要，请尝试使用此代码，如果可行，请将其与代码进行比较。

相关问题
最新问题