Member Avatar for abhi10kumar

How two AJAX functions can be called on an event of a control?
I am using check box, on checked/unchecked I want to populate combobox and want to show records in a DIV..
Please give complete code ..

  • 3 Contributors
  • 3 Replies
  • 101 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

asked for two AJAX actions on a single checkbox change (populate a combobox and load records into a DIV). correctly noted multiple calls can be invoked from one handler, and suggested this belongs in a JavaScript context. Below is a practical, modern pattern that avoids inline handlers, reads the checkbox state reliably, and guards against race conditions when the checkbox is toggled quickly.

// example: ids are inactiveCheckbox, myCombo, resultsDiv
const checkbox = document.querySelector('#inactiveCheckbox');
const combo = document.querySelector('#myCombo');
const results = document.querySelector('#resultsDiv');

let optsCtrl = null;
let recCtrl = null;

checkbox.addEventListener('change', async () => {
  const inactive = checkbox.checked ? '1' : '0';

  // fetch options (expects JSON array of {value,text})
  if (optsCtrl) optsCtrl.abort();
  optsCtrl = new AbortController();
  fetch('/api/options.php?inactive=' + inactive, { signal: optsCtrl.signal })
    .then(r => r.ok ? r.json() : Promise.reject(r.status))
    .then(items => {
      combo.innerHTML = items.map(i => `<option value="${i.value}">${i.text}</option>`).join('');
    })
    .catch(e => { if (e.name !== 'AbortError') console.error('Options load failed', e); });

  // fetch records (server can return HTML or JSON)
  if (recCtrl) recCtrl.abort();
  recCtrl = new AbortController();
  try {
    const resp = await fetch('/api/records.php?inactive=' + inactive, { signal: recCtrl.signal });
    if (!resp.ok) throw new Error('Status ' + resp.status);
    results.innerHTML = await resp.text();
  } catch (e) {
    if (e.name !== 'AbortError') results.innerHTML = '<p>Unable to load records.</p>';
  }
});

Notes and cautions:

  • Use the checkbox checked property for state, not the input value.
  • Prefer change for checkboxes so state is read after toggle.
  • AbortController cancels prior requests when toggles happen quickly; polyfills or fallback to XHR may be needed for very old browsers.
  • Return JSON for option lists (easy to map into <option> elements) and either HTML or JSON for records, adjusting client code accordingly.
  • If both responses must be coordinated, use Promise.all or await both requests before updating the UI.
  • Ensure server endpoints respect the same-origin policy or CORS headers if cross-domain.

Recommended Answers

All 3 Replies

Member Avatar for twiss

Please give complete code ..

We don't, generally. But as a start:

document.getElementById('the_id').onclick = function() {
  some_ajax_call();
  another_one();
};

By the way, this is a javascript question, mostly.

Edited by twiss because: n/a
Member Avatar for abhi10kumar

We don't, generally. But as a start:

document.getElementById('the_id').onclick = function() {
  some_ajax_call();
  another_one();
};

By the way, this is a javascript question, mostly.

Here is the code.. How I can implement below into above code..

<td style="width: 25px"><input type="checkbox" name="inactive" id="inactive" onclick="checkbox();showUser(myform.elements['inactive'].value);" value="<?php if(isset($_POST['inactive'])) echo $_POST['inactive']; ?>"></td>
Member Avatar for ko ko

Move this to Javascript forum.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.