Question

enter image description here

当用户点击标签时，如何进行ajax调用？
如何处理html响应并在标签内显示？
如何在回复的html上绑定JavaScript事件？

我知道如何使用jQueryUI标签以及如何进行ajax调用？

当用户单击CKEditor中的tab时，我不知道如何触发Ajax调用？

这就是我在CKEditor中的“图像”对话框中显示的“测试”选项卡。

CKEDITOR.on( 'dialogDefinition', function( ev )
{
    // Take the dialog name and its definition from the event
    // data.
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    // Check if the definition is from the dialog we're
    // interested on (the "Link" dialog).
    if ( dialogName == 'image' )
    {

        // Add a new tab to the "Link" dialog.
        dialogDefinition.addContents({
            id : 'customTab',
            label : 'Test',
            accessKey : 'M',
            elements : [
                {
                    id : 'myField1',
                    type : 'text',
                    label : 'My Text Field'
                },
                {
                    id : 'myField2',
                    type : 'text',
                    label : 'Another Text Field'
                },
                {
                    type : 'html',
                    html : '<input type="text" name="query" id="query" class="left new-search-box file_dialog_query" style="width:300px !important;" defaulttext="Search Files" value="Search Files">'
                },
            ]
        });

    }
});

Answer 1

http://jqueryui.com/tabs/#ajax

$( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
            ui.panel.html(
                "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                "If this wouldn't be a demo." );
        });
    }
});

Answer 2

为实现此目的，请按照以下步骤进行操作

创建一个包含两个A和B部分的html文件.A包含选项卡，B包含内容。默认情况下，选项卡1处于活动状态。
单击选项卡捕获click事件，然后在该调用Ajax中获取数据。在成功响应中，将b内容替换为数据。同时更改选项卡的样式以使新选项卡处于活动状态。

你可以通过jQuery.Ajax方法进行ajax调用，你可以从你必须获取数据的地方传递你的url。在成功回复中，您将获得Url返回的所有数据。

您不必在此页面上为新内容绑定JavaScript事件。您可以在执行Ajax调用时在Url返回的html中绑定它。

希望它有所帮助。

Answer 3

对于此元素，使用jQuery或inline定义事件ether。

的jQuery;例如elemtn有id =“tab”

$("#tab").click(function(){
    //ajax call
});

内联

<div onclick="ajaxCallFunction()">Tab</div>
<script>//you have to define this function somewhere
function ajaxCallFunction(){
//define ajax call
}
</script>

如果您的响应已经按原样进行了结构化，那么您可以将其设置为容器的innerHtml（父元素）例如

//if you can get element by ID
var container=document.getElementById('container id').innerHtml=response;

对于绑定事件，在代码中创建HTML结构可能更安全，但最好将响应作为JSON。在这个（当使用html）解决方案时，我建议你在同一个函数中设置这个innerHtml，但是在设置了将设置事件的innerHtml调用函数之后。

例如

//if this structured HTML have element <div id="x"></div>
$("#x").click(function(){
//OR any other event, check jquery documentation for other events
});
//IMPORTANT IS THAT YOU CALL THIS SETTING OF EVENT AFTER YOU ADDED NEW HTML

当用户点击Tab时，如何进行ajax调用？

3 个答案: