Q:

How do I call a PHP function in a separate file using Ajax but no jQuery?

I have a page where the user can create child jobs in the parent job by clicking an Add New button and causing a new row to appear which they then fill in and save. The row has an autogenerated reference number, which is obtained by calling a PHP script in another file.
The problem is that each new row has the same reference number, so I need a way to make sure that number is unique. My thought was to send in a second parameter to the function of the current reference number to see if it's the same as the current number and, if so, generate a different number. My thought was to use Ajax.
I tried Ajax, but it is not displaying anything in the console (to test that it's working). The page uses MooTools, so I can't use jQuery.  This is my first attempt at Ajax.
This is part of the template:
<script id="connectedjobtemplate" type="text/template">
    <tr id="childjobrow3" class="odd" data-row-id="3">
        <td>
            <input data-row-id="3" id="reference[3]" name="childjobid[3][reference]" value="<%= ref %>" class="ref" size="14" style="background-color: transparent; border: none;" />
        </td>
    </tr>
</script>

This checks for a click on the Add New button and calls the function to add a new row:
$(document.body).addEvent('click:relay(#add-new-row)', function (e, el) {
                try{
                    e.preventDefault();
                    addChildJobRow();
                }catch(e){
                    .
                }
            });

This is the addChildJobRow function:
function addChildJobRow() {
                try {
                    lastrow++;
                    var refNum;
                    var xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                            console.log(this.responseText);
                            refNum = this.responseText;
                        }
                    };
                    xhr.open('GET', '<?php echo $this->MJob->getNewJobRef(232); ?>', true);
                    xhr.onload = function() {
                        console.log('Test');
                    };
                    xhr.send();
                    //refNum = '<?php echo $this->MJob->getNewJobRef(232); ?>';
                    Elements.from(connectedjobtemplate({
                        rownum: lastrow,
                        cl: cl,
                        ref: refNum,
                        nysid: '',
                        dinNum: '',
                        warrantNum: ''
                    })).inject($('newChildJobTable'));
                } catch (e) {
                    .
                }
            }

Nothing appears in the console. I am thinking that the problem might be the PHP being sent in as the url in the xhr.open line, but don't know enough Ajax to know if that's the problem or not.
Thanks in advance for any help.

A:

After speaking to my boss, he wants me to not use Ajax and call the PHP function, just read the number of the parent job and increment each of the child jobs by 1 using JavaScript.
Thank you to those who responded.

