livewire action not happening when link is clicked - php

Question

So I have popup which contains a form that shows a table with editable cells using livewire and each row has a delete button, above this table is a button to add a new empty row to the table. Editing in the cells is working (click the cell and it changes to the inline edit input) but clicking the delete link does nothing and neither does the add link.
So for this process I have the following in the client index file which loads the popup modal when the button to edit the client is clicked.
For this question I am looking at why the add isn't working but as for the delete that would be a bonus!
<script>
$(document).ready(function() {
$("#clients tbody").on("click", ".actions", function () {
var data = table.row( $(this).parents('tr') ).data();
// now call ajax on this url
call_ajax( "/client/" + data[0] + "/edit" );
loader.style.display = "block";
modal.style.display = "block";
});
});
function call_ajax( url ) {
// ToDo make an actual ajax call to get the form data
$.get( url )
.done(
function( data ) {
$("#content-region").html( data );
}
)
.fail(
function() {
$("#content-region").html( "<p>error</p>" );
}
);
}
</script>
So using this when a client has its action section clicked then a call to client/{x}/edit is called which is calls my edit.blade.php file:
#extends('layouts.popup')
#section('header')
<i class="fa fa-fw fa-pencil-square-o fa-lg text-success"></i> Edit Client
#stop
#section('content')
<div class="client-editor">
<form class="admin-link" method="post" action="client/save">
#csrf
<input type="hidden" name="id" value="{{ old( 'id', $client->id ) }}">
<div class="max-w-10xl mx-auto py-10 sm:px-6 lg:px-8">
<div class="md:grid md:grid-cols-3 md:gap-6">
<div class="md:col-span-1 flex justify-between">
<div class="px-4 sm:px-0">
<h3 class="text-lg font-medium text-gray-900">Client Edit</h3>
<p class="mt-1 text-sm text-gray-600">
Update the Client title, you can add and remove contacts below.
</p>
</div>
<div class="px-4 sm:px-0">
</div>
</div>
<div class="mt-5 md:mt-0 md:col-span-2">
<div class="px-4 py-5 bg-white sm:p-6 shadow sm:rounded-tl-md sm:rounded-tr-md">
<!-- Eclipse Account Handler -->
<div class="col-span-6 sm:col-span-4">
<label class="block font-medium text-sm text-gray-700" for="client_id">
Client Title
</label>
<input
class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block w-full"
id="title"
name="title"
type="text"
value="{{ $client->title }}"
>
</div>
<br>
<div class="col-span-6 sm:col-span-4">
<x-toggle
left="No"
right="Yes"
name="is_enabled"
label="Is this client active?"
colourleft="#805050"
colourright="#508050"
default="{{ $client->is_enabled }}"
/>
</div>
</div>
<div class="hidden sm:block">
<div class="py-8">
<div class="border-t border-gray-200"></div>
</div>
</div>
</div>
</div>
</div>
<!-- client contacts -->
<div class="max-w-10xl mx-auto py-10 sm:px-6 lg:px-8">
<div class="md:grid md:grid-cols-3 md:gap-6">
<div class="md:col-span-1 flex justify-between">
<div class="px-4 sm:px-0">
<h3 class="text-lg font-medium text-gray-900">Client Contacts</h3>
<p class="mt-1 text-sm text-gray-600">
Enter details for client contacts assigned to this client.
</p>
</div>
</div>
<div class="mt-5 md:mt-0 md:col-span-2">
<div class="px-4 py-5 bg-white sm:p-6 shadow sm:rounded-tl-md sm:rounded-tr-md">
#livewire("contacts-table", [ 'client' => $client ])
</div>
<div
class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
<button
type="submit"
class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition"
>
Save
</button>
</div>
<div class="hidden sm:block">
<div class="py-8">
<div class="border-t border-gray-200"></div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
#stop
and from in this a call of #livewire("contacts-table", [ 'client' => $client ]) and this are it's parts.
ContactsTable.php
<?php
namespace App\Http\Livewire;
use App\Models\Client;
use App\Models\ClientContact;
use Livewire\Component;
class ContactsTable extends Component
{
protected $listeners =['refresh' => '$refresh'];
public Client $client;
public $clientContacts;
public function mount( Client $client )
{
$this->clientContacts = ClientContact::where( 'client_id', $client->id )->get();
}
public function render()
{
return view('livewire.contacts-table');
}
public function addNewContact()
{
die('Test that we got here!'); // I actually have a breakpoint here.
}
}
and contacts-table.blade.php:
<div class="col-span-6 sm:col-span-4">
<a
class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-100 dark:text-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition"
wire:click="addNewContact"
>
{{ __('Add') }}
</a>
<table id="contacts" class="table table-striped table-bordered table-hover">
<thead>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
<td>Action</td>
</thead>
<tbody>
#foreach( $clientContacts as $contact )
<tr id="{{ $contact->id }}">
<td>
#livewire( 'inline-edit', ['item' => $contact, 'type' => 'title', 'number' => $client->id] )
</td>
<td>
#livewire( 'inline-edit', ['item' => $contact, 'type' => 'email', 'number' => $client->id] )
</td>
<td>
#livewire( 'inline-edit', ['item' => $contact, 'type' => 'phone_number', 'number' => $client->id] )
</td>
<td class="width-8">
<a
class="cursor-pointer"
wire:click="$emit( 'openModal', 'delete-contact',{{ json_encode(['contact_id' => $contact->id]) }} )"
>
<i class="fas fa-trash"></i>
</a>
</td>
</tr>
#endforeach
</tbody>
</table>
<p class="mt-1 text-sm text-gray-600">
Edit the cells above, click the bin to delete or the + to add a new row to populate with a new contact.
</p>
</div>
for completeness here is the popup layout blade file:
<!-- Page Heading-->
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
#yield('header')
</h2>
</div>
</header>
<!-- Page Content -->
<main>
#if (Session::has('message'))
<!-- will be used to show any messages -->
<div class="alert alert-info">{{ Session::get('message') }}</div>
#endif
<div class="py-12">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
#yield('content')
</div>
</div>
</main>
<!-- End Popup -->
Just to reiterate, the popup form is loading and the content in it is rendered correctly. The top part of the form works so the client is updated.
The inline edit livewire is working (well kind of as I've yet to implement the actual save of it's data but that isn't my issue.
The add button does nothing and nothing is shown in my dev toolbar (no network activity and nothing in the console tab) this is also the case with the delete buttons (which i have working elsewhere in the app - it should show a confirm box and if yes it then removes the contact.
thanks
*** EDIT ***
As an afterthought I have tried this with the client table commented ( the entire table in contacts-table.blade.php) so it just has the add link but it still doesn't work.
*** MORE INFO ***
I have tried removing from the popup and it works this way. Not what I wanted but It does work this way. Why would it not work in a popup?