Refresh a div with jQuery
Is it possible to refresh a single div with jQuery? I have a button that does logout a user. After the button is clicked, I want to show the login form, so I need to re-parse this div.
The content of my div is this:
<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>
This is my JavaScript part where I perform the logout:
$('#logoutbtn').click(function () {
$.ajax({
type: "POST",
url: "php/logout.php",
async: false,
success: function(data){
// reload signup div
}
});
});
Edit: My logout.php script removes the cookies, that's why I need to re-parse the signup-div.
Answers:
You can dynamically change the contents of the signup div with jquery as follows:
$("#signup").html("My New Login Section");
or
var $loginDiv = $(document.createElement("div")).html("<label>Username</label><input type='text' id='username'/>");
$("#signup").html($loginDiv);
I'd try:
$('#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>');
});
})
The same approach could be used for the login action to prevent the page from having to refresh.
as you have your session method inside of your tag, you can do on success event following:
success: function(data){
$("#signup").load(".register");
}
it will reload everything inside of < div id="signup" class="register"> and as you've removed your session (i suppose), than it will be reload to your login/logout form.