Codeigniterを使用したCSSボタンの色の変更によるAJAXデータベースの更新

私はここで、私がしようとしているものの断片と断片の良い記事を見てきましたが、すべての分野を扱うものは何もありませんでした。誰かが私がやろうとしていることをするのに役立つコード例やアドバイスを持っていますか?

まず、(org name、id、status)のようなデータの配列でMVCビューを構築します。ここで、statusはブール値です。選択または選択解除します。しかし、単なるチェックボックスを表示するのではなく、データベース値の状態に基づいて緑色(選択)または赤色(非選択)のいずれかのボタンを表示したいと思います。 CSSは問題ではありません。

次に、ユーザーがボタンをクリックすると、div値を赤から緑に(またはその逆に)変更すると同時に、AJAX呼び出しによってデータベースフィールドのブール値を更新したいと思います。 JQueryを可能な限り活用することが望ましいでしょう。

最後に、私はCodeIgniterを使用してこれをすべて行う方法を知る必要があります。私はCIに精通していますが、この時点でヘッドライトのJavascript/JQuery初心者 - 鹿です。誰かが正しい方向に私を指し示すことができますか、私は何をしようとしているか、または明らかなリソース以外の良いリソースに近いサンプルコードでWebサイトを提案できますか?親切にありがとう。

0

2 答え

ですから、CodeIgniterはPHPフレームワークです。つまり、サーバ側で動作します。 (私はそこにajaxライブラリがありますが、私はそれを使用していません)。サーバー側とクライアント側の違いを理解する必要があります。あなたのjavascriptはクライアント側です。私は通常、codeigniterで始めるためにjavascriptなしですべてを開発し、次に戻ってjavascriptビットを追加します。これにより、JavaScriptがオンになっていない、または何らかの理由でjavascriptを実行できないシステムでシステムが動作するようになります。 (これは、プログレッシブ強化と呼ばれています)。

ですから、最初に、非javascriptバージョンの世話をしましょう: 赤色/緑色のボタンには、データベースレコードを更新し、以前にあったページ(赤色/緑色のボタンがあります)にリダイレクトするコントローラメソッドをポイントするURLをクリックするだけです。

/controller/method.html is our controller method that will save to the database and redirect back to this page. -->

Check

さて、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('Check');
        }
    });
});

あなたのコントローラメソッドは、それが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’]);
    } 
}
3
追加された
驚くばかり!あなたの時間と努力に感謝します。私はこれを見て、コードが何をしているのか理解します。私の頭を包んだら、他の人がすぐにスピードアップするのに役立つ何かを追加してポストします。
追加された 著者 UMGuy,

What you want is sort of a thumbs up/like thingy...there's a demo included in the link http://www.geertdedeckere.be/lab/themeforest/thumbsup/demo/

0
追加された
心に留めておくのに非常に良いリソース。ありがとうございました。私はそれをブックマークしました。
追加された 著者 UMGuy,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript