XHR readyState is 1 instead of 4

[kharabela]

document.body.addEventListener('htmx:beforeRequest', function(evt) {
  var xhr = evt.detail.xhr;
  const target = evt.detail.target;

  // Check if the target element has the hx-post attribute set to /accountformdata
  if (target.getAttribute('hx-post') === '/accountformdata') {

    var formData = new FormData(document.getElementById('AccountDetailsForm'));
    var formObject = {};
    formData.forEach((value, key) => {
      formObject[key] = value;
    });
    var formString = JSON.stringify(formObject);

    // Obfuscate the passphrase
    var passphrase = atob("U2VjcmV0IFBhc3NwaHJhc2U="); // "Secret Passphrase" in base64

    var encrypted = CryptoJS.AES.encrypt(formString, passphrase).toString();
    console.log("Encrypted Data:", encrypted); // Log encrypted data for debugging

     // Open the request before setting headers and sending data
    xhr.open('POST', '/accountformdata', true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify({ data: encrypted }));
  
        // Verify the state of the xhr object
       // console.log("XHR readyState after setting headers:", xhr.readyState);
  }

});

Code works till console.log("Encrypted Data:", encrypted); // Log encrypted data for debugging

fails due to following reason
htmx.min_v.2.0.4.js:1 Uncaught InvalidStateError: Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED.
at de (htmx.min_v.2.0.4.js:1:44820)
at htmx.min_v.2.0.4.js:1:23481
at HTMLButtonElement.s (htmx.min_v.2.0.4.js:1:22459)

XHR readyState is 1 instead of 4

[Telroshan]

Hey, since htmx calls xhr.open and all its other methods internally, I think you shouldn't call those yourself

To configure a request before htmx sends it, you'll want to use the htmx:configRequest event instead of htmx:beforeRequest, the latter being more useful to prevent a request from happening right before it's sent, but is invoked after the request has been configured.

In a htmx:configRequest listener, you'll want to change the values inside event.detail to override with your custom values, such as

• event.detail.parameters
• event.detail.verb
• event.detail.path
• event.detail.headers

Which should properly use all of your values while leaving htmx's internal behavior intact

Alternatively, if you want to make a request of your own (as you seem to be updating most of the request values here), you might want to simply use htmx.ajax

Hope this helps!

[kharabela]

htmx:configRequest event

@Telroshan

This works with warning Uncaught InvalidStateError: Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED.

document.body.addEventListener('htmx:beforeRequest', function(evt) {
  var xhr = evt.detail.xhr;
  const target = evt.detail.target;
  const requestConfig = evt.detail.requestConfig;  

   // Check if xhr is defined
   if (!xhr) {
    console.error("xhr is undefined");
    return;
  }

  // Check if the target element has the hx-post attribute set to /accountformdata
  if (target.getAttribute('hx-post') === '/accountformdata') {

    var formData = new FormData(document.getElementById('AccountDetailsForm'));
    var formObject = {};
    formData.forEach((value, key) => {
      formObject[key] = value;
    });
    var formString = JSON.stringify(formObject);
    console.log("formString Data:", formString);
    
   
    const encrypted = encrypt(formString);
    const decrypted = decrypt(encrypted);

    console.log("Encrypted Data:", encrypted); // Log encrypted data for debugging
    console.log("Decrypted Data:", decrypted); // Log decrypted data for debugging

  //xhr.open('POST', '/accountformdata', true);
  xhr.setRequestHeader("Content-Type", "application/json");
  evt.detail.parameters={data:encrypted};

  xhr.send(JSON.stringify({ data: encrypted }));//wc
  evt.detail.cancelled = true; // Cancel the original request

  }

});

This doesn't post at all

document.body.addEventListener('htmx:configRequest', function(evt) {
  var xhr = evt.detail.xhr;
  const target = evt.detail.target;
  const requestConfig = evt.detail.requestConfig;  

   // Check if xhr is defined
   if (!xhr) {
    console.error("xhr is undefined");
    return;
  }

  // Check if the target element has the hx-post attribute set to /accountformdata
  if (target.getAttribute('hx-post') === '/accountformdata') {

    var formData = new FormData(document.getElementById('AccountDetailsForm'));
    var formObject = {};
    formData.forEach((value, key) => {
      formObject[key] = value;
    });
    var formString = JSON.stringify(formObject);
    console.log("formString Data:", formString);
    
   
    const encrypted = encrypt(formString);
    const decrypted = decrypt(encrypted);

    console.log("Encrypted Data:", encrypted); // Log encrypted data for debugging
    console.log("Decrypted Data:", decrypted); // Log decrypted data for debugging

  //xhr.open('POST', '/accountformdata', true);
  xhr.setRequestHeader("Content-Type", "application/json");
  evt.detail.parameters={data:encrypted};

  //xhr.send(JSON.stringify({ data: encrypted }));// With or without doesn't matter
  evt.detail.cancelled = true; // Cancel the original request

  }

});

[Telroshan]

Hey, yeah I don't think you should the xhr's methods directly either!

You should likely set event.detail.headers['Content-Type'] (see the json-enc extension for an example)

You really don't want to use xhr.send, here, as:

• in htmx:configRequest, the xhr hasn't been open-ed yet, so you couldn't send it
• Htmx itself is going to call xhr.send, resulting in a double call that will likely raise an error

What you'll want to do:

• After you have set your parameters, you might just let htmx do its job and fire the request for you.
• If you really need to prevent htmx's own request logic, you could
  • A) call event.preventDefault instead of evt.detail.cancelled = true, as the latter doesn't exist in htmx's codebase so htmx won't do anything with it
  • C) use htmx.ajax which should be easier to use to fire a custom request
  • B) if relevant, simply avoid using htmx at all here (since you're overriding parameters, headers, and preventing the default request sending, do you really need htmx here?)