How can I load a ul from another webpage into a div using jQuery?

Question

Okay, I feel like I'm close to getting it. I have two pages that are almost identical. One has a list of the alphabet and when a letter is chosen, the other page filters results (last names of people being queried from a database using php) and displays them on the right side of the screen. I am trying to pull in the ul from my second page that has the results into a div in the first page so that the second page does not have to be loaded.

    $(document).ready(function() {

      $(".toggleLetters").click(function() {
      /* grabs URL from HREF attribute then adds an  */
      /* ID from the DIV I want to grab data from    */

      var myUrl = $(this).attr("href", "retrieveLastNames.php") +   ".deptPeople";
      $(".rightColumn").load(myUrl);
        return false;
       });

      });

The toggleLetters class is attached to each link(letter of the alphabet) retrieveLastNames.php is the second page that I am trying to load from. deptPeople is the ul I am trying to pull in from the second page, and rightColumn is the div that I am trying to load my list into. Right now, when I click on a letter the page does not go to retrieveLastNames.php, so I know that my jQuery is doing SOMETHING since its knowing to not load the other page. The question is, why is it not pulling in my list?

Update

Peter's solution worked for me to get the ul to display in the page, however, now my results are not filtering.

<?php
$lastnameFilter = $_GET["lastnameFilter"];
$data = $_GET['page1Data'];
// 1. import connection to database
require_once("../../db_connect.php");

$sql = "SELECT * FROM people WHERE lastName LIKE '".$lastnameFilter."%'ORDER BY title DESC";
$result = mysqli_query($connection, $sql);

?>

Previously, my links looked like this:

<li><a class="toggleLetters" href="retrieveLastNames.php?lastnameFilter="B">B</a></li>

I changed them to

<li><a class="toggleLetters" href="#" data-url-data="B">B</a></li>

Now instead of filtering the names by letter it shows all the names in my database.

Answer 1

Something like the following may work depending on the structure of your page:

<a href="#" class="toggleLetters" data-url-data="A">A</a>

var data = $(this).data('url-data');
$(".rightColumn").load('retrieveLastNames.php?page1Data=' + data + ' ul');

The fragment <ul>.....</ul> , if found, will be extracted from the response and inserted into the DOM

In page 2 you would need to read the value in page1Data and use it to filter your result.

$data = $_GET['page1Data'];

Please take a look at the section, Loading Page Fragments here

UPDATE

Use either option 1 or option 2 as outlined below.

option 1: -- Retain your markup

<li><a class="toggleLetters" href="retrieveLastNames.php?lastnameFilter="B">B</a></li>

PHP

<?php
$lastnameFilter = $_GET['lastnameFilter'];

// 1. import connection to database
require_once("../../db_connect.php");

$sql = "SELECT * FROM people WHERE lastName LIKE '".$lastnameFilter."%'ORDER BY title DESC";
$result = mysqli_query($connection, $sql);

?>
//^^^^^consider changing this to guard against SQL injection attacks!!!!!

JS

$(".toggleLetters").click(function() {
    var myUrl = this.href +   " .deptPeople";
    $(".rightColumn").load(myUrl);
    return false;
});

Option 2: -- Use date- attribute

<li><a class="toggleLetters" href="#" data-url-data="B">B</a></li>

PHP

//Same as above

JS

$(".toggleLetters").click(function() {
    var myUrl = 'retrieveLastNames.php?lastnameFilter=' + $(this).data('url-data') +   " .deptPeople";
    $(".rightColumn").load(myUrl);
    return false;
});