How can I load an entire html page with jquery including new jquery functions?

I have two issues I'm trying to work though.

1. The first is I'm trying to set the URL to follow the AJAX crawling scheme as described by google: http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=174993 when I load my two PHP pages for searching I currently just call:

mysite/search_advanced.php mysite/mysite/search_basic.php

I'm trying to turn these URL into:

mysite/#!/search=advanced

mysite/#!/search=basic

I need the ability to call these URLs directly and have them generate the correct page.

1. My second issue is I'm unable to load my pages into a div tag because each search page has it's own set of jquery functions for onclick even开发者_运维问答ts.

Here is how I would like to load my search_advanced page into a div tag with an id of main:

$('#search_advanced').click(function(e) {

    $('#main').load("search_advanced.php");

    return false;

});

The header portion of my search_advanced.php page contains this:

<?php session_start();
include_once('functions/dbconn.php');
include_once('functions/functions.php');
include_once('check.php'); 
check_login('3');

$profile = getProfile($_SESSION['uid']);

if($_SERVER['REQUEST_METHOD'] == 'POST') {
    $params = $_POST;
    if(isset($_POST['pg'])) {
    switch($_POST['pg']){
        case '10':
        $pg=10;
        break;
        case '25':
        $pg=25;
        break;
        case '50':
        $pg=50;
        break;
        default:
        $pg=10;
    }   
    }
}

function getPagination($start, $pg, $count) {
    $pager = "";
    $pages=(int)ceil($count/$pg);
    $current_page = (int)ceil(($start+1)/$pg);
    if($current_page > 1) {
        $prev_page= ($current_page-2)*$pg;
  $pager .= "<a href=\"#{$prev_page}\" class=\"pager\"><span class=\"prev\">Prev</span></a> ";
}
for ($i=1; $i<=$pages; $i++) {
    if($current_page == $i) {
    $pager .= '<strong>'.$i.'</strong> ';
    }
    else {
        $page_start = ($i-1)*$pg;
        $pager .= "<a href=\"#{$page_start}\" class=\"pager\"><span class=\"page_no\">".$i.'</span></a> ';
    }
}
if ($current_page < $pages) {
$next_page = ($current_page)*$pg;
$pager .= "<a href=\"#{$next_page}\" class=\"pager\"><span class=\"next\">Next</span></a> ";        
}
return $pager;
}

$title="Advanced Search";
$ready_script = <<<READY_SCRIPT
$(".country").change(function(){
var id=$(this).val();
var dataString = 'id='+ id;

$.ajax
({
  type: "GET",
  url: "ajax_region.php",
  data: dataString,
  cache: false,
  success: function(html){
    $("#state_id").html('<option value="-1">Any</option>'+html);
  }
});
});
$(".pager").click(function(){
   // my code here
});


$('#advanced_search').click(function(){
   // my code here
});
READY_SCRIPT;

Currently my $ready_script variable gets passed to my header.php page that gets executed from this:

$(document).ready(function() {
    <?php if (isset($ready_script)) {echo($ready_script);} ?>
}

I only want to call my header.php once now and load all my pages into my main div tag so I'm not continually hitting the server with uneeded calls everytime. After my onclick menu event is there a better way to initialize my jquery functions for the specific page I'm loading?

Any thoughts would be greatly appreciated.

Thanks, -Paul

Separate your javascript from your content by putting the scripts into .js files. After you load your content, load your scripts:

$('#main').load("search_advanced.php", function () {
    $.ajax({ url: "search_advanced.js", dataType: "jsonp" });
});

If you load the js at the same time as the content, your scripts could run prematurely.