Dynamic JQuery Mobile Listview

Question

I'm trying to dynamically build a litview via a JSONP call. However, the listview isnt being populated. The JSONP bit is tested, so this shouldn't be the problem.

Here's my code...

<div data-role="page" class="pages" id="aircraft_step3" data-theme="a">

        <!-- Header Begin -->
        <div data-role="header" class="header" data-theme="a">
        <a href="#" class="showMenu menuBtn">Menu</a>
        <div class="logo">&nbsp;</div>
        </div>
        <!-- /header -->

        <!-- breadcrumb -->
        <ul class="breadcrumb">
            <li><a href="#home"><div class="homeicon"></div></a></li>
            <li><a href="#aircraft_step1" title="aircraft search" data-transition="flow">Aircraft Search</a></li>
            <li><a href="#aircraft_step2" title="manufacturer" data-transition="flow">Manufacturer</a></li>
            <li><a href="#aircraft_step3" title="listings" data-transition="flow">Listings</a></li>
        </ul>
        <!-- / breadcrumb-->

        <!-- Content Begin -->
        <div data-role="content">
            <h3>Please select an aircraft.</h3>
            <ul id="aircraftList" data-role="listview" data-inset="true" data-filter="true" >
            </ul>
        </div>
        <!-- /content -->
        <script type="text/javascript">
            $(document).on('pagebeforeshow', '#aircraft_step3', function(){  
            //set up string for adding <li/>
            var li = "";
            $.getJSON("my_url?callback=?",
                function(data){
                  $.each(data.items, function(i,item){
                    li += '<li><a href="" data-transition="slidedown"><img src="'+item.Image+'" style="width:80px;height:80px;"/> <span style="font-size:0.75em;">' + item.Manufacturer + ' ' + item.Model + ' ' + item.Price + '</span><br/><span style="font-size:0.65em;">S/N: ' + item.Serial + ' | TTAF: ' + item.TTAF + ' | LOC: ' + item.Location + '</span><br/><span style="font-size:0.65em;"> ' + item.DealerName + ' </span></a></li>'
                  });
                $("#aircraftList").append(li);
                $("#aircraftList").listview().listview('refresh');
                });
            })
    </script>
    </div>

The Firebug console is giving the following error:

ReferenceError: $ is not defined

$(document).on('pagebeforeshow', '#aircraft_step3', function(){

Any ideas what the issue is / why the listview isnt being populated?

UPDATE

This is the complete set of references to JS/JQUERY/JQM which are all located at the bottom of the html page.

<!-- Javascripts is down of the page for fast open -->
    <script src="assets/js/vendor/modernizr-2.6.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <script src="assets/js/vendor/zepto.min.js"></script>
    <script src="assets/js/helper.js"></script>
    <script src="assets/js/custom.js"></script>
    <script src="assets/js/add2home.js" charset="utf-8"></script><!-- Iphone Bubble  -->

    <!--  Photo Swipe Gallery  -->
    <script src="assets/js/klass.min.js"></script>
    <script src="assets/js/photoswipe.js"></script>
    <!--  Photo Swipe Gallery End -->

    <!--  Photo Swipe Gallery Custom JS  -->
    <script type="text/javascript">
        $(document).ready(function(){
            var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
        });
    </script>

    <!--  Photo Swipe Gallery Custom JS End-->

    <!-- Slider -->
    <script src="assets/js/jquery.flexslider.js"></script>
    <script>
    $(document).ready(function() {
        $('.flexslider').flexslider({
                  slideDirection: "vertical",
                  animation: "slide",
                  start: function(slider){
                    $('.flexslider').css("max-height" , "574px");
                }
            });
    });
    </script>
    <!-- / Slider -->

Answer 1

I was running an old version of Jquery and JQM, hence the code wasn't working.

Updating to the current libraries meant this now works as intended.

Many thanks to @Omar