是否可以在不加载页面的情况下刷新div？

Question

SOLVED -SORT OF---

window.location.reload(); in my code where i have the submit button close the div, worked.

// Collapse Panel on submit
$("div#panel").on('submit', function() {
window.location.reload();
$("div#panel").slideUp("slow");
$("#toggle a").toggle();

return false;
});

I keep searching for this answer and i get more frustrated every time.

Scenario:

1. i have a div that slides down for login purposes (jquery, css).

2. the login form itself in that div is initially dynamically created with PHP ( by if else statement based on value in SESSIONS - PHP echo loads the form).

3.if i put in the correct login and click submit, i have the div close (jquery on(submit)) so that the user can see the page. The page loads dynamic content from a php file using xajax/PHP functions.

4.PROBLEM - if i click to re-open the div it still shows my login form.(because the page has not reloaded). BUT my on page navbar done with xajax/PHP reloads to show the correct menu functions.

1. my problem is that i want the div to REFRESH after submission, or on any event change if that helps, so that it sees the NEW SESSION data and adjusts accordingly. I DO NOT WANT TO LOAD ANOTHER HTML PAGE INTO THE DIV, so load(whatever.html) IS NOT WHAT I WANT.

if i refresh the whole page using f5 after i login, and pull down the div, the login form will not be there because my SESSIONS now states that im a logged in user and no longer a guest that needs to login. and the div isnt just for login, it will house other links and shortcuts, so it would be used while your logged in throughout your visit.

index.php

<div id="left" class="left">

         <?php      if(isset($_SESSION['admin'])){
        if($_SESSION["admin"] == "1") {
            echo "YOU ARE LOGGED IN AS AN ADMIN";
        }
    }

    if(isset($_SESSION['userID'])){
        echo "YOU ARE LOGGED IN AS A USER";
    }

    else { echo  '<form class="clearfix" id="loginForm" name="loginForm" action="javascript:void(null)" onsubmit="xajax_login(xajax.getFormValues(\'loginForm\'));">'; 

slide.js

$(document).ready(function() {

// Expand Panel
$("#open").click(function(){
    $("div#panel").slideDown("slow");

}); 

// Collapse Panel
$("#close").click(function(){
    $("div#panel").slideUp("slow");

}); 

// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
    $("#toggle a").toggle();
}); 


// Collapse Panel on submit
$("div#panel").on('submit', function() {
$("div#panel").slideUp("slow");
$("#toggle a").toggle();
return false;
});
// if there is an error, close div and allow link on main content page to be clicked to reopen div
$("#content").on('click', "#tryAgain",function() {
    $("div#panel").slideDown("slow");
    $("#toggle a").toggle();
}); });

Answer 1

This is very easy to be acomplished even with pure JavaScript, no need of jQuery.

Just make one JS function that resets the input fields in the form or the div and call it every time when you need to "refresh" the content of the div or the form.

If you paste the div definition we can give you more specific advice accompanied with JS code that actually do this.