如何在用戶點擊選項卡時進行ajax調用？

enter image description here 如何在用戶點擊選項卡時進行ajax調用？

我怎樣才能使一個Ajax調用，當用戶單擊選項卡上？
我該如何處理html響應並在標籤內顯示它？
如何在HTML上綁定JavaScript事件？

我知道如何使用jQueryUI選項卡以及如何執行ajax調用？

我不知道如何在用戶點擊CKEditor中的標籤時觸發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">' 
       }, 
      ] 
     }); 

    } 
});

來源

2014-02-10 krunal shah

您可以創建的jsfiddle，好嗎？ –

閱讀基本的ajax tutos怎麼樣？ –

嚮導致ajax請求的選項卡添加單擊事件，將來自ajax請求的響應附加到選項卡中，然後附加事件。 –

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."); 
     }); 
    } 
});

來源

2014-02-10 19:50:00 VoidVolker

我已更新我的問題 –

爲了實現這一點，請按照以下步驟

兩個部分A上創建一個HTML文件和B. A包含選項卡和B包含的內容。默認情況下使選項卡1激活。
點擊一個標籤捕獲點擊事件，並在那裏調用Ajax來獲取數據。在成功響應中，將b內容替換爲數據。還要更改選項卡的樣式以使新選項卡處於活動狀態。

您可以通過jQuery.Ajax方法Ajax調用中，u可以從其中u必須讓數據通過你的網址。在成功響應中，您將獲得Url返回的所有數據。

您不必爲此頁面上的新內容綁定JavaScript事件。您可以將它綁定到您的Url在執行Ajax調用時返回的html中。

希望它有幫助。

來源

2014-02-10 19:58:18 RiksAndroid

我已更新我的問題 –

對於這個元素，用jQuery或inline定義event ether。

jQuery;例如elemtn具有ID =「標籤」

$("#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

來源

2014-02-10 20:01:38

我已更新我的問題 –

如何在用戶點擊選項卡時進行ajax調用？

回答

相關問題