0

i was trying to add BootsTrap Typeahead to one of my Xpages. So i imported all the Bootstrap stuff to my application. When i put the values "hardcoded" into the list, it works perfectly. But i created an array of "Values" in a SSJS Library.

Can you tell me how i can put that array from the SSJS Lib to the value list of typeahead?

<xp:inputText id="inputText1" styleClass="typeahead"></xp:inputText>

<script>
var value = ['test', 'birthday']
$('.typeahead').typeahead({source: value });
</script>

Thanks

user3126813
  • 57
  • 1
  • 7

1 Answers1

2

The typeahead component has been removed in Bootstrap 3 in favour of Twitter's typeahead library. It does work in Bootstrap 2.3.2.

Anyway. You'll need to use an xp:scriptBlock control to be able to reference server side variables. My first reaction would be to do this:

<xp:this.beforePageLoad>
  <![CDATA[
   #{javascript:viewScope.put("typeaheadOptions", ["Alabama", "Alaska"] );}
  ]]>
</xp:this.beforePageLoad>

<xp:inputText
    id="inputText1"
    styleClass="typeahead"></xp:inputText>

<xp:scriptBlock
    id="scriptBlock1">
    <xp:this.value><![CDATA[
      var value = #{viewScope.typeaheadOptions};
      $('.typeahead').typeahead({source: value });
    ]]></xp:this.value>
</xp:scriptBlock>

But that didn't work: you will end up with javascript that look like this:

var value = [Alabama, Alaska];

Notice the missing quotes around the entries.

To solve that you can wrap the variable in a toJson function before storing it.

<xp:this.beforePageLoad>
  <![CDATA[
   #{javascript:viewScope.put("typeaheadOptions", toJson(["Alabama", "Alaska"]) );}
  ]]>
</xp:this.beforePageLoad>
Community
  • 1
  • 1
Mark Leusink
  • 3,747
  • 15
  • 23
  • THX, that was what I´m searching for. But is there a possibility that when i have an array with multiple Strings in it, that i can give the complete array to the viewScope variable like that: viewScope.put("typeaheadOptions", toJson([array]) ) or must i use viewScope.put("typeaheadOptions", toJson([array[0], array[1]) ) Thx for your help – user3126813 Jul 08 '14 at 09:02
  • I have solved it: var stringArray = array.toString(); var values= stringArray.split(","); viewScope.put("typtypeaheadOptionseAheadValues", toJson(values)); – user3126813 Jul 08 '14 at 14:08