2016-07-11 22 views
1

私はブートストラップと同じファイルをアップロードしようとしています。私はこのエラーを取得します。私はすべてのコンポーネント、Css、画像、およびすべてのjsファイルを自分のデータベースにコピーしました。これは、デモ・データベース上で動作しますが、ない私のアプリケーションデシベル:(XPageをロード中にjqueryエラーが発生しました

に私はjqueryのファイルやJSファイルを呼び出すことはできませんし、コードがcommunicatateないかもしれないと思うearchが他:( 私は私が見逃しているかわからない。:(

ここで

Error Screen

以下の私のコード..です(私は、彼らがする必要がどこににあるすべてのresourscesを置く)

<?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" /> 

HERE IS THE NETWORK TAB

+0

[Xpages Bootstrap Upload Control]の複製があります。(http://stackoverflow.com/questions/36923078/xpages-bootstrap-upload-control) –

答えて

1

を - ブートストラップは、jQueryのに依存しています。 Boostrapの前にjQueryをヘッダー内に移動する必要があります。

+0

(スクリーンショットの表示から) 'form'タグ内のExtLib(ブートストラップ '.min.js')の前のjQuery 2.1.1とjQuery 2.1.1の組み合わせのように見えます。 –

+1

は? 私はJQuery 2.1.1と思う。ブートストラッププラグインが付属しています。しかし、Jquery 1.11.0を手動でデータベースに入れました。 2.1.1を削除するか、1.11.0を削除する必要がありますか? –

+0

確かにjQueryを2回ロードすると問題が発生します。削除する必要があるのは、ブラウザのサポートやプラグインのニーズによって異なります。どちらの方法でも、ブートストラップの前にロードする必要があります:) – MarkyRoden

0

FileInputクラスのプラグインがロードされていない、タブのネットワークに

+0

私のページはこのように始まります。すでにページの一番上にあるようですか?私は携帯する方法がわからない –

3

をチェックこれは、AMDローダーの問題です。

ファイル入力プラグインとまったく同じ問題で、この重複した質問を参照してください:あなたはjQueryの前にbootstrap.min.jsをロードしているようですが、また見えhttps://stackoverflow.com/a/36924237/785061

関連する問題