JEditor and JavaScript

[Mesgina Wolday]

Hi,

is it possible to use javascript in JEditor?

I want to add colums and rows in a table which is in a form.

This is the code from JEditor:

<script "text/javascript">
function displayResult()
{
var tbody= document.getElementById("table1").getElementsByTagName("tbody")[0];
var row= document.createElement("TR");

var cell1=document.createElement("TD");
var cell2=document.createElement("TD");
var cell3=document.createElement("TD");
var cell4=document.createElement("TD");
var cell5=document.createElement("TD");
var cell6=document.createElement("TD");
var cell7=document.createElement("TD");
var cell8=document.createElement("TD");

cell1.innerHTML="New";
cell2.innerHTML="New";
cell3.innerHTML="New";
cell4.innerHTML="New";
cell5.innerHTML="New";
cell6.innerHTML="New";
cell7.innerHTML="New";
cell8.innerHTML="New";

row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
row.appendChild(cell5);
row.appendChild(cell6);
row.appendChild(cell7);
row.appendChild(cell5);

tbody.appendChild(row);

}
</script>
<form id="form1" runat="server">
<div>&nbsp;</div>
<h1 align="center">
Please enter/configure your custom fields</h1>
<table align="center" border="1px" cellpadding="5%" cellspacing="5px" id="table1">
<tbody>
<tr id="rowId">
<td align="top" class="style1">Field Lable</td>
<td align="top" class="style1">Field Type</td>

<td align="top" class="style1">Options<br />
only nessecary for<br />
- Singel-Select-field<br />
- Multiselect-field<br />
- Checkboxfield<br />
- Radiofield</td>

<td align="top" class="style1">Help-Me Text<br />
(for edit and create mode)</td>
<td align="top" class="style1">Mandatory</td>
<td align="top" class="style1">Create Mode</td>
<td align="top" class="style1">View Mode</td>
<td align="top" class="style1"> Edit Mode</td>
</tr>
<tr>
<td><input name="Field Lable" type="text" /></td>
<td>
<select>
<option value="TextField">TextField</option>
<option value="TextArea">Text Area</option>
<option value="SelectList">Select list</option>
<option value="Radiobutton">Radiobutton</option>
</select></td>
<td><input name="Field Type" type="text" /></td>
<td><input name="options" type="text" /></td>
<td><input name="Help-me Text" type="text" /></td>
<td><input name="Mandatory" type="text" /></td>
<td> <input name="Create" type="text" /></td>
<td><input name="view" type="text" /></td>
<td><input name="edit" type="text" /></td>
</tr>
</tbody>
</table>
<button onclick="displayResult" type="button">Insert new row</button>
<p>&nbsp;</p>
</form>
<p>
&nbsp;</p>
Thanks in advance!

Mesgina

[Kirill Bobrovskikh · Accepted solution]

Hi Mesgina,

Thank you for your interest in JEditor.

If you need to add rows to a table, populate and edit the values and save the changes after editing then you need a different approach.

The script shouldn't be inside JEditor document. Some modifications are required: new cells should be editable and there probably should be a way to save the table when editing is completed.

Please contact our support via the helpdesk or send an email directly to support@jiraeditor.com. We will be happy to help you with the script.

[Kirill Bobrovskikh]

Hi Mesgina,

We have finished adding new feature: custom javascript. It is now possible to add global javascript from JEditor Configuration.

Here's a download link to the latest build: http://jiraeditor.com/builds/jeditor-1.5.44.6.jar.

This build also supports highlighting of custom JS and CSS in JEditor Configuration. You need to clear the cache to see the changes.

I'm attaching the samples of the dynamic form and script for you (please find them below).

This form can add new rows and delete existing rows.

When a user submits the form all data are passed to server. When a user loads a page with the form, server populates the table with stored data (including changed to mark up).

Important: if you decide to add several tables please make sure to use unique ids for form elements. JEditor generates unique Ids when you add a form using the toolbal, however when you copy/paste the form the Id has to be changed manually. This is required because server identifies forms by ids.

To install script go to JEditor Configuration > Custom Javascript, paste the script and click Save. You need JEditor 1.5.44.6 or higher for that.

I hope that helps. Please feel free to contact us if you have any questions.

Sample form:

<form action="#JEditorDefaultFormProcessor" class="jeditorForm dynamic" id="NEWFORM_4354f234234f34" method="post" name="TestForm">

<h2 style="text-align: center;">

Please enter/configure your custom fields</h2>

<div>

<table id="formContainer_1" border="1" cellpadding="1" cellspacing="1" style="width: 95%; border-collapse: collapse; ">

<tbody>

<tr>

<td style="text-align: center;">

Field Label</td>

<td style="text-align: center;">

Field Type</td>

<td>

<p style="text-align: center;margin-bottom: 5px;">

Options&nbsp;only nessecary for</p>

<ul style="margin: 5px 0;">

<li style="text-align: center;">

Single-select field</li>

<li style="text-align: center;">

Multi-select field</li>

<li style="text-align: center;">

Checkbox field</li>

<li style="text-align: center;">

Radio field</li>

</ul>

</td>

<td style="text-align: center;">

Helpme Text<br />

(for edit and&nbsp;create mode)</td>

<td style="text-align: center;">

Mandatory</td>

<td style="text-align: center;">

Create<br />

Mode</td>

<td style="text-align: center;">

View&nbsp;<br />

Mode</td>

<td style="text-align: center;">

Edit<br />

Mode</td>

<td style="text-align: center;">

&nbsp;</td>

</tr>

<tr>

<td style="text-align: center;">

<input id="TEST-1_1377698520864" name="fieldlabel" type="text" /></td>

<td style="text-align: center;">

<select id="TEST-1_1377698601944" name="fieldtype" size="1"><option value="textfield">Text Field</option><option value="textarea">Text Area</option><option value="selectlist">Select List</option><option value="radiobutton">Radio Button</option></select></td>

<td style="text-align: center;">

<textarea id="TEST-1_1377698636297" name="options" style="margin-left: 2px; margin-right: 2px; width: 201px;"></textarea></td>

<td style="text-align: center;">

<input id="TEST-1_1377698659311" name="helpmetext" type="text" /></td>

<td style="text-align: center;">

<input id="TEST-1_1377698674305" name="mandatory" type="checkbox" value="mandatory" /></td>

<td style="text-align: center;">

<input id="TEST-1_1377698682775" name="createmode" type="checkbox" value="createmode" /></td>

<td style="text-align: center;">

<input id="TEST-1_1377698691215" name="viewmode" type="checkbox" value="viewmode" /></td>

<td style="text-align: center;">

<input id="TEST-1_1377698700671" name="editmode" type="checkbox" value="editmode" /></td>

<td style="text-align: center;">

<input id="TEST-1_1377698805423" name="deleterow" onclick="delfirstrow()" type="button" value="Delete" /></td>

</tr>

</tbody>

</table>

</div>

<div style="width: 95%;height: 40px;">

<br />

<input name="newrow" onclick="addrow()" style="float: left;" type="button" value="Add row" />

<input name="submit" style="float: right;" type="submit" value="Submit form" /></div>

</form>

<p>

&nbsp;</p>

Sample script:

addrow = function()

{

// AJS is Atlassian's wrapper for jQuery

// activate event that detects clicks on New Row button and adds new row to the table

// find table by id

var table = AJS.$('#formContainer_1');

// create new TR element - new row for the table

var newRow = AJS.$('<tr><td style="text-align: center;"><input name="fieldlabel" type="text" /></td><td style="text-align: center;"><select name="fieldtype" size="1"><option value="textfield">Text Field</option><option value="textarea">Text Area</option><option value="selectlist">Select List</option><option value="radiobutton">Radio Button</option></select></td><td style="text-align: center;"><textarea name="options" style="margin-left: 2px; margin-right: 2px; width: 201px;"></textarea></td><td style="text-align: center;"><input name="helpmetext" type="text" /></td><td style="text-align: center;"><input name="mandatory" type="checkbox" value="mandatory" /></td><td style="text-align: center;"><input name="createmode" type="checkbox" value="createmode" /></td><td style="text-align: center;"><input name="viewmode" type="checkbox" value="viewmode" /></td><td style="text-align: center;"><input name="editmode" type="checkbox" value="editmode" /></td><td style="text-align: center;"><input name="deleterow" type="button" value="Delete" /></td></tr>');

// each form input must have unique ID attribute - lets find them all and add IDs

newRow.find('input,select,textarea').each(function() {

AJS.$(this).attr('id',AJS.Meta.get('issue-key')+'_'+Math.floor(Math.random()*1000000000));

});

// append new row to the table

table.append(newRow);

// add Delete Row event listener

AJS.$('input[name="deleterow"]').click(function()

{

AJS.$(this).closest('tr').remove();

});

}

delfirstrow = function()

{

// find and delete first row when first Delete button is clicked

var firstRow = AJS.$('#formContainer_1').find('tr')[1];

AJS.$(firstRow).remove();

}

AJS.$('input[data-cke-pa-onclick]').each(function()

{

// workaround for onclick in the description field

AJS.$(this).attr('onclick',AJS.$(this).attr('data-cke-pa-onclick'));

});