Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
protogrid:script_library [2020-04-18 14:05] – [Execute JS on card load] dru | protogrid:script_library [2021-12-21 23:21] – [Client ScriptLibrary] dru | ||
---|---|---|---|
Line 3: | Line 3: | ||
Protogrid can be extended arbitrarily using [[https:// | Protogrid can be extended arbitrarily using [[https:// | ||
- | ===== Server-ScriptLibrary ===== | + | ===== Server ScriptLibrary ===== |
- | Server-ScriptLibraries contain code happening at the server before sending the data to the client. Every [[protogrid: | + | Server ScriptLibraries contain code happening at the server before sending the data to the client. Every [[protogrid: |
==== on_render ==== | ==== on_render ==== | ||
on_render gets called when opening a new Card. This function can be used for example to [[protogrid: | on_render gets called when opening a new Card. This function can be used for example to [[protogrid: | ||
Line 39: | Line 39: | ||
</ | </ | ||
- | ===== Client-ScriptLibrary ===== | + | ===== Client ScriptLibrary ===== |
The client-side script library contains all the code happening locally on the clients machine. This contains all the code executed when [[protogrid: | The client-side script library contains all the code happening locally on the clients machine. This contains all the code executed when [[protogrid: | ||
+ | |||
+ | Please note that all your code should reside within a enclosing function in order to limit its scope and avoid naming conflicts. Protogrid supports you in this by automatically providing such an enclosing function in the default Client ScriptLibrary and dynamically replacing the identifier of this enclosing function with the name of the Client ScriptLibrary before loading it into the browser. However, you are free to set your own static unique identifier for this function. | ||
==== Execute JS on card load ==== | ==== Execute JS on card load ==== | ||
Line 46: | Line 48: | ||
To execute some JavaScript code at the time, a card is loaded, there are two options. | To execute some JavaScript code at the time, a card is loaded, there are two options. | ||
- | If you want to execute this code only for one proto, you add the code inside a Client-ScriptLibrary and make sure you have a Trigger on the Proto which is linked with this ScriptLibrary. This will make the browser to load all code when the cards are loaded and the browser will execute all code on loading of the ScriptLibrary, | + | If you want to execute this code only for one proto, you add the code inside a Client ScriptLibrary and make sure you have a Trigger on the Proto which is linked with this ScriptLibrary. This will make the browser to load all code when the cards are loaded and the browser will execute all code on loading of the ScriptLibrary, |
<code javascript> | <code javascript> | ||
Line 79: | Line 81: | ||
The function document_ready_trigger tells your card that you want something to happen when a value changes. The call " | The function document_ready_trigger tells your card that you want something to happen when a value changes. The call " | ||
+ | |||
+ | ==== Manipulate Contet of Rich Text Field ==== | ||
+ | |||
+ | <code javascript> | ||
+ | var rich_text_editor = $("#" | ||
+ | |||
+ | var content = rich_text_editor.getDocument().toString(); | ||
+ | var current_range = rich_text_editor.getSelectedRange(); | ||
+ | |||
+ | rich_text_editor.setSelectedRange([0, | ||
+ | rich_text_editor.setSelectedRange([0, | ||
+ | rich_text_editor.insertString(" | ||
+ | rich_text_editor.insertHTML("< | ||
+ | rich_text_editor.insertLineBreak(); | ||
+ | rich_text_editor.deleteInDirection(" | ||
+ | rich_text_editor.activateAttribute(" | ||
+ | rich_text_editor.deactivateAttribute(" | ||
+ | </ | ||
+ | |||
+ | Please see https:// |