CODEWITHSUNDEEP
jqueryxpages
Cumhur Ata
Cumhur Ata

Reputation: 809

Select2 JQuery Plugin in XPages

I would like to do the same select2 with jquery plugin but everytime i get an error showed on the pictured. I ımported .js and .css files into Web-Content folder then added to theme. I think I missed something :(

x$.js file, bootstrap-select.js and dropdown.js files are in the same folder CSS is also. Please suggest me what should i do to get it worked?

Where my Files are in... My theme looks like this.

<theme
    extends="Bootstrap3.2.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd">
    <resources>
        <metaData>
            <httpEquiv>X-UA-Compatible</httpEquiv>
            <content>IE=11</content>
        </metaData>
    </resources>

     <resource>
        <content-type>application/x-javascript</content-type>
        <href>js/x$.js</href>
    </resource>
    <resource>
        <content-type>application/x-javascript</content-type>
        <href>js/bootstrap-select.js</href>
    </resource>
        <resource>
        <content-type>application/x-javascript</content-type>
        <href>js/dropdown.js</href>
    </resource>
    <resource>
        <content-type>text/css</content-type>
        <href>css/bootstrap-select.css</href>
    </resource>

</theme>

My Page code is 

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).selectpicker({
style: 'btn-info',
size: 4,
title: 'Choose one of the following...'
});
});
]]></xp:this.value>   
</xp:scriptBlock> 
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).selectpicker({
style: 'btn-success',
size: 4,
title: 'Select an option...'
});
});
]]></xp:this.value>   
</xp:scriptBlock>
<xp:panel>
<h2>Bootstrap Select</h2>
<h4>Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to
style and bring additional functionality to normal select boxes.</h4><xp:br></xp:br>  
<div class="col-md-7">
<div class="selectpicker">
<xp:listBox id="listBox1" multiple="true">
    <xp:selectItems>
        <xp:this.value><![CDATA[#{javascript:var lis= ["B1","B2","B3","B44"];
return lis;}]]></xp:this.value>
    </xp:selectItems>
</xp:listBox>
</div>
</div>
<div class="col-md-7"><div class="selectpicker">
</div>
</div>
</xp:panel>
</xp:view>

Error Screen

Upvotes: 0

Views: 455

Answers (3)

Johnny Oldenburger
Johnny Oldenburger

Reputation: 58

This will work when you add it manually to your XPage application: https://xpagesandmore.blogspot.nl/2015/06/migrating-to-select2-version-400.html For a Partial Refresh see this blog post by Brad Balassaitis: https://xcellerant.net/2013/12/11/triggering-partial-refresh-on-change-select2/

Upvotes: 4

Howard
Howard

Reputation: 1503

Johnny Oldenburger has blogged about this. See https://xpagesandmore.blogspot.com/

Howard

Upvotes: 1

Paul Stephen Withers
Paul Stephen Withers

Reputation: 15729

That plugin is included in Bootstrap4XPages. I would strongly recommend using that. There are probably few people who have any experience manually adding it.

Upvotes: 1

Related Questions