Script and form in a addon module hook

[cmdr.adama]

Hey all, 

I am seeking some advice / assistance for a problem that I currently have with an add-on module I am building currently. 

What I am attempting to do is have a module that creates a editable table of devices in each Client Profile on the Admin Portal with a form below to add new devices to the table. 

I have tested it in WHMCS and the layout all looks ok and it's pulling data correctly from SQL...

However

1. The JQuery and AJAX scripts that should handle the editable table and the new device creation don't work.

2. the input elements show as they should but there's no form.

 

I'm new to module development in WHMCS so I don't know what I am missing or doing wrong...

Here's a snip of what I have in my hooks.php.. It's not the cleanest and yeah it could do with some work...

<?php
use WHMCS\Database\Capsule;

add_hook(
    'AdminClientProfileTabFields', 1, function ($vars) { 
...
        if (sizeof($devices) > 0 ) {
            foreach ($devices as $device) {
                $devicetable = "<tr id=\"device$i\">
                    <td style=\"display:none;\">$device->id</td>
                    <td>$device->var1</td>
                    <td>$device->var2</td>
                    <td>$device->var3</td>
                    <td>$device->var4</td>
                    <td>$device->var5</td>             
                    <td>$device->var6</td>
                    <td>$device->var7</td>
                    </tr>";
                $i++;
            };
        } else {
            $devicetable ="<tr id=\"device$i\"><td colspan=\"8\">No linked devices found</td></tr>"; 
            $i++;
        } 

        return [
            'Devices' => "
            <script src=\"/lib/jquery.tabledit.js\"></script>
            <script src=\"/lib/add_device.js\"></script>
            <script> //Should probably shift this to a js file
            $('#clientdevices').Tabledit({
                url: '/php/db_conn_update.php',
                columns: {
                    identifier: [0, 'id'],
                    editable: [[1, 'var1'], [2, 'var2'], 
                    [3, 'var3'], [4, 'var4'], [5, 'var5'], 
                    [6, 'var6'], [7, 'var7']]
                },
                onDraw: function() {
                    console.log('onDraw()');
                },
                onSuccess: function(data, textStatus, jqXHR) {
                    console.log('onSuccess(data, textStatus, jqXHR)');
                    console.log(data);
                    console.log(textStatus);
                    console.log(jqXHR);
                },
                onFail: function(jqXHR, textStatus, errorThrown) {
                    console.log('onFail(jqXHR, textStatus, errorThrown)');
                    console.log(jqXHR);
                    console.log(textStatus);
                    console.log(errorThrown);
                },
                onAlways: function() {
                    console.log('onAlways()');
                },
                onAjax: function(action, serialize) {
                    console.log('onAjax(action, serialize)');
                    console.log(action);
                    console.log(serialize);
                }
            });
            </script>
            <form id=\"devices\">
            <table id=\"clientdevices\">
            <thead>
            <tr id=\"deviceheadings\">
            <th>Var 1</th>
            <th>Var 2</th>
            <th>Var 3</th>
            <th>Var 4</th>
            <th>Var 5</th>
            <th>Var 6</th>
            <th>Var 7</th>
            </tr>
            </thead>
            <tbody>
            $devicetable
            <tr id=\"device$i\">
            <td>
            <input type=\"text\" name=\"var1\" placeholder=\"var1\"/>
            </td>
            <td>
            <input type=\"text\" name=\"var2\" placeholder=\"var2\"/>
            </td>
            <td>
            <input type=\"text\" name=\"var3\" placeholder=\"var3\"/>
            </td>
            <td>
            <input type=\"text\" name=\"var4\" placeholder=\"var4\"/>
            </td>
            <td>
            <input type=\"text\" name=\"var5\" placeholder=\"var5\"/>
            </td>
            <td>
            <input type=\"text\" name=\"var6\" placeholder=\"var6\"/>
            </td>
            <td>
            <input type=\"text\" name=\"var7\" placeholder=\"var7\"/>
            <input type=\"hidden\" name=\"client_id\" value=\"$clientid\"/>
            </td>
            </tr>
            </tbody>
            </table>
            <input type=\"submit\" value=\"Add Device\">
            </form>"];
    }
);

I also have a js file called add_device.js 

$(document).ready(function() {
    var i = 1;
    $("#devices").submit(function(e) {
      e.preventDefault(); // avoid to execute the actual submit of the form.
      var $form = $(this);
      var serializedData = $form.serialize();

      $.ajax({
        type: 'post',
        url: '../php/db_conn_add.php',
        data: serializedData,
        success: function () {
        }
      });  
     $('tr').find('input').replaceWith(function(){
        return '<span class='+this.className+'>'+this.value+'</span>'
     });
    });
  });

 

[steven99]

The first thing I noticed is the path to the ajax file is different in both places -- with a "../" in the second set and without that in the first.  Also the first would be relative to the root directory and the second would be relative to the path you're in.  So double check the url to the ajax file. 

[cmdr.adama]

Ah of course... I should probably be referencing relative to the web root directory anyway...

I think I just figured out problem 2 as well... As the profile page already consists of a form, the form I am using with the module is nested and therefore not rendered... Time for plan b.