Question

Sorry for maybe incorrect title for the topic, but this is the best that I came up with.

So, I’m building admin panel for a website.

I have a page, and in some part of the page, i’d like to refresh it and load another form.

let’s say add a schedule, and somewhere down on the page I’d like to have this form displayed as soon as the link is clicked.

when a user saves it, I’d like that form to disappear and and in stead of that to have a list displaying all of the schedules.

I don’t want to use frames – I’m not a supporter of frames. The panel is built using PHP.

Maybe this might be achived with Ajax? If yes -> How? any link to good example or tutorial.

Answer 1

yes this will be solved with ajax.

Here is a code example when the page is supposed to refresh

$('#button').click(function() {
    $.ajax({
        url: 'path/to/script.php',
        type: 'post',
        dataType: 'html', // depends on what you want to return, json, xml, html?
                       // we'll say html for this example
        data: formData, // if you are passing data to your php script, needed with a post request
        success: function(data, textStatus, jqXHR) {
            console.log(data); // the console will tell use if we're returning data
            $('#update-menu').html(data); // update the element with the returned data
        },
        error: function(textStatus, errorThrown, jqXHR) {
            console.log(errorThrown); // the console will tell us if there are any problems
        }
    }); //end ajax

    return false; // prevent default button behavior
}); // end click

jQuery Ajax

http://api.jquery.com/jQuery.ajax/

Script explained.

1 – User clicks the button.

2 – Click function initiates an XHR call to the server.

3 – The url is the php script that will process the data we are sending based on the values posted.

4 – The type is a POST request, which needs data to return data.

5 – The dataType in this case will be html.

6 – The data that we are sending to the script will probably be a serialization of the form element that is assigned to the variable formData.

7 – If the XHR returns 200, then log in the console the returned data so we know what we are working with. Then place that data as html inside the selected element (#update-menu).

8 – If there is an error have the console log the error for us.

9 – Return false to prevent default behavior.

10 – All done.