AJAX - Reload a part of a webpage without the use of a separate file to load

StackOverflow https://stackoverflow.com/questions/407287

Question

Title might be a bit confusing, so let me explain.

I have a website that has a side-panel, which contains information about the user, things the user can do, etc. When the user is not logged in, this side-panel becomes the area for logging in or registration.

The code for this is:

<?php
if($user->loggedIn)
{
?>
<!-- side-panel for logged in users here -->
<?php
}
else
{
?>
<!-- login/registration etc -->
<?php
}
?>

What I want to do is load this snippet of code again when the user clicks login with AJAX, and use a jQuery effect (probably fade) that smoothly makes the side-panel transition from login/registration to the shiny users-only panel.

I know I could do this if I put that code in another file, and loaded it through AJAX into the div for the side-panel... but I would rather not make a separate file for the side-panel only. Is this possible?

Was it helpful?

Solution

You could load the page with an AJAX request and then strip out the data other than the side panel, but what would be the point? Your best option would be to simply separate the side panel into its own file.

Oh, and that would also be considered the proper way of doing it, so you can edit the sidebar without editing the pages it occurs on.

OTHER TIPS

If i understand corectly what you neey, you may try this way:

$.ajax({
    type: "GET",
    url: "url", // replace 'url' with your url
    cache: false,
    success: function(data){
        alert($(data).find('#sidebar').html());
    }
});

Maybe will work with $.load() or $.get(), dunno.

Why are you opposed to keeping the side panel in its own file? Keeps things more modular and organized.

If you really are opposed to keeping the content in a file, you could put the content in a database and query for it when ever the AJAX call is made.

Could you pass a query string parameter to the page and then based on that only do a partial render(sidebar only) of the page? Then just use your normal jquery/ajax method and include the query string paramater.

$.ajax(function(){
    url: MyPage.php?sidebar_only=true
    ect...
})

Assuming that you will be getting the actual user data through another call, you could use two divs. The div containing the html for the user panel starts hidden. When you get a successful login, hide the login div and show the user panel div. Using the data from the AJAX login, fill in the panel custom info. I assume the AJAX login call will return the necessary info to fill in the user name and what they can do. This just makes it so you don't have to pull in the html for the whole user panel.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top