Kevin Powell - Community•2d ago

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)

    })

  })

})

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)

    })

  })

})

-# snippets There is already a sorting function going on using data-attributes as such:

HTML:
data-request="onRefreshList" data-request-data="{'sort': 'sponsor'}">

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');

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.

1 Reply

Zempai•2d ago

-# Simon posted from his home account Ignore this thread I will close this thread tomorrow if possible, october cms has some big time ajax going on 🙃

Gaming

Programming

JS – Calling a PHP public function with vanilla javascript