Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Tie in A .JS file to work along with Intraweb?
#1
Greetings!
Using Tokyo 10.2.3
IW 14.2.7

I found a nice JS project to do auto complete / dropdown combo box setup.

Demo @ https://leaverou.github.io/awesomplete/

Can download ZIP file with everything.

I have fiddled with this in a few ways but I just can't seem to get the JS too hook with the TIWEdit control?

I've added these to the extraheaders

Code:
     <link rel="stylesheet" href="awesomplete.css" />
     <script src="awesomplete.js"></script>



Which seem to work, as if i look at the source of the page and click them, they load, so feel they are loading properly in the browser then.

I tried to do the "Combobox Dropdown" example at the bottom of the above page to hook to my IWEdit control but not been able to.

I modified their javascript to be included under the "JavaScript" property of the form.

I modified the names of the controls to look for.. IWEDIT1 , IWEDIT1CSS, ect.. but not exactly working.


I haven't had to use IW much in past few years, as product we have, has worked very well but now to finally add some
new features, and they want an autocomplete dropdown that works similar to this.  So figured hey, why not try and get this
guy to work.

Any tips would help alot!
Reply
#2
Hi. This JS can run on IW very well. Your extraheaders is ok. In your IWEdit1, go to css property and type:

Code:
css := 'awesomplete';

Now go to ExtraTagParams and add your data-list.
Code:
data-list=Ada, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails
You are done.
   
Reply
#3
[Image: 8d7ed8c1697119a849adc49a43fb3369.png]

Hmm sorta works... but the autocomplete drop down pops up in the top right corner of the page.

I assume it doesn't like the extra tags IW puts in there for rendering?

Then for trying to do the "combobox dropdown" I couldn't figure this one out.. as its a DIV tag class of "awesomplete" with what would be the 
iwedit with a class name of "dropdown-input" 

And putting the javascript on the form javascript property to get that side of stuff created and loaded.


Code:
<div class="awesomplete">
   <input autocomplete="off" class="dropdown-list" data-list="Ada, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails" id="IWAUTO" maxlength="2147483647" name="IWAUTO" style="position: absolute; left: 48px; top: 72px;z-index: 100; width: 383px; height: 19px; font-weight: normal; font-style: normal; font-size: 13px; text-decoration: none;text-align: left; border: 1px inset;" tabindex="1" type="TEXT" aria-expanded="false" aria-owns="awesomplete_list_1" role="combobox">
   <ul role="listbox" id="awesomplete_list_1" hidden="">
      <li role="option" aria-selected="false" id="awesomplete_list_1_item_0"><mark>Ruby</mark> on Rails</li>
   </ul>
   <span class="visually-hidden" role="status" aria-live="assertive" aria-atomic="true" hidden="">1 results found</span>
</div>
I would need something like this I guess?

When I set the CSS property to "awesomeplete" it sets the DIV tag to it.. but also the class to it also.
Reply
#4
Can you please provide a simple test case showing this issue?
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)