Question

I have a page set-up, with several divs.
For now all we need is

<div id="main">...</div> & <div id="sidebar">...</div>

Each div has code such as:

<?php include("page.php") ?>

The main div does all the work, and includes a JavaScript function. E.g. at the moment the user can click a button to remember an item displayed in a table.

Am I able to only reload the sidebar instead of the whole page when the user calls this function?
I am posting the function here, and all I need now is to be able to refresh the sidepanel and its included php files if that is possible? I assume something along the lines of this could do the job? or am I wrong? load("#sidebar")

function saveToFavorites(code)
{

    $.ajax({
        async:false,
        type: "POST",
        url: 'formPostsUser.php?reqtype=addToFavorite',
        data:'coursecode='+ code,
        success: function(data) 
        {
            $('.result').html(data);
            if(data != "")
            {
                alert(data);
                load("#sidebar") 
            }
        }
    });
}

Kind regards
Alex

Happy about any and every reply and hint 😉

Answer 1

First thing

 <div="sidebar">..</div> 

The above markup is wrong HTML. You should give the sidebar as the value of your properties such as id or class

<div id="sidebar">..</div> 

Loading the Sidebar content

You can use jQuery ajax to load content of this div using jQuery load method like this

$(function(){
  $("#sidebar").load("yourPHPPageToReturnSideBarContent.php");  
});

Assuming yourPHPPageToReturnSideBarContent.php is the PHP page which renders the HTML Markkup for the sidebar. Note that this will load the content on the document ready event.

Loading the side bar content on an event

If you want to load it on a purticular event like a button click you can do it like this

$(function(){
  $(document).on("click","yourButtonId",function(){
     $("#sidebar").load("yourPHPPageToReturnSideBarContent.php");  
   });
});

The above script will load the side bar content on a button click. The button’s id is e “yourButtonId” in this example.

Note that i used jQuery on here to bind the function because it will take care of current element and future element in case if you want to load the markup which contains the button dynamically.