0

I am very new to MooTools and fairly new to JavaScript.

I have created a template that displays a row on the click on a button. Each time the button is clicked, another row appears.

One of the fields in the template is a reference number that is generated by calling an existing PHP script. The problem is that I keep getting the same number in every row. I want to have a way to check the value of the field and increment the same field in the following row by 1, but I don't know how to do that.

I tried using MooTools to do something on load, but that didn't work.

Here is the template. The <?php echo $this->MJob->getNewJobRef(232); ?> is what gets the autogenerated reference number.

        <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 class="childjobid" type="hidden" id="childjobid<%= rownum %>" name="childjobid[<%= rownum %>][transcribername]" value="0" />
                                <input type="hidden" id="transcriberid[<%= rownum %>]" name="childjobid[<%= rownum %>][transcriberid]" value="" />
                                <input data-row-id="<%= rownum %>" id="assignee[<%= rownum %>]" name="childjobid[<%= rownum %>][transcribername]" class="" list="transcribers" autocomplete="off" value="" placeholder="Name" size="14" />
                            </td>
                            <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>
                            <td style="width: 5%;">
                                <input data-row-id="<%= rownum %>" id="pages[<%= rownum %>]" name="childjobid[<%= rownum %>][pages]" value="" class="" style="" size="2"/>
                            </td>
                            <td style="width: 15%;">
                                <input data-row-id="<%= rownum %>" id="orderDate[<%= rownum %>]" name="childjobid[<%= rownum %>][orderDate]" value="" class="" size="12" />
                            </td>
                            <td style="width: 15%;">
                                <input data-row-id="<%= rownum %>" id="nysid[<%= rownum %>]" name="childjobid[<%= rownum %>][nysid]" value="<%= nysid %>" class="" size="12" />
                            </td>
                            <td style="width: 15%;">
                                <input data-row-id="<%= rownum %>" id="dinNum[<%= rownum %>]" name="childjobid[<%= rownum %>][dinNum]" value="" class="" size="12" />
                            </td>
                            <td style="width: 15%;">
                                <input data-row-id="<%= rownum %>" id="warrantNum[<%= rownum %>]" name="childjobid[<%= rownum %>][warrantNum]" value="" class="" size="12" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </script>

I tried adding this, but it didn't work:

$('#ref').addEvent('load', function(e, el) {
                alert('Here');
            });

I guess I am confused about how to check if that field is loaded, unless there is something wrong in my syntax. I also tried replacing '#ref' with document.body, but it still doesn't work. Should I rather be using code in the template itself to check this?

PortyR
  • 355
  • 1
  • 2
  • 12
  • This is because... that's not how it works :) 1. PHP code is executed on the server, which results in an HTML page. PHP disappears entirely, all you get is the _result_ of PHP's execution. 2. Then, the HTML page is sent to the browser, where it is displayed, and JS code executed. Javascript has no idea of PHP's presence and can't "call" it. These two process happen on two different machines, at two different, separate times. – Jeremy Thille Apr 01 '19 at 10:57
  • Possible duplicate of [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) – Jeremy Thille Apr 01 '19 at 10:58
  • Understood. Do you have any idea how I can accomplish this then? – PortyR Apr 01 '19 at 10:59
  • Well, yes, with Javascript, of course. It's the only available language in a browser :) Use Math.random() to assign an ID to the new row. However, I have no idea how to do it with MooTools specifically, because, well, this is an _old_ library, like pre-jQuery old, so, I have never used it – Jeremy Thille Apr 01 '19 at 11:01
  • @JeremyThille, thank you. I know that MooTools is old and so does my boss, but that's what I have to work with now to do the task (until we convert the page to jQuery). – PortyR Apr 01 '19 at 11:06

0 Answers0