Question

i’ve got a problem i don’t know how do solve it.
On my web page i load a table dynamically (and only the user want to) from an other apex application with:

function getParameter (filter){
  var url;
  var html;
  filter = filter.replace(/ /g,'%20')
  url = 'http://xxx.xxx.xxx.xxxx:8080/apex/f?p=PAR_PARAMETER:1:'+APP_SESSION+
    ':IR_REPORT_Query_Parameter::RIR,CIR:IR_P_SYS.SZGETTEXT(T.EZS_NO):'+filter;
 html = $('#ParameterSettings').load(url +' .apexir_WORKSHEET_DATA');

}

this works fine.

My problem now is that the user can choose between: I want to edit the values, in this case the value col (display only) will be replaced with:

'<input type="text" value="|HTML|" size="30" maxlength="4000" class="P3_PARAMETER_VALUES">'

This also works fine, but how can i get the values that the user can now enter into the input field?

The table bevor it is editable:

<div id="P3_PARAMETERSETTING">
<table>
 <thead></thead>
 <tbody>
   <tr>
   <tr class="even">
    <td headers="LINK">
    <td align="left" headers="P_SYS.SZGETTEXT(T.EZS_NO)">(Dist) Driving time</td>
    <td align="left" headers="NAME">REQ.data.source.trip</td>
    <td align="left" headers="Value">tadaaa</td>
    <td align="left" headers="Default">0</td>
    <td align="left" headers="P_SYS.SZGETTEXT(D.EZS_NO)">Data source for trips to use         in the query: 0 = all, 1 = online recorded data, 2 = vehicle recorded data</td>
    <td align="left" headers="Max">2</td>
    <td align="left" headers="Min">0</td>
   </tr>
 </tbody>
</table>
</div>

after switch to editable:

<div id="P3_PARAMETERSETTING">
<table>
 <thead></thead>
 <tbody>
  <tr class="odd">
   <td headers="LINK">
   <td align="left" headers="P_SYS.SZGETTEXT(T.EZS_NO)">(Dist) Driving time</td>
   <td align="left" headers="NAME">REQ.grid.value.size</td>
   <td align="left" headers="Value">
    <input class="P3_PARAMETER_VALUES" type="text" maxlength="4000" size="30" value="tadaaa">
   </td>
   <td align="left" headers="Default">60</td>
   <td align="left" headers="P_SYS.SZGETTEXT(D.EZS_NO)">Default data query value grid size</td>
   <td align="left" headers="Max">43200</td>
   <td align="left" headers="Min">10</td>
  </tr>
 </tbody>
</table>
</div>

thanks
mario

if any one need more code just leave a comment.

Answer 1

If you’re able to alter the HTML, then the simplest answer would be to ensure you add a unique id to each new input element.

<input id="VALUE_1" class="P3_PARAMETER_VALUES" type="text" maxlength="4000" size="30" value="tadaaa">

Then you can access with normal JavaScript

var value1 = document.getElementById('VALUE_1').value;

You could make this sort of selection more powerful by using a JavaScript library like jQuery:

http://jquery.com/

You may also want to look into contenteditable:

https://developer.mozilla.org/en-US/docs/HTML/Content_Editable