FaKue
FaKue

Reputation: 11

PHP redirect and load content with jQuery / AJAX

I have to create a simple website with various pages (5-6). Now I have one "master" page called index.php like this:

<html>
    <head></head>
    <body>
        <div id="content"></div>
    </body>
</html>

This page has also other div's on it, like a header where I show some images etc. and is styled with a css.

Now when the user clicks on a link in the menu bar, whatever page I want to show is loaded via jQuery/AJAX into the content div. I do this here:

$(document).ready(function () {
// Per default load home.php
var url= "home.php";
    $.ajax({
      url: url,
      success: function(data){
           $('#content').html(data);
      }
    });         
$('#register').click(function() {
    var url= "register.php";
    $.ajax({
      url: url,
      success: function(data){
           $('#content').html(data);
      }
    });
});
// more pages here..
});

This works perfectly fine and I am happy with the result, now on to the problem. On some of these pages (like register.php) I have forms that I submit. Now once I submit the form and do various things like database operations etc. I want to redirect to one of the other pages and maybe show a short information message. What I do to redirect in the php file is the following:

header('Location: ../app/index.php');

I got this somewhere from a code snippet, so I am not sure if this is the proper way to do this. Because I have per default set the index.php to load my home.php content, it always redirects to my home.php content and I was happy with this. But what if I want to redirect to another page, lets say go.php? How would I do this? Is this even possible from php or do I need to do this with javascript/jQuery?

I am a bit lost here, have tried searching for it but didn't come across exactly this issue here.

Upvotes: 1

Views: 1285

Answers (1)

rut2
rut2

Reputation: 706

For submit form and database connection :

you can use onclick function to handle actions for submit button :

example in .JS file

$(document).ready(function(){ 
    $('#submit').click(function(){
        var input = $('#textfiel').val();
        $.post("ajaxHandle.php",
            {data:input }
          ).success(function(responce){
              $('#responceMessage').prepend(responce);
              /* This is the field on your index.php page where you want to display msg */
          });
    });
});

ajaxHandle.php file:

if($_SERVER['REQUEST_METHOD'] == 'POST'){
 $inputData = $_POST['data'];

/* your database code will be done here you can find user input data in $inputData */

    echo "registration successful"; /* this string will be get in var responce in .JS file */
}

To redirect page dynamically :

you can use .load() function for example :

$('#content').load('../app/register.php');

use this http://api.jquery.com/load/ reference to use it.

Upvotes: 1

Related Questions