AJAXログインフォーム、ログイン後のページコンテンツを更新する

Question

AJAX経由で完全に動作するヘッダにログイン/ログアウト機能を持つページがあるとします。

ユーザーがログインしていない場合は、「Hey、login」を表示して、彼にajax経由でログインさせたいと考えています。それはすべて良いです、それは動作します。

しかし、ユーザがログインする場合、私は、ページ上に置く取得していない何もアクセスすることはできません - 。彼らは正常にログインしている場合、ユーザーがページにアクセスしたときにそこにあるコンテンツを

ページソースを表示すると要素がありますが、$("#container").show()、.slideDown()、.html()などのようなものを実行すると、何も実行していません。

ユーザーにページを更新させるか、すべてのコードをjavascriptに保存して展開する必要がありますか？私は望んでいない。

以下のログイン用に私のJavascriptを含めましたが、それは本当にポイントではありません。それは働いている。私が言うところでは$("#all").slideDown()が問題です。コンソールからアクセスしても、何もしません。

ユーザーがログインしていない場合、問題はおそらくPHPで死ぬに関連している。このコードは$(function() { }

コードで実行されます。すべての

/* Get the AJAX Login form Ready */ 
$("#login-form").submit(function() { 
    $("#login-error").hide(); 
    var username = $("#username").val(); 
    var password = $("#password").val(); 
    if (username == "" || password == "") { 
     $("#login-error").show(); 
     $("#login-error-heading").html("You've entered something wrong."); 
     $("#login-error-content").html("Please enter both a username and a password."); 
     return false; 
    } 
    $.get( 
     "process-login.php", 
     { 
      username:username, 
      password : password 
     }, function(data) { 
      if (data.success == 1) { 
       /* Hide the login form */ 
       $("#login").modal("hide"); 

       /* remove the login button */ 
       $('#nav-login').remove(); 

       /* add the logout button to the DOM */ 
       $("#nav-container").append('<ul id="user-options" class="nav pull-right"><li class="divider-vertical"></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Logged in as ' + data.username + '<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="javascript:logout();">Logout</a></li></ul></li></ul>'); 

       $("#all").slideDown(); 
      } else { 
       $("#login-error").show(); 
       $("#login-error-heading").html("You've entered something wrong."); 
       if (data.success == 3) { 
        $("#login-error-content").html("This account is locked out because of incorrect password usage. Please try again in 10 minutes."); 
       } else { 
        $("#login-error-content").html("The username and password combination was not found."); 
       } 
      } 
     }, 
     "json" 
    ); 
    return false; 
}); 

Answer 1

まず、私は考えていませんプレゼンテーションロジックを分割するには、AJAXを使用することをお勧めします。私は彼らが最初にログインしているかどうかを検出し、それに応じてビューを分離するためにPHPを使用します。

これを行うにはAJAXを使用する必要がある場合は、ログイン時に好きなのでリダイレクトすることをおすすめします。これは新鮮なスタートのようです。あなたがリダイレクトしたくない場合は、なぜあなたは次のように別の関数内のレイアウト変更のすべてを入れないでください：

function openSesame() { 
    $('div.welcome_page').slideUp(); 
    $('div.treasure_trove').show(); 
} 

そして、あなたのAJAXのsuccess設定でそれを呼び出します。

Answer 2

あなたのページにJavaScriptエラーがあるようです。あなたのログインしているセクションがHTTPS経由で提供されていると仮定しています。その場合、javascriptの機能が.jsファイルに保存されている場合は、https上にjavascriptファイルを含める必要があります。

ネットワークパス参照（またはプロトコルに依存しないパス）を使用すると、この種のhttpsとhttpの問題を解決できます。

<script src="\\js\myJsFile.js"></script> 

編集：

あなたが発生したすべてのエラーをキャッチすることができるようにあなたが$アヤックス機能を試してみてください...これは実際にあなたの要求で何が起こっているかについての詳細を教えてくれかもしれません。

$.ajax({ 
    url: "process-login.php", 
    data: { 
     username: username, 
     password: password 
    }, 
    success: function (data) { 
     // your function 
    }, 
    error: function (jqXhr, error) { // see http://stackoverflow.com/a/1956505/296889 
     alert("readyState: " + jqXhr.readyState + "\nstatus: " + jqXhr.status); 
     alert("Response Received: " + jqXhr.responseText); 
    }, 
    dataType: 'json' 
}); 

Answer 3

コードなしでは、あまりできません。私はあなたが最初のバインド時に存在しなかった何かにバウンドイベントを使用しようとしていないことを確認するためにチェックします。 AJAXコールバックまで何かが存在しない場合は、ロードされた後にバインドする必要があります。

Answer 4

私は間違っているかもしれませんが、DOM内の新しいコンテンツがjqueryイベントハンドラのいずれにもバインドされていないことが問題だと思います。将来の要素にイベントをバインドする方法がそうのように、.on()方法を使用することです：@jamieが言ったように、あなたがする必要がない場合

$("#dataTable tbody tr").on("click", function(event){ 
    alert($(this).text()); 
}); 

Answer 5

は、JSとビジネスロジックを混在させないでください。

これは、テンプレートエンジンを使用して、MVCに似たものを作成する必要がある場所です。 Smarty http://www.smarty.net/をチェックしてください。正式なMVCフレームワークが本当に必要な場合は、CakePHPまたはSymfonyを使うことができます。

リダイレクトする必要はありません。それはゆっくりで、ユーザーにとっては楽しくはありません。

はちょうどSmartyのを使用して擬似コードの例を見てみましょう：

global $smarty; 

//go grab your user object 
$user = PseudoUser::validate_current_user(); 
if($user->login_status === true) 
{ 
    //user is logged in 
    $smarty->assign('user', $user); 
    $smarty->display('logged_in_template.tpl'); 
} 
else 
{ 
    //user is logged out 
    $smarty->display('logged_out_template.tpl'); 
} 

バダビングパダブーム。

js ajaxログインでは、この場合はページを更新するだけです。あなたのPHPコントローラは、ページがリロードされたときに何をすべきかをすでに確立しているはずです。