2013-06-01 4 views
2

Можно ли обновить один div с помощью jQuery? У меня есть кнопка, которая выводит пользователя. После нажатия кнопки, я хочу показать форму входа, поэтому мне нужно повторно разобрать этот div.Обновить div с помощью jQuery

Содержание моего DIV это:

<div id="signup" class="register"> 

    <?php 
     $email = $_COOKIE['email']; 
     $login = $_COOKIE['login']; 

     if($email != null && $email != "" && $login != null && $login != "") { 
      echo "<h3>you are logged in as <b>$email</b></h3><br><br><button id='logoutbtn' class='submitButton'>Logout</button>"; 
     } else { 
      // show login form 
     } 
    ?> 

</div> 

Это мой JavaScript часть, где я выполнить выход из системы:

$('#logoutbtn').click(function() {  
    $.ajax({ 
     type: "POST", 
     url: "php/logout.php", 
     async: false, 
     success: function(data){ 
      // reload signup div 
     } 
    }); 
}); 

Edit: Мой logout.php скрипт удаляет куки, поэтому Мне нужно повторно разобрать signup-div.

+0

Вы можете просто использовать что-то вроде '$ (" # signup "). Html (data)' в вашей функции успеха, чтобы перезаписать содержимое Div с помощью вывода вашего PHP-скрипта ... – CBroe

+0

или посмотреть '.load' –

ответ

3

Вы можете динамически изменять содержимое SIGNUP DIV с JQuery следующим образом:

$("#signup").html("My New Login Section"); 

или

var $loginDiv = $(document.createElement("div")).html("<label>Username</label><input type='text' id='username'/>"); 
$("#signup").html($loginDiv); 
+0

Это не совсем то, что я намеревался сделать, но он работает. Проблема в том, что я должен добавить html-код к одной переменной для формы регистрации, которая очень длинная. – doonot

1

Использование load()

$('#signup').load('php/logout.php', function() { 
    alert('Logout.'); 
}); 
+0

Я думаю, что load() здесь не подходит, поскольку скрипт выхода из системы можно легко получить через AJAX. Вопрос заключается в том, как обновить представление после выхода пользователя из системы. – doonot

0

Я хотел бы попробовать:

$('#logoutbtn').on('click', function() {  
    $.ajax({ 
     type: "POST", 
     url: "php/logout.php" 
    }) 
    .done(function(data){ 
     $('#signup > h3').html('Please <button id="loginbtn" class="submitButton">Login</button>'); 
    }); 
}) 

Такой же подход может быть использован для действия входа, чтобы страница не обновлялась.

0

, как у вас есть метод сеанса внутри тега, вы можете сделать по событию успеха следующего:

success: function(data){ 
     $("#signup").load(".register"); 
    } 

будет перезагружать все внутри < сОн ид = «Регистрация» класс = «регистра»> и поскольку вы удалили свою сессию (я полагаю), чем она будет перезагружена в вашу форму входа/выхода.

Смежные вопросы