Kevin Powell - CommunityKP-C
Kevin Powell - Community•14mo ago•
1 reply
Simon

JS – Calling a PHP public function with vanilla javascript

A HTML <ul>list is being built with PHP and filled from the database. I am supposed to add a search-filtering function on the Frontend side. But I'm unsure about where and how the connection between the user interface and content processing happens.

I feel like I have very basic(stupid) questions.
Can I assume ajax anywhere as in baseline JS or does it need to be introduced to a project like a framework?

I do realize that I can addEventListener to the input in JavaScript, assuming I can let it fire a prepared search function in PHP
While I have no idea if it's a good idea or the correct approach, I kind of want to forward the <input> value with keyup and get the list to refresh based on the search.
No idea how I could go on from here:
JS:
document.addEventListener("DOMContentLoaded", function() {

  const toolbars = document.querySelectorAll('[data-control="sponsor-list-toolbar"]')

  // toolbar functions
  toolbars.forEach((tb) => {

    // search input
    tb.querySelector('input[type="search"]').addEventListener('keyup', function() {

      console.log(this.value)

    })

  })

})


There is already a sorting function going on using data-attributes as such:
HTML:
data-request="onRefreshList" data-request-data="{'sort': 'sponsor'}">

Would you assume this already works because there is a dedicated JS for it? How could I find it 🥲
It is quite difficult to me because it's so modular. I also found this
PHP:
$sort = $request->get('sort', $this->property('sort_by', 'booth'));
$order = $request->get('order', 'asc');
$search = $request->get('search');


Do I add data-request="onRefreshList" to the <form> and hook it up with the search request function?
Also how do I forward the input value to the handler (I think it's called that way) in PHP?

I am sorry if I'm asking the wrong question – this is a bit out of my comfort zone.
Please note there is no jQuery.
image.png
Was this page helpful?