How to integrate jquery, ajax into JSP & JSF

Question

I have texted the Ajax, jquery portion on html java script, it is working. However I need to integrate this portion of the code into my jsf/jsp application. Somehow it is not even calling my on Change method. Is the way I enclose my scripts correct? There are not many examples of how to integrate jquery, ajax, jsf implementation.

<?xml version="1.0" encoding="UTF-8"?>
<jsp:root version="1.2" xmlns:f="http://java.sun.com/jsf/core" 
xmlns:h="http://java.sun.com/jsf/html" 
xmlns:jsp="http://java.sun.com/JSP/Page" 
xmlns:ui="http://www.sun.com/web/ui">
<jsp:directive.page contentType="text/html;charset=UTF-8" 
pageEncoding="UTF-8"/>
<f:view>
    <ui:page binding="#{dcm$App.page1}" id="page1">
        <ui:html binding="#{dcm$App.html1}" id="html1">
 <table border="0" cellpadding="0" cellspacing="0" width="98%">           

<td style="border: 1px solid black;">
   <ui:dropDown binding="#{dcm$App.ddlPolicyYear}" id="ddlPolicyYear" />
</td>

<script type="text/javascript" src="http://code.jquery.com/jquery- 
latest.min.js"></script>
<script>

        $('#ddlPolicyYear').on('change', function(){

              var text = $("#ddlPolicyPeriod option:selected").text();

                        data =  {ddlPolicyPeriod: text};
                                
                            $.ajax({           
                            url: 'populatePolicyDetails',
                            type: 'POST',
                            data: JSON.stringify(data),
                            contentType: "application/json",
                            complete: function (data) {

                            }
                        });
                    });
</script>

        </ui:html>
    </ui:page>
</f:view>
</jsp:root>