Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Next revisionBoth sides next revision
protogrid:script_library [2017-12-15 09:47] – 46.140.51.3protogrid:script_library [2021-01-22 14:50] – [Execute JS on field change] dru
Line 6: Line 6:
  
 Server-ScriptLibraries contain code happening at the server before sending the data to the client. Every [[protogrid:proto|Proto]] can have a server side library attached. Whenever something is done with a [[protogrid:card|Card]] of this Proto on the server, the Server takes the assigned library into account. The server side libraries contain mainly the following functions: on_render, on_save, get_shortname, get_title.  Server-ScriptLibraries contain code happening at the server before sending the data to the client. Every [[protogrid:proto|Proto]] can have a server side library attached. Whenever something is done with a [[protogrid:card|Card]] of this Proto on the server, the Server takes the assigned library into account. The server side libraries contain mainly the following functions: on_render, on_save, get_shortname, get_title. 
-== on_render ==+==== on_render ====
 on_render gets called when opening a new Card. This function can be used for example to [[protogrid:hide_field| hide fields]] of the Card. Inside the on_render function, one has access to the card which is opening as well as to a predicate called "before_first_save" telling you whether the Card was already saved before or not (if not, it is a newly created Card).  on_render gets called when opening a new Card. This function can be used for example to [[protogrid:hide_field| hide fields]] of the Card. Inside the on_render function, one has access to the card which is opening as well as to a predicate called "before_first_save" telling you whether the Card was already saved before or not (if not, it is a newly created Card). 
 <code javascript> <code javascript>
Line 39: Line 39:
 </code> </code>
  
-===== 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:trigger|triggered]] by a client action, especially the code that should be executed at [[protogrid:button|button]] clicks. The client-side script library contains all the code happening locally on the clients machine. This contains all the code executed when [[protogrid:trigger|triggered]] by a client action, especially the code that should be executed at [[protogrid:button|button]] clicks.
  
Line 51: Line 51:
 on_load(); on_load();
 function on_load() { function on_load() {
-    //do something useful+    alert("Hello World!"); 
 +    //do something more useful
 } }
 </code> </code>
Line 78: Line 79:
  
 The function document_ready_trigger tells your card that you want something to happen when a value changes. The call "$(document).ready(...)" itself calls the function "document_ready_trigger" as soon as the card is fully loaded. The function document_ready_trigger tells your card that you want something to happen when a value changes. The call "$(document).ready(...)" itself calls the function "document_ready_trigger" as soon as the card is fully loaded.
 +
 +==== Manipulate Contet of Rich Text Field ====
 +
 +<code javascript>
 +var rich_text_editor = $("#"+rich_text_field_id)[0].editor;                           // Get object of Rich Text Editor
 +
 +var content = rich_text_editor.getDocument().toString();                              // Get complete content as string
 +rich_text_editor.setSelectedRange([0, 0]);                                            // Set cursor to position 0
 +rich_text_editor.setSelectedRange([0, 10]);                                           // Set text selection from position 0 to position 10
 +var current_range = rich_text_editor.getSelectedRange();                              // Get cursor posistion / selected text range
 +rich_text_editor.insertString("Hello!")                                               // Insert String at selected position
 +rich_text_editor.insertHTML("<strong>Hello World!</strong>");                         // Insert HTML at selected position
 +rich_text_editor.insertLineBreak();                                                   // Insert line break
 +rich_text_editor.deleteInDirection("forward");                                        // Delete selected range
 +rich_text_editor.activateAttribute("bold")                                            // Activate attribute at selected range
 +rich_text_editor.deactivateAttribute("strike")                                        // Deactivate attribute at selected range
 +</code>
 +
 +Please see https://github.com/basecamp/trix for details.

Trace:

Print/export