Fehler jquery Funktion beim Laden von XPages

Question

Ich habe versucht, die gleiche Datei Upload-Seite des Bootstrap. Ich bekomme diesen Fehler, wenn ich es versuche. Ich habe alle Komponenten, Css, Bilder und alle js-Dateien in meine Datenbank kopiert. Es funktioniert auf Demo-Datenbank, aber nicht auf meine Anwendung db :(

Ich glaube, ich nicht jquery Datei oder JS-Datei und der Code kann nicht communicatate earch andere :( Ich weiß nicht, was ich verpassen nennen kann. :(

Hier ist mein Code unten .. (ich alle resoursces setzen in, wo sie sein müssen)

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" 
    xmlns:xc="http://www.ibm.com/xsp/custom"> 
    <xp:this.data> 
     <xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument> 
    </xp:this.data> 
    <xp:this.resources> 
     <xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script> 
    </xp:this.resources> 
    <script type="text/javascript" src="bootstrapfileinput4/js/fileinput.js"></script> 

    <link rel="stylesheet" href="bootstrapfileinput4/css/fileinput.css" media="all" type="text/css" /> 
    <xp:scriptBlock id="scriptBlockInitFile"> 
     <xp:this.value> 
      <![CDATA[ 
      $(document).ready( 
       function() { 
        $('input[type=file]').fileinput({ 
         previewFileType: "image", 
         browseClass: "btn btn-primary", 
         browseLabel: "Browse", 
         browseIcon: '<i class="glyphicon glyphicon-plus"></i>', 
         removeClass: "btn btn-danger", 
         removeLabel: "Delete", 
         removeIcon: '<i class="glyphicon glyphicon-trash"></i>', 
         uploadClass: "btn btn-info", 
         uploadLabel: "Upload", 
         uploadIcon: '<i class="glyphicon glyphicon-upload"></i>', 
       }); 
       } 
      ); 
     ]]> 
     </xp:this.value> 
    </xp:scriptBlock> 

      <xp:panel xp:key="facetLeft"> 
       <xp:image url="/bootstrapxplogodb.jpg" id="image1"></xp:image></xp:panel> 
      <xp:panel xp:key="facetMiddle"> 
       <xp:br></xp:br> 
       <div class="page-header"> 
        <h2>Bootstrap FileInput</h2> 
        <h4>An enhanced HTML 5 file input for Bootstrap with file preview for 
        various files, offers multiple selection, and more. 
        The plugin allows you a simple way to setup an advanced file picker/upload 
        control built to work specially with Bootstrap CSS3 styles. 
        It enhances the file input functionality further, by offering support to 
        preview a wide variety of files i.e. images, text, html, video, audio, flash, and 
        objects.</h4> 
        <xp:link escape="true" id="link1" 
         text="Bootstrap in XPages: Using the new Bootstrap Fileinput Plugin in XPages Part I" 
         value="https://xpagesandmore.blogspot.nl/2015/06/bootstrap-in-xpages-using-new-bootstrap.html" 
         target="_blank"> 
        </xp:link> 
        <br/> 
       </div>    
       <xp:fileUpload id="fileUpload1" 
        value="#{document1.fileAttachment}"> 
        <xp:this.attrs> 
         <xp:attr name="accept" value="image/*" /> 
        </xp:this.attrs> 
       </xp:fileUpload> 
       <xp:br></xp:br> 
       <xp:br></xp:br> 
       <xp:fileDownload rows="30" id="fileDownload1" 
        displayLastModified="true" value="#{document1.fileAttachment}" 
        hideWhen="true" allowDelete="true"> 
       </xp:fileDownload>    
       <xp:br></xp:br> 
       <xp:button value="Save Document" id="button1" 
        styleClass="btn btn-primary" rendered="false"> 
        <xp:eventHandler event="onclick" submit="true" 
         refreshMode="complete"> 
         <xp:this.action> 
          <xp:actionGroup> 
           <xp:saveDocument></xp:saveDocument> 
           <xp:openPage name="/BootstrapFileInput4.xsp"></xp:openPage> 
          </xp:actionGroup> 
         </xp:this.action> 
        </xp:eventHandler> 
       </xp:button> 
       <xp:br></xp:br> 
       <xp:br></xp:br> 
      </xp:panel> 


</xp:view> 

UPDATE:

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" 
    xmlns:xc="http://www.ibm.com/xsp/custom"> 
    <xp:this.data> 
     <xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument> 
    </xp:this.data> 
    <xp:this.resources> 
     <xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script> 
    </xp:this.resources> 
    <script type="text/javascript" src="bootstrapfileinput4/js/fileinput.js"></script> 

    <link rel="stylesheet" href="bootstrapfileinput4/css/fileinput.css" media="all" type="text/css" /> 

Answer 1

Es sieht auch wie Sie bootstrap.min.js vor jQuery laden - Bootstrap eine Abhängigkeit von jQuery hat. Sie sollten die jQuery vor Boostrap in der Kopfzeile verschieben.

Answer 2

FileInput- Plugin nicht, überprüfen Registerkarte Netzwerk

Answer 3

Es ist ein AMD-Loader Problem geladen.

Sehen Sie diese doppelte Frage auf die exakt gleiche Problem mit der Datei-Eingabe-Plugin: https://stackoverflow.com/a/36924237/785061