用笨

Question

我在這裏位和我所試圖做的片看到好的帖子CSS按鈕的顏色變化，但沒有與各領域的AJAX數據庫更新處理。有沒有人有任何代碼示例或建議來幫助我做我想做的事情？

首先，我要建立我與數據的數組MVC視圖如（組織名稱，ID，狀態），其中狀態是一個布爾值，或者選擇或取消選擇。然而，不是表示僅複選框，我想顯示特定表示一個綠色（選擇的）或紅色（未選擇）按鈕基於數據庫值的狀態。 CSS不是問題。然後，如果用戶單擊按鈕時，我想將div值從紅色更改爲綠色（反之亦然），而且還通過AJAX調用更新數據庫字段中的布爾值。如果可能的話，最好利用JQuery。

最後，我需要知道如何做到這一切用笨。我非常熟悉CI，但是在這個時候，我在頭燈上使用了Javascript/JQuery newbie - deer。任何人都可以用正確的方向指出我的意思，或者建議一個網站提供一些接近我想要做的示例代碼或者明顯的好資源嗎？非常感謝你。

Answer 1

好了，笨是一個PHP框架 - 這意味着它的服務器端。 （我知道，那裏有一個ajax庫，但我沒有使用它）。我們必須瞭解服務器端和客戶端之間的區別。您的JavaScript是客戶端。我通常在沒有javascript的情況下開發codeigniter中的所有內容，然後返回並添加javascript位。這有助於我確保該系統適用於那些沒有啓用JavaScript的系統，或者出於任何原因無法執行javascript。 （順便說一句，這叫做progressive enhancement）。

因此，首先，讓我們的非JavaScript版本的護理： 你只需要給你的紅/綠色按鈕鏈接點擊後指向控制方法將更新數據庫記錄，您重定向回您之前所在的頁面（具有紅色/綠色按鈕）。

/controller/method.html是我們的控制器方法，將保存到數據庫，並重定向回此頁面。 - >

<a href="/controller/method.html" class="red my-button">Check</a> 

現在，讓我們的js版護理：

在你看來

，你只需要劫持的點擊，發送Ajax請求，並改變基於紅色/綠色按鈕控制器方法的結果。所以，我們所做的是保持鏈接不將頁面重定向到href屬性（e.prevendDefault（））。然後，我們得到href的值，並對該控制器方法進行ajax調用。該方法將確定這是否是ajax請求並保存到數據庫，然後回顯「成功」消息。在success上，我們可以更新客戶端的可視化組件。

$('.my-button').live('click', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     // $(this).attr('href') gets the value of the links href attribute 
     // which is "/controller/method.html" in this case 
     url: $(this).attr('href'), 
     success: function(data) { 
      // update your button with whatever html to write the new button 
      $('.my-button').replaceWith('<a href="/controller/method.html" class="red my-button">Check</a>'); 
     } 
    }); 
}); 

您的控制器方法只是檢查它是否是ajax請求。如果是這樣，只要返回成功，如果不重定向頁面。

function my_controller_method() 
{ 
    if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 
     $_SERVER['HTTP_X_REQUESTED_WITH']=="XMLHttpRequest") { 

     // update your database 
     echo "success"; 
    }else{ 
     // redirect back to page 
     redirect($_SERVER[‘HTTP_REFERER’]); 
    } 
} 

Answer 2

你想要什麼樣是一個大拇指向上/像啄......有鏈接中包含的http://www.geertdedeckere.be/lab/themeforest/thumbsup/demo/