0

現在、FancyBoxを使用してテキスト付きのiframeを起動しています。jqueryのeditInPlaceプラグインを使用して、ユーザーがiframe内のテキストを編集できるようにしたいと思います。これはすべて、イントラネット内の同じドメイン上にあります。

これが私のiframeの呼び方です：

<a class="read_more fancybox.iframe" href="iframe.html" data-id="01/01/2012" title="Mgmt Approvals Required" >Read more</a>

fancybox iFrameが正常に読み込まれ、テキストが読み込まれます。editInPlaceプラグインを呼び出そうとしている方法は次のとおりです。

        $(".fancybox.iframe").contents().find('#edittext').html(
        $('#edittext').editInPlace({
            callback: function(unused, enteredText) { return enteredText; },
            // url: './server.php',
            show_buttons: true
        })
    );

しかし、運はありません。editInPlaceコードをどのように呼び出すべきか考えていますか？

これがiframe.htmlです-かなり基本的です：

    <!DOCTYPE html>
<html>
<head>
    <title>Mgmt Approval</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       
</head>
<body>


<h1>Management Approval Required</h1>
    <div id = "edittext">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque justo ac eros consectetur bibendum. In hac habitasse platea dictumst. Nulla aliquam turpis et tellus elementum luctus. Duis sit amet rhoncus velit. Duis nisl ligula, mattis interdum blandit laoreet, mattis id ante. Cras pulvinar lacus vitae nisi egestas non euismod neque bibendum. Vestibulum faucibus libero id ante molestie ultricies. Vestibulum quis nibh felis. Vestibulum libero nisl, vehicula vel ullamcorper sit amet, tristique sit amet augue. Etiam urna neque, porttitor sed sodales lacinia, posuere a nisl. Vestibulum blandit neque in sapien volutpat ac condimentum sapien auctor. Ut imperdiet venenatis ultricies. Phasellus accumsan, sem eu placerat commodo, felis purus commodo ipsum, sit amet vulputate orci est viverra est.
    </p>
    </div>
</body>
</html>
4

1 に答える 1

0

私はこれを推測します：

$(".fancybox.iframe").contents().find .....

...次のようにする必要があります。

$(".fancybox-iframe").contents().find .....

.fancybox.iframeファンシーボックスクラスではなく、ファンシーボックスを起動したセレクターのクラスですiframe

注: これは fancybox v2.x 用です。...v1.3.4 を使用している場合、セレクターは#fancybox-iframe

一方、すでにセレクターが見つかっている場合は、メソッド#edittextは必要ないため、次のようになります。.html()

$(".fancybox-iframe").contents().find('#edittext').editInPlace({
   callback: function(unused, enteredText) { return enteredText; },
   // url: './server.php',
   show_buttons: true
 }); // editInPlace

更新(2012 年 11 月 13 日) : あなたの投稿で、あなたのコードの一部だけが間違ったセレクターを参照していると仮定The fancybox iFrame loads fine and the text is read inしましたが、もっと具体的に言う必要があると思います。callback ...完全なコードは次のようになりますafterShow

$(document).ready(function() {
 $(".read_more").fancybox({
   width: "70%", // or whatever
   height: 400,
   fitToView: false,
   autoSize : false,
   afterShow : function(){
    $(".fancybox-iframe").contents().find('#edittext').editInPlace({
       callback: function(unused, enteredText) { return enteredText; },
       // url: "./server.php",
       show_buttons: true
    }); // editInPlace
   } // afterShow
 }); // fancybox
}); // ready

それはfancybox v2.1.3のトリックを行うはずです

デモを見る

于 2012-11-09T22:18:51.910 に答える