在AJAX调用中没有将TinyMCE添加到元素中

时间:2014-09-23 04:55:16

标签: javascript jquery html ajax tinymce

我有一些问题将TinyMCE应用到textarea元素上。 我有一个包含乘客名单的页面。当您单击一个乘客时,会调用AJAX并显示乘客的信息,其中一个字段恰好是textarea元素。我的问题是你点击的第一位乘客(任何乘客)加载了TinyMCE,但从现在开始,它只是一个没有应用TinyMCE的普通文本区域。我不知道发生了什么。以下是我的以下代码:

j$ = jQuery.noConflict();
j$(document).ready(function(e) {
    tinyMCE.init({
        mode : "textareas",
        theme : "advanced",
        theme_advanced_buttons1 : "bold, italic, underline, | ,bullist, numlist, | ,outdent, indent, | ,link, unlink, |, code",
        relative_urls : false,
        remove_script_host : false,
    });

j$('.names strong').click(function(e) {
    //Find passenger ID
    var customer_ID = j$(this).closest('.passenger_Container').find("input[name='customer_ID']").val();
    //Find placement of returned data
    var insert_Data = j$(this).closest('.passenger_Container').find('.package');

    j$.ajax({        
       type: "POST",
       url: "/include/passenger_Detail.php",
       data: { customer_ID_Data : customer_ID },
       success: function(data) {
            //get returned data and add into appropriate place
            insert_Data.html(data);

            var oldEditor = tinyMCE.get('notes');
            if (oldEditor != undefined) {
                 tinymce.remove(oldEditor);
            }
            tinyMCE.execCommand('mceAddControl', false, 'notes');
            //re-initialise WYSIWYG editor. Notes is the ID to re-initialize 
            /*tinymce.execCommand('mceRemoveControl',true,'notes');
            tinymce.execCommand('mceAddControl',true,'notes');*/
       }
    }); 
    });
});

<!-- content is displayed using PHP while loop -->
<div class="passenger_Container bottom-buffer">
    <div class="names row">
        <div class="col-xs-1 text-center">
        <!-- Display checkbox -->
        </div>
        <div class="col-xs-4 col-sm-3"> 
            <strong><?php echo $row['f_Name'].' '.$row['l_Name']; ?></strong> </div>
        <div class="col-xs-3 hidden-xs"> 
        <!-- display child names -->
        </div>
        <div class="col-xs-3">
        <!-- Display order status -->
        </div>
        <div class="col-xs-1 col-sm-2"> 
        <!-- Display form -->
        </div>
    </div>

    <div class="package custom-well well-sm top-buffer">
        <!-- passenger detail goes here. You will find the code in  includes/passenger_Detail.php -->
    </div>
</div>
<!-- end PHP while loop -->

我已经离开了我试图让TinyMCE工作的例子。我有一个偷偷摸摸的怀疑,糟糕的编码练习是罪魁祸首。每个textareas的ID都是#notes,我认为是原因。但是看一下文档,我不认为tinyMCE允许你使用类来定位textareas。除非我必须遍历所有textareas。我只是在这里吐痰。

如果需要更多信息,请通知我。再次感谢。

1 个答案:

答案 0 :(得分:0)

我最终解决了这个问题,但为每个textarea元素使用了唯一的ID。因此,不是每个textarea都有ID&#34; notes&#34;,它现在是&#34; notes_unique customer_ID&#34;。

以下是我的回答:

j$.ajax({        
      type: "POST",
      url: "/include/passenger_Detail.php",
      data: { customer_ID_Data : customer_ID },
      success: function(data) {
        //console.log("Returned data: "+data);  
        //get returned data and add into appropriate place
        insert_Data.html(data);
        notes = insert_Data.find('textarea').attr('id');
        var oldEditor = tinyMCE.get('notes_'+customer_ID);
        if (oldEditor != undefined) {
             tinymce.remove(oldEditor);
        }
        tinyMCE.execCommand('mceAddControl', false, 'notes_'+customer_ID);
    }
});