1

シャドーボックスを使用してポップアップを開きます。ポップアップで作業が完了したら、親ページに行を追加してから、コードで行ったようにシャドウ ボックスを閉じます。

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 に答える