Bug: debug bar in development mode conflicts with HTMX

rcorsari commented 1 year ago

PHP Version

8.2

CodeIgniter4 Version

4.3.3

CodeIgniter4 Installation Method

Composer (using codeigniter4/appstarter)

Which operating systems have you tested for this bug?

Linux

Which server did you use?

apache

Database

mysql Ver 15.1 Distrib 10.11.2-MariaDB, for Win64 (AMD64)

What happened?

I have shared the details on the forum https://forum.codeigniter.com/showthread.php?tid=87812

the code is really basic since at this level is a proof of concept

model

    public function AjaxSearch($query)
    {
        if($query != '')
        {
            $this->like('email', $query);
            $this->orLike('name', $query);
            $this->orLike('subject', $query);
            $this->orLike('custom', $query);
            $this->orLike('note', $query);
            $this->orderBy('lastactivity', 'DESC');

            return $this->findAll(5);
        }
        return;
    }

view

<?= $this->section('content') ?>
<h3> 
  Search Contacts 
    <span class="htmx-indicator"> 
        <img src="/img/bars.svg"/> Searching... 
    </span> 
</h3>
<input class="form-control" type="search" 
       name="search" placeholder="Begin Typing To Search Users..." 
       hx-post="<?= site_url('admin/trova') ?>" 
       hx-trigger="keyup changed delay:500ms, search" 
       hx-target="#search-results" 
       hx-indicator=".htmx-indicator">

<div class="table-responsive">
    <table id="search-results" class="table table-bordered table-striped">

    </table>
</div>

<?= $this->endSection() ?>

controller

    public function index()
    {
        $output="";

        helper('form');

        // Checks whether the form is submitted.
        if (! $this->request->is('POST')) {
            // The form is not submitted, so returns the form.
            return view("admin/ticket/trova");
        }

        $post = $this->request->getPost(['search']);

        // Checks whether the submitted data passed the validation rules.
        if (! $this->validateData($post, [
            'search' => 'required|max_length[10]|min_length[3]',
        ])) {
            // The validation fails, so nothing to do.
            echo "CIAO";
        }

        $this->ticketModel = new \App\Models\TicketObjModel();

        $data = $this->ticketModel->AjaxSearch($post['search']);

        $output .= '
                <tr>
                <th>Ticket</th>
                <th>Oggetto</th>
                <th>Nome</th>
                <th>Email</th>
                <th>Stato Lav</th>
                </tr>';

        if(count($data) > 0)
        {
            foreach($data as $ticket)
                {
                $output .= '
                    <tr>
                        <td><a href="http://ticket.box/admin/ticket/show/'.$ticket->id.'">'.'visualizza</a></td>
                        <td>'.$ticket->subject.'</td>
                        <td>'.$ticket->name.'</td>
                        <td>'.$ticket->email.'</td>
                        <td>'.$ticket->dept_id.'</td>
                    </tr>';
                }
        }
        else
        {
         $output .= '<tr>
             <td colspan="5" style="text-align: center;">No Data Found</td>
            </tr>';
        }
        echo $output;       
    }

kenjis commented 1 year ago

Do you use https://github.com/michalsn/codeigniter-htmx ?

rcorsari commented 1 year ago

Hello no , as I have done for Bootstrap , I have just included the htmx minified js in the header of the main default template page

what is the difference? ... unless the difference is just this incompatibility ...

Thank you

kenjis commented 1 year ago

what is the difference?

If you don't use it, you have the issue like this.

If you use HTMX with CI4, I recommend you install it. Read https://michalsn.github.io/codeigniter-htmx/

rcorsari commented 1 year ago

Sharp!

I knew aboutand used the codeigniter-htmx, thoug I supposed it was a facilitation for an automatic implementation, and I have succesfully run the demo.

Probably it is better to think about add some warning on both the sites

Codeigniter user guide
Codeigniter-HTMX page ( I'll send an email to Michal )

in fact neither on the Codeigniter-HTMX page it is given the idea that using this "extension" is a must, otherwise pseudo-bugs like this may happen

Thank you

michalsn commented 1 year ago

The issue has nothing to do with CodeIgniter since HTMX is a third-party library. Please don't expect CodeIgniter to be fully compatible out of the box with every library out there.

CodeIgniter-HTMX is not required to use HTMX. Although it helps - debug bar is one of these scenarios. Even though it's not rendered it works. Just search for the debugbar-link response header.

codeigniter4 / CodeIgniter4