Error jquery function while loading XPages -
i have been trying same file upload page of bootstrap. error when try. copied of components, css, images , of js files in database. work on demo database not on application db :(
i think cannot call jquery file or js file , code may not communicatate earch other :( not know miss. :(
here code below.. (i put resoursces in have 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 bootstrap file preview various files, offers multiple selection, , more. plugin allows simple way setup advanced file picker/upload control built work specially bootstrap css3 styles. enhances file input functionality further, offering support preview wide variety of files i.e. images, text, html, video, audio, flash, , objects.</h4> <xp:link escape="true" id="link1" text="bootstrap in xpages: using 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" />
it looks loading bootstrap.min.js before jquery - bootstrap has dependency on jquery. should move jquery before boostrap in header.
Comments
Post a Comment