1

我正在使用 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 取消或如下文件所示。！ 在此处输入图像描述

抱歉，由于声誉问题，无法发布图片。

但是我可以发布按 f12 后出现的 chrome 的网络选项卡。

路径 --> 方法 --> 状态 --> 类型 --> 启动器

/edit.png--> 获取-->（已取消）待处理--> jquery-1.10.js6569

我能做些什么来解决这个问题吗？

4

1 回答 1

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>

我不知道你这边有什么不同。如果您愿意，请尝试这段代码，如果它有效，请将其与您的代码进行比较。

于 2013-09-18T07:41:53.913 回答