AJAX Форма входа в систему, содержимое страницы обновления после входа в систему

Question

Представьте, что у меня есть страница с функцией входа/выхода в заголовок, которая полностью работает через AJAX.

Если пользователь не вошел в систему, я хочу показать ему «Привет, логин» и разрешить ему войти в систему через 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(); 
} 

И называют его в настройке вашего Аякса success.

Answer 2

Похоже, что на вашей странице есть ошибка на javascript. Я предполагаю, что ваш зарегистрированный раздел обслуживается через HTTPS. Если это так, и если ваша javascript-функция хранится в файле .js, вам может потребоваться включить ваш файл javascript через https.

Использование ссылки сетевого пути (или пути агностики протокола) помогает решить эти проблемы https vs http.

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

Edit:

Вы можете попробовать функцию $ .ajax, так что вы можете поймать любые ошибки, которые возникают ... Это может рассказать вам больше о том, что на самом деле происходит с вашим запросом.

$.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(), например, так:

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

Answer 5

Как @jamie сказал, не смешивать 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 login, да, вы должны просто обновить страницу в этом случае. Ваш PHP-контроллер должен был уже установить, что делать, когда страница перезагружается.