Generic Javascript View - how to use jquery plugin

KNIME Analytics Platform
#1

Hi community,

can anyone give me a short example how to use a jquery plugin in the generic javascript view node.
I want to use a multi-select dropdown list with checkboxes.

Also i want to use the source files from a local path.

Thanks and BR.

1 Like
Javascript Bootstrap not working
#2

Hi,
You have to download the code for the plugin and then paste it into the code of the Generic JavaScript view at the top. Then you also have to paste the CSS of the plugin into the styles editor on the left side.
Please have a look at the attached workflow.
Kind regards,
Alexander

jquery plugins.knwf (10.0 KB)

2 Likes
#3

Hi @AlexanderFillbrunn

is there a way to include the pulgin.js and plugin.css files without paste the code into the node?

Thx

#4

Hi,
Yes, you could also read in those files or get them from the web using the GET Request node ands then pass in the code via flow variable. Those can be used in the code by inserting a placeholder such as $${Scode}$$.
Kind regards,
Alexander

#5

Hi,

thanks cool idea.
Can you also have a look at this topic?

I can’t get bootstrap to work with all features.

Thx.

#6

Hi @AlexanderFillbrunn

I’m sorry. I need your help a second time.
I don’t get this example to run.
Can you help me again please.

https://demo.semicolonworld.com/multiselect-dropdown-with-checkbox-using-jquery/

#7

Hi,
this works the same way as the previous plugin. Please have a look at the attached workflow.
Kind regards,
Alexander

jquery plugins.knwf (10.9 KB)

#8

@AlexanderFillbrunn

Thx.

#9

@AlexanderFillbrunn

One last question. If i pass the code via flow variable $${Scode}$$ not all callbacks are working. For example the select all option. Do you have an idea why?

Thank you so much!

#10

Hi,
and when you paste the code directly it works? Can you post your workflow where the callbacks are not working?
Kind regards,
Alexander

#11

Hi @AlexanderFillbrunn

yes it works when i paste the code directly.

Here is the workflow with the two options.

jquery_multiselect_plugin.knwf (70.9 KB)

#12

Hi,
The Problem are the quotes in the code. They are removed by the File Reader. To change that, either use the Line Reader or turn off quotes by clicking on the “Advanced” button and under “Quote support” remove all quote characters from the right side. Additionally, the workflow can be made much smaller by utilizing the knime:// protocol. You can use the following URL in your File Reader or Line Reader:

knime://knime.workflow/_js_sources/multiselect_dropdown_with_checkbox_using_jquery/jquery.multiselect.js

Kind regards,
Alexander

1 Like
#13

@AlexanderFillbrunn

thank you so much Alex.

Do you also know why Javascript Bootstrap not working is not working well? I saw the package is already included by knime. However i don’t get it to work.

#14

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.