如何在动态显示的网页中增加生成的值

Question

I have a page that allows the user to add child jobs to the parent job by clicking a button to display a new row in a table (to fill in the details of the child job). One of the fields in that row is a reference number that's generated by a PHP script. The problem is that the reference number is the same in every row.

I tried reading the field value using JavaScript and then stripping out the number and incrementing it and then putting it all back together, but that seemed like overkill. There must be a simpler way of doing this. I also couldn't figure out how to get it to write the new value to the row that's about to be generated.

My boss doesn't want me to write new functions if I can help it, but rather to use existing functions. My thought is to update the getNewJobRef() to pass it the current value so that it automatically gets the next value, but I am not sure how to pass the current value as it's laid out below in the code. I am also not sure how many other places in the code call this function, so I don't want to mess those up.

<button id="add-new-row" style="text-align:center;margin-top:5px;width:85px;" class="boxbutton">Add New</button>

And:

$(document.body).addEvent('click:relay(#add-new-row)', function (e, el) {
                try{
                    e.preventDefault();
                    addChildJobRow();
                }catch(e){
                    ...
                }
            });

And:

function addChildJobRow() {
                try {
                    lastrow++;
                    let cl = (lastrow % 2 ? 'odd' : 'even');
                    showHeaderRow();
                    Elements.from(connectedjobtemplate({
                        rownum: lastrow,
                        cl: cl,
                        nysid: '',
                        dinNum: '',
                        warrantNum: ''
                    })).inject($('linkedJobsBody'));
                } catch (e) {
                    ...
                }
            }

And:

<script id="connectedjobtemplate" type="text/template">
            <tr id="childjobrow<%= rownum %>" class="<%= cl %>" data-row-id="<%= rownum %>">
                <td colspan="7">
                    <table width="100%">
                        <tr>
                            <td style="width: 15%;">
                                <input data-row-id="<%= rownum %>" id="reference[<%= rownum %>]" name="childjobid[<%= rownum %>][reference]" value="<?php echo $this->MJob->getNewJobRef(232); ?>" class="ref" size="14" style="background-color: transparent; border: none;" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </script>

The PHP script is:

function getNewJobRef($jobtypeid) {
    if (empty($jobtypeid)) {
        return '';
    }
    $select = $this->db->query('select * from jobtypecounters where jobtypeid =?', array($jobtypeid));
    $this->db->query('update jobtypecounters set counter = last_insert_id(counter) + 1 where jobtypeid = ?', array($jobtypeid));
    // read from write server to avoid replica lag
    $Q = $this->db->query('select concat(prefix, lpad(last_insert_id(), 5, "0")) as newjobref from jobtypecounters where jobtypeid = ?', array($jobtypeid));
    if ($Q->num_rows() == 1)
        return $Q->row()->newjobref;
    else
        return '';
}

Any help or guidance would be very much appreciated.

EDIT: the page uses MooTools, so I was told that I cannot use jQuery on the same page because they conflict. So how do I pass the variable back to the PHP script without a page refresh/Ajax to get the current reference number to be passed back to the script.

I have updated my code as follows:

function addChildJobRow() {
                try {
                    lastrow++;
                    let cl = (lastrow % 2 ? 'odd' : 'even');
                    showHeaderRow();
                    var refNum = '<?php echo $this->MJob->getNewJobRef(232); ?>';
                    Elements.from(connectedjobtemplate({
                        rownum: lastrow,
                        cl: cl,
                        ref: refNum,
                        nysid: '',
                        dinNum: '',
                        warrantNum: ''
                    })).inject($('linkedJobsBody'));
                } catch (e) {
                    console.log(e);
                    logevent({jobid: jid, event: 'add-new-row', uri: window.location.href, eventdata: e});
                }
            }

And:

<input data-row-id="<%= rownum %>" id="reference[<%= rownum %>]" name="childjobid[<%= rownum %>][reference]" value="<%= ref %>" class="ref" size="14" style="background-color: transparent; border: none;" />

function getNewJobRef($jobtypeid, $refNum = 0) {
//check $refNum
    if (empty($jobtypeid)) {
        return '';
    }
    $select = $this->db->query('select * from jobtypecounters where jobtypeid =?', array($jobtypeid));
    $this->db->query('update jobtypecounters set counter = last_insert_id(counter) + 1 where jobtypeid = ?', array($jobtypeid));
    $Q = $this->db->query('select concat(prefix, lpad(last_insert_id(), 5, "0")) as newjobref from jobtypecounters where jobtypeid = ?', array($jobtypeid));
    if ($Q->num_rows() == 1)
        return $Q->row()->newjobref;
    else
        return '';
}

What I would like to do is call the getNewJobRef function with the second parameter passed being the current reference number, but I have no clue how to do that.

Answer 1

EDIT: This works in theory, but for the database side of things, the function has to be called, so it's back to the drawing board.

I added a check to see if the refNum had been defined yet. If not, it called the PHP script and set the value; if yes, it split out the text part, converted to integer and incremented the number and then put it all back together.

\n

This is my code:

if (typeof refNum === 'undefined') {
   refNum = '<?php echo $this->MJob->getNewJobRef(232); ?>';
} else {
   var num = refNum.replace('ABC', '').toInt();
   num += 1;
   refNum = 'ABC' + num;
}