CODEWITHSUNDEEP
jqueryxpages
Cumhur Ata
Cumhur Ata

Reputation: 809

Error jquery function while loading XPages

I have been trying to the same file upload page of bootstrap. I get this error When i try. I copied all of components, Css, images and all of js files in to my database. It work on demo database but not on my application db :(

I think I cannot call jquery file or JS file and code may not communicatate earch other :( I do not know What i miss. :(

Error Screen

Here is my Code below.. (I put all resoursces in to where they have to be)

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

Upvotes: 1

Views: 284

Answers (3)

MarkyRoden
MarkyRoden

Reputation: 1074

It also looks like you are loading bootstrap.min.js before jQuery - Bootstrap has a dependency on jQuery. You should move the jQuery before Boostrap in the header.

Upvotes: 1

Per Henrik Lausten
Per Henrik Lausten

Reputation: 21709

It's an AMD loader issue.

See this duplicate question on the exact same issue with the file input plugin: https://stackoverflow.com/a/36924237/785061

Upvotes: 3

nfort
nfort

Reputation: 13034

Fileinput plugin don't loaded, check tab Network

Upvotes: 0

Related Questions