Javascript懒惰滚动问题

时间:2013-02-28 12:53:58

标签: jsf xhtml lazy-loading

每当我为懒惰滚动添加以下代码到我的index.xhtml时,我都会遇到异常

<script type="text/javascript">

$(document).ready(function(){
    function lastAddedLiveFunc()
    {
        $('div#lastPostsLoader').html('<img src="bigLoader.gif">');

        $.get("loadmore.php", function(data){
            if (data != "") {
                //console.log('add data..');
                $(".items").append(data);
            }
            $('div#lastPostsLoader').empty();
        });
    };

    //lastAddedLiveFunc();
    $(window).scroll(function(){

        var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
        var  scrolltrigger = 0.95;

        if  ((wintop/(docheight-winheight)) > scrolltrigger) {
         //console.log('scroll bottom');
         lastAddedLiveFunc();
        }
    });
});

1)Index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:c="http://java.sun.com/jsp/jstl/core">


<h:head>
    <link href="Css/StyleSheet.css" rel="stylesheet" type="text/css"
        media="screen" />

<script type="text/javascript">

$(document).ready(function(){
    function lastAddedLiveFunc()
    {
        $('div#lastPostsLoader').html('<img src="bigLoader.gif">');

        $.get("loadmore.php", function(data){
            if (data != "") {
                //console.log('add data..');
                $(".items").append(data);
            }
            $('div#lastPostsLoader').empty();
        });
    };

    //lastAddedLiveFunc();
    $(window).scroll(function(){

        var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
        var  scrolltrigger = 0.95;

        if  ((wintop/(docheight-winheight)) > scrolltrigger) {
         //console.log('scroll bottom');
         lastAddedLiveFunc();
        }
    });
});

</script>


</h:head>



<h:body class="thrColElsHdr">

    <div id="header">
        <div class="header3">
            <div class="header4"></div>

            <div class="header5">
                <h:form>
                    <ul class="menu" rel="sam1">
                        <li class="active"><a href="Home.xhtml">Home</a></li>
                        <li><h:commandLink action="#{statusBean.navigate}">Profile</h:commandLink></li>
                        <li><a href="photos.xhtml">Photos</a></li>
                        <li><a href="#">Account Settings</a></li>
                        <li><a href="logoutServ.do" style="border-right: :none;">Logout</a></li>

                    </ul>
                </h:form>
            </div>
        </div>
    </div>
    <div id="container">




        <div id="sidebar1">
            <img
                src="../images/profilePicture/#{sessionScope['userdet']['image']}"
                width="150px" />
            <div class="tab1">Hello</div>
            <div class="tabs"
                style="border-bottom-style: groove; border-bottom-color: #eeffff; border-bottom-width: 1px;">
                <a
                    style="text-decoration: none; font-size: small; text-align: left; color: #bbbbbb;">Friends
                    and Details</a>
            </div>
            <a href="friends.xhtml"
                style="text-decoration: none; font-size: x-small; color: black;">
                <div class="tabs">


                    <img src="../Image/people.png" height="20px" width="20px" />
                    Friends
                </div>
            </a> <a href="userdetails.xhtml"
                style="text-decoration: none; font-size: x-small; color: black;">
                <div class="tabs">
                    <img src="../Image/Document-Write-icon.png" height="20px"
                        width="20px" /> User Details
                </div>
            </a> <a href="NewFile.xhtml"
                style="text-decoration: none; font-size: x-small; color: black;">
                <div class="tabs">
                    <img src="../Image/Document-Write-icon.png" height="20px"
                        width="20px" /> Chat
                </div>
            </a>
            <div class="tabs"
                style="border-bottom-style: groove; border-bottom-color: #eeffff; border-bottom-width: 1px;">
                <a
                    style="text-decoration: none; font-size: small; text-align: left; color: #bbbbbb;">Apps</a>
            </div>


        </div>


        <div id="sidebar2">

            <div class="tabs"
                style="border-bottom-style: groove; border-bottom-color: #eeffff; border-bottom-width: 1px;">
                <a
                    style="text-decoration: none; font-size: small; text-align: left; color: #bbbbbb;">Birth
                    Days</a>
            </div>

            <div class="tabs"
                style="border-bottom-style: groove; border-bottom-color: #eeffff; border-bottom-width: 1px;">
                <a
                    style="text-decoration: none; font-size: small; text-align: left; color: #bbbbbb;">Sponsors</a>
            </div>
            <a href="http://www.hp.com/"
                style="text-decoration: none; font-size: x-small; color: black;">
                <div class="tabs">
                    <img src="../Image/hp-ad-printer.jpg" width="100px" /><br />
                    <p
                        style="text-decoration: none; font-size: xx-small; text-align: left; color: #bbbbbb;">Hp
                        comes with new edge of Ultra book series.</p>
                </div>
            </a> <a href="http://www.samsung.com/in/"
                style="text-decoration: none; font-size: x-small; color: black;">

                <div class="tabs">
                    <img
                        src="../Image/samsung-wireless-phones-successful-small-86757.jpg"
                        width="100px" /><br />
                    <p
                        style="text-decoration: none; font-size: xx-small; text-align: left; color: #bbbbbb;">Samsung
                        renovating their ideas with new technologies and introduced those
                        intos Mobiles and Laptops.</p>

                </div>

            </a>
            <div class="tabs"
                style="border-bottom-style: groove; border-bottom-color: #eeffff; border-bottom-width: 1px;">
                <a
                    style="text-decoration: none; font-size: small; text-align: left; color: #bbbbbb;">Advertisement</a>
            </div>

            <a href="http://www.myntra.com/"
                style="text-decoration: none; font-size: x-small; color: black;">
                <div class="tabs">
                    <img src="../Image/Myntra-Logo1.png" width="100px" /><br />
                    <p
                        style="text-decoration: none; font-size: xx-small; text-align: left; color: #bbbbbb;">Shops
                        from online and get from home with high % of off .</p>

                </div>
            </a> <a href="http://www.snapdeal.com/"
                style="text-decoration: none; font-size: x-small; color: black;">
                <div class="tabs">
                    <img src="../Image/snapdeal_logo_new.jpg" width="100px" /><br />
                    <p
                        style="text-decoration: none; font-size: xx-small; text-align: left; color: #bbbbbb;">Get
                        greatest deals and offers from snapdeal and order it and get it in
                        a day.</p>

                </div>
            </a>




            <!-- end #sidebar2 -->
        </div>


        <div id="mainContent">
            <div class="det">
                <h:form style="float:right;font-size:small;">&nbsp;&nbsp;&nbsp;
      <h:outputText value="Search your friends here."
                        style="font-size:small;color:#CCCCCC;" />
                    <p:autoComplete id="auto" value="#{searchBean.selectedUser}"
                        completeMethod="#{searchBean.completeUser}" var="p"
                        itemLabel="#{p.userName}" itemValue="#{p}"
                        converter="userConverter" forceSelection="true"
                        style="width:300px;">
                        <p:column>
                            <img src="../images/profilePicture/thumb/#{p.image}"
                                style="height: 40px; width: 40px;" />
                        </p:column>
                        <p:column>  
                    #{p.firstName} #{p.lastName}   
            </p:column>
                    </p:autoComplete> 
         &nbsp;<h:commandButton image="../Image/magnify.png"
                        action="#{searchBean.navigate}" style="height:20px;float:right;" />
                    <br />
                </h:form>
            </div>

            <h2>
                <h:outputText styleClass="outputLabel"
                    value="#{sessionScope['userdet']['firstName']} #{sessionScope['userdet']['lastName']} " />
            </h2>



            <div class="details">

                <h:outputText value="Email: #{sessionScope['userdet']['email']}"
                    styleClass="textstyle3" />
                <h:outputText
                    value="Date of Birth: #{sessionScope['userdet']['birthDate']}"
                    styleClass="textstyle3" />
                <br />
                <h:outputText
                    value="Contact No: #{sessionScope['userdet']['contactNo']}"
                    styleClass="textstyle3" />
                <h:outputText value="About: #{sessionScope['userdet']['quote']}"
                    styleClass="textstyle3" />
                <br />
                <h:outputText value="City: #{sessionScope['userdet']['city']}"
                    styleClass="textstyle3" />
                <h:outputText value="State: #{sessionScope['userdet']['state']}"
                    styleClass="textstyle3" />
                <h:outputText value="Country: #{sessionScope['userdet']['country']}"
                    styleClass="textstyle3" />
                <br />
                <h:graphicImage
                    url="../Image/Mac-App-Updates-CrossOver-Mac-9-0-1-Floola-5-7-2.png"
                    height="15px" width="15px" style="padding-left:80%;" />
                <a href="userdetails.xhtml"
                    style="font-size: small; text-decoration: none; color: red;">Update
                    Details</a>


            </div>
            <div style="width: 100%; background-color: #EEEEEE;">
                <h:panelGrid columns="1">
                    <h:form>
                        <h:outputText value="Speak Out" />
                        <br />
                        <h:outputText value="Share whats in your mind.!"
                            style="color:#aaaaaa;font-size:x-small;" />
                        <p:inputTextarea name="content" id="sharetext" cols="60" rows="2"
                            onclick="this.value='';" value="#{statusBean.status.statusmsg}"
                            style="text-size:small;" />
                        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <p:commandButton type="submit" value="Speak Out"
                            action="#{statusBean.save}" ajax="false" styleClass="buttonstyle" />
                        <br />
                    </h:form>

                    <h:form>
                        <h:outputText value="Pic Out" />
                        <br />
                        <p:fileUpload fileUploadListener="#{statusBean.handleFileUpload}" />
                        <h:outputText value="Share whats in your mind through an image.!"
                            style="color:#aaaaaa;font-size:x-small;" />
                        <p:inputTextarea name="content" id="sharetext" cols="60" rows="2"
                            onclick="this.value='';"
                            value="#{statusBean.status.picstatusdesc}"
                            style="text-size:small;" />
                        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <p:commandButton type="submit" value="Pic Out"
                            action="#{statusBean.picSave}" ajax="false"
                            styleClass="buttonstyle" />
                        <br />
                    </h:form>
                    <h:form>
                        <h:outputText value="Video Out" />
                        <br />

                        <h:inputText value="#{statusBean.status.videostatus}" style="height: 36px; width: 318px; "/>
                        <p:inputTextarea name="content" id="sharetext" cols="60" rows="2"
                            onclick="this.value='';"
                            value="#{statusBean.status.videostatusdesc}"
                            style="text-size:small;" />
                        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <p:commandButton type="submit" value="Video Out"
                            action="#{statusBean.videoSave}" ajax="false"
                            styleClass="buttonstyle" />
                        <br />
                    </h:form>

                </h:panelGrid>
            </div>

            <!--  -->


<div class="items">
            <c:forEach var="p" items="#{statusBean.statusList}">
                <h:form>
                    <div class="status">
                        <c:if test="${p.statusmsg!=null}">
                            <!--  for text status msg check-->
                            <h:commandLink action="#{friendBean.gotoFriendProfile(p.email)}"
                                styleClass="link">
                                <img src="../images/profilePicture/thumb/#{p.picture}"
                                    style="height: 39px; width: 39px;" />&nbsp; <h:outputText
                                    value="#{p.statusBy}:" />
                            </h:commandLink>
                            <h:outputText value="#{p.statusmsg}" styleClass="textstyle1" />
                            <h:outputText value="#{p.timeMillis}"
                                style="font-size:xx-small;float:right;color:#bbbbbb;font-style: italic;">
                                <f:converter converterId="timeConverter" />
                            </h:outputText>
                            <h:commandLink action="#{statusBean.deleteStatus(p.statusId)}"
                                value="Delete"></h:commandLink>
                            <p:growl />
                            <br />

                            <c:forEach var="q" items="#{statusBean.commentList(p.statusId)}">
                                <div class="barcomment">
                                    <br />
                                    <h:commandLink
                                        action="#{friendBean.gotoFriendProfile(q.email)}"
                                        styleClass="link">
                                        <img src="../images/profilePicture/thumb/#{q.picture}"
                                            style="height: 29px; width: 29px;" />&nbsp; <h:outputText
                                            value="#{q.commentBy}:" />
                                    </h:commandLink>
                                    <h:outputText value=" #{q.comment}" styleClass="textstyle1" />
                                    <h:outputText value="#{q.timeMillis}"
                                        style="font-size:xx-small;float:right;font-style: italic;">
                                        <f:converter converterId="timeConverter" />
                                    </h:outputText>
                                    <h:commandLink
                                        action="#{statusBean.deleteComment(q.commentId)}"
                                        value="Delete"></h:commandLink>
                                </div>
                            </c:forEach>
                            <br />
                            <div class="comment">
                                <p:inputText value="#{statusBean.comment.comment}"
                                    styleClass="box" />
                                <p:commandLink value="Views"
                                    action="#{statusBean.update(p.statusId)}" ajax="false"
                                    styleClass="link" />
                            </div>
                            <br />

                        </c:if>

                        <c:if test="#{p.picstatus!=null}">
                            <!--  for picture status check-->

                            <h:commandLink action="#{friendBean.gotoFriendProfile(p.email)}"
                                styleClass="link">
                                <img src="../images/profilePicture/thumb/#{p.picture}"
                                    style="height: 39px; width: 39px;" />&nbsp; <h:outputText
                                    value="#{p.statusBy}:" />
                            </h:commandLink>
                            <img src="../images/statusPicture/#{p.picstatus}" width="150px"
                                style="height: 247px; width: 396px;" />
                            <h:outputText value="#{p.timeMillis}"
                                style="font-size:xx-small;float:right;color:#bbbbbb;font-style: italic;">
                                <f:converter converterId="timeConverter" />
                            </h:outputText>
                            <h:commandLink action="#{statusBean.deleteStatus(p.statusId)}"
                                value="Delete"></h:commandLink>
                            <br />
                            <h:outputText value="#{p.picstatusdesc}" />
                            <p:growl />
                            <br />

                            <c:forEach var="q" items="#{statusBean.commentList(p.statusId)}">
                                <div class="barcomment">
                                    <br />
                                    <h:commandLink
                                        action="#{friendBean.gotoFriendProfile(q.email)}"
                                        styleClass="link">
                                        <img src="../images/profilePicture/thumb/#{q.picture}"
                                            style="height: 29px; width: 29px;" />&nbsp; <h:outputText
                                            value="#{q.commentBy}:" />
                                    </h:commandLink>
                                    <h:outputText value=" #{q.comment}" styleClass="textstyle1" />
                                    <h:outputText value="#{q.timeMillis}"
                                        style="font-size:xx-small;float:right;font-style: italic;">
                                        <f:converter converterId="timeConverter" />
                                    </h:outputText>
                                    <h:commandLink
                                        action="#{statusBean.deleteComment(q.commentId)}"
                                        value="Delete"></h:commandLink>
                                </div>
                            </c:forEach>
                            <br />
                            <div class="comment">
                                <p:inputText value="#{statusBean.comment.comment}"
                                    styleClass="box" />
                                <p:commandLink value="Views"
                                    action="#{statusBean.update(p.statusId)}" ajax="false"
                                    styleClass="link" />
                            </div>
                        </c:if>


                        <c:if test="#{p.videostatus!=null}">
                            <!--  for video status check-->

                            <h:commandLink action="#{friendBean.gotoFriendProfile(p.email)}"
                                styleClass="link">
                                <img src="../images/profilePicture/thumb/#{p.picture}"
                                    style="height: 39px; width: 39px;" />&nbsp; <h:outputText
                                    value="#{p.statusBy}:" />
                            </h:commandLink>
                            <embed width="420" height="345"
                                src="http://www.youtube.com/v/#{p.videostatus}"
                                type="application/x-shockwave-flash"> </embed>
                            <h:outputText value="#{p.timeMillis}"
                                style="font-size:xx-small;float:right;color:#bbbbbb;font-style: italic;">
                                <f:converter converterId="timeConverter" />
                            </h:outputText>
                            <h:commandLink action="#{statusBean.deleteStatus(p.statusId)}"
                                value="Delete"></h:commandLink>
                            <br />
                            <h:outputText value="#{p.videostatusdesc}" />
                            <p:growl />
                            <br />

                            <c:forEach var="q" items="#{statusBean.commentList(p.statusId)}">
                                <div class="barcomment">
                                    <br />
                                    <h:commandLink
                                        action="#{friendBean.gotoFriendProfile(q.email)}"
                                        styleClass="link">
                                        <img src="../images/profilePicture/thumb/#{q.picture}"
                                            style="height: 29px; width: 29px;" />&nbsp; <h:outputText
                                            value="#{q.commentBy}:" />
                                    </h:commandLink>
                                    <h:outputText value=" #{q.comment}" styleClass="textstyle1" />
                                    <h:outputText value="#{q.timeMillis}"
                                        style="font-size:xx-small;float:right;font-style: italic;">
                                        <f:converter converterId="timeConverter" />
                                    </h:outputText>
                                    <h:commandLink
                                        action="#{statusBean.deleteComment(q.commentId)}"
                                        value="Delete"></h:commandLink>
                                </div>
                            </c:forEach>
                            <br />
                            <div class="comment">
                                <p:inputText value="#{statusBean.comment.comment}"
                                    styleClass="box" />
                                <p:commandLink value="Views"
                                    action="#{statusBean.update(p.statusId)}" ajax="false"
                                    styleClass="link" />
                            </div>
                        </c:if>


                    </div>
                </h:form>
            </c:forEach>
</div>

<div id="lastPostsLoader"></div>


            <!-- end #mainContent -->
        </div>
        <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
        <br class="clearfloat" />
        <div id="footer">
            <p>Footer</p>
            <!-- end #footer -->
        </div>
    </div>

</h:body>
</html>

3)例外

Feb 28, 2013 6:21:32 PM org.apache.catalina.core.StandardWrapperValve invoke
SEVERE: Servlet.service() for servlet [Faces Servlet] in context with path [/FreeBird_v.6] threw exception [null source] with root cause
java.lang.IllegalArgumentException: null source
    at java.util.EventObject.<init>(EventObject.java:56)
    at javax.faces.event.SystemEvent.<init>(SystemEvent.java:67)
    at javax.faces.event.ComponentSystemEvent.<init>(ComponentSystemEvent.java:69)
    at javax.faces.event.PostRestoreStateEvent.<init>(PostRestoreStateEvent.java:69)
    at com.sun.faces.lifecycle.RestoreViewPhase.deliverPostRestoreStateEvent(RestoreViewPhase.java:256)
    at com.sun.faces.lifecycle.RestoreViewPhase.execute(RestoreViewPhase.java:245)
    at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:97)
    at com.sun.faces.lifecycle.RestoreViewPhase.doPhase(RestoreViewPhase.java:107)
    at com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:114)
    at javax.faces.webapp.FacesServlet.service(FacesServlet.java:308)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:305)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
    at org.primefaces.webapp.filter.FileUploadFilter.doFilter(FileUploadFilter.java:79)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:243)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
    at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:225)
    at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:123)
    at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:472)
    at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:168)
    at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:98)
    at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:927)
    at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:118)
    at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:407)
    at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1001)
    at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:579)
    at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:312)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1110)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:603)
    at java.lang.Thread.run(Thread.java:722)

0 个答案:

没有答案