1 reply

JS – Calling a PHP public function with vanilla javascript

A HTML

<ul>

<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

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>

<input>

value with

keyup

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)

    })

  })

})

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"

data-request="onRefreshList"

to the

<form>

<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.

KP-C

Kevin Powell - Community•16mo ago•

1 reply

Simon

JS – Calling a PHP public function with vanilla javascript

A HTML

<ul>

<ul>

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

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>

<input>

value with

keyup

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)

    })

  })

})

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"

data-request="onRefreshList"

to the

<form>

<form>

JS – Calling a PHP public function with vanilla javascript

JS – Calling a PHP public function with vanilla javascript

Similar Threads

Similar Threads

Similar Threads