Question

嗨，我正在将jQuery页面附加到AJAX成功函数中，但是当我将其加载到页面上时，似乎没有应用样式设置，并且出现了以下错误-

 Uncaught TypeError: $(...).listview is not a function

这是下面的代码，或者我没有正确加载库，或者缺少一个愚蠢的'};'。谢谢，任何帮助将不胜感激。

代码-

   <script>

    function loadJobRequests() {

   //AJAX code to submit form.
    $.ajax({
        type: "POST",
        url: "http://localhost:8888/EduSubOct/json-data-jobrequests.php",
        data: { userEmail: localStorage.getItem("email") }, 
        dataType : 'JSON',
        cache: false,
        success: function(data) {

        //Insert your student number in the URL if working in DIT, if at home omit it altogether
            $.each(data.jobRequests, function(index, jobRequest) {
                $("#listRequests").append('<li><a href="#'+jobRequest.jobID+'" data-transition="slide"><img src="img/colaistechiaran.jpg"><h2>'+jobRequest.nameTeacher+'</h2><p>'+jobRequest.title+'</p>\n\
                                  <p>'+jobRequest.dateFrom+' to '+jobRequest.dateTo+'</p></a></li>');
                $("#mainbody").append('<div data-role="page" id='+ jobRequest.jobID+'>\n\
                                        <div data-role="header" class="header" data-position="fixed">\n\
                                        <a href="#page4" class="ui-btn-left" data-icon="user"\n\ >Profile</a>EduSub Teacher\n\
                                        </div>\n\
                                        <div role="main" id="requests">\n\
                                       <div class="schoolDetails">\n\
                                        <h1>'+ jobRequest.title+' Wanted</h1>\n\
                                        <h2><b>Date: </b>'+ jobRequest.dateFrom+' </b><b>to </b>'+ jobRequest.dateTo+'<br>\n\
                                        <br><br>\n\
                                        <b>Location: </b>'+ jobRequest.location+'<br>\n\
                                        <br><br>\n\
                                       <b>Description: </b>'+ jobRequest.description+'<br>\n\
                                        </h2>\n\
                                        </div>  \n\
                                    </div>\n\
                                        <div class="contactbuttons ">\n\
        <a href="mailto:edusubapp@gmail.com" id="schoolmail" class="ui-btn ui-shadow ui-corner-all ui-icon-mail ui-btn-icon-notext ui-btn-b ui-btn-inline">Mail</a>\n\
        <a href="tel:+353879841626" id="schoolphone" class="ui-btn ui-shadow ui-corner-all ui-icon-phone ui-btn-icon-notext ui-btn-b ui-btn-inline">Phone</a>\n\
        <a href="#'+ jobRequest.userID+'" id="schoolrequest" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-none ui-btn-b">Request</a>\n\
             <div data-role="popup" id="'+ jobRequest.userID+'" data-dismissible="false" style="max-width:100vh;">\n\
                <div data-role="header" data-theme="a">\n\
                <h1>Are you sure?</h1>\n\
                </div>\n\
                <div role="main" id="requestButtonContent" class="ui-content">\n\
                    <h3 class="ui-title">Are you sure you want to request this position?</h3>\n\
                <p2>An alert will be sent to the school notifying them of your request.</p2>\n\
                    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>\n\
                    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow" onclick="myFunctionjobStatus();">Yes</a>\n\
                </div>\n\
            </div>\n\
                                    <div data-role="footer" id="footer" data-id="footer" data-position="fixed">\n\
                                    <div data-role="navbar" class="footernavbar">\n\
                                        <ul>\n\
                                            <li><a class="ui-nodisc-icon" id="activeicon" href="#page1" data-icon="schooliconactive">Search</a></li>\n\
                                            <li><a class="ui-nodisc-icon" href="#page2" data-icon="plannericon">Planner</a></li>\n\
                                            <li><a class="ui-nodisc-icon" href="#page3.1" data-icon="briefcaseicon">Jobs</a></li>\n\
                                        </ul>\n\
                                    </div>\n\
                                </div></div>');


       }); //End of Loop
            //Rebuild the list to ensure styling is applied 
            $(document).ready(function(){
     $('#listRequests').listview('refresh');
      });
        //End of JSON Call
               }
       });
   }

   </script>

Answer 1

确保在头部的jquery.mobile之前包含jquery

赞：

... src="lib/jquery-1.11.3.min.js"
... src="lib/jquery.mobile-1.4.5.min.js"

jQuery ListView不追加样式表

1 个答案: