<p>When using XMLHttpRequest to update cart like the following, I get a 500 error for <code>'lineItems': {[lineitem]: {'qty': value}}</code> (and also <code>{[lineitem]: {'remove': true}}</code>, any other submission works);</p>

<pre><code>var url = document.querySelector('form#cart-form input[name="action"]').value;
var data = {
    'action': 'commerce/cart/update-cart',
    'lineItems': {[lineitem]: {'qty': value}}
}
data[csrfname] = csrfvalue;

atomic(url, {
    method: 'POST',
    data: data,
    headers: {
        "Content-Type": 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest',
        'Accept': 'application/json'
    }
}).then(function(response) {
    console.log(response.data);
    console.log(response.xhr);
}).catch(function(error) {
    console.log(error.status);
    console.log(error.statusText);
});
</code></pre>

<p><em>(The code above uses <a href="https://github.com/cferdinandi/atomic/" rel="nofollow noreferrer">atomic</a>, which is just a small library to wrap XMLHttpRequest into a promise structure similar to using fetch).</em></p>

<p>The submitted data is (and looks) exactly the same as what I pass through JQuery Ajax, which works;</p>

<pre><code>var url = document.querySelector('form#cart-form input[name="action"]').value;
var data = {
    'action': 'commerce/cart/update-cart',
    'lineItems': {[lineitem]: {'qty': value}}
}
data[csrfname] = csrfvalue;

$.ajax({
    type: "POST",
    dataType: 'json',
    url: '',
    data: data,
    success: function(response){
        console.log(response);
        }
    }
}).fail(function(error) {
    console.log('Error: ' + error);
});
</code></pre>

<p>I can't seem to figure out what the issue is, as the POST data being submitted looks EXACTLY the same. Changing the <code>Content-Type</code> to <code>application/json</code> doesn't work either. Anyone run into this issue?</p>

CC BY-SA 4.0
2019-02-20T20:02:59.043Z
The requests are not identical. You are passing an url with atomic but leave the url (as it is correct) blank in your query. That might cause issues sometimes in certain cases (I doubt this is the issue this time but other requests might fail). You might want to dump your `$_POST` array and see if it's empty. Axios with vue and Angular requests aren't accepted by Craft without changes too, chances are high its the same for atomic
Robin Schambach
CC BY-SA 4.0
2019-02-20T20:58:25.207Z
Well, I should have added that I've tried both ways. Passing the action and/or passing the url. Same problem. The $_POST array looks exactly the same, as far as I can tell. And the issue persists if I try to pass along a serialized encoded form string. It's that specific line `'lineItems': {[lineitem]: {'qty': value}}` causing issues for some reason. Headache inducing stuff.
Anders
CC BY-SA 4.0
2019-02-21T03:09:49.617Z
Actually, $_POST has `'lineItems' => '[object Object]'` for the XMLHttpRequest (atomic) post... While the $.ajax versions just shows `$_POST = []`
Anders
CC BY-SA 4.0
2019-02-21T06:32:00.143Z
There is actually no real way your web server would ever contain an object in your `$_POST` array. Not even an StdClass. There is no setting that would allow that to happen. And if the ajax version was empty you wouldn't receive a response at all for your request. Are you really sure you didn't miss something?
Robin Schambach
CC BY-SA 4.0
2019-02-21T11:25:27.383Z
I copied your code and changed the action url and everything works fine. So there is no error during sending the request and there are no issues with atomic
Robin Schambach
CC BY-SA 4.0
2019-02-21T23:07:29.150Z
I ended up adding a hidden submit, that I then "click" with javascript, capture the submit and preventDefault(), posting a url encoded string instead, that way I could reuse the same request for updating number of line items as well as remove line items.
Anders
<craft3><ajax><plugin-craftcommerce2><xmlhttprequest>
XMLHttpRequest Craft Commerce Cart Update Issues
# XMLHttpRequest Craft Commerce Cart Update Issues

(Asked by: username_0 on 2019-02-20)

When using XMLHttpRequest to update cart like the following, I get a 500 error for 'lineItems': {[lineitem]: {'qty': value}} (and also {[lineitem]: {'remove': true}}, any other submission works);
var url = document.querySelector('form#cart-form input[name="action"]').value;
var data = {
    'action': 'commerce/cart/update-cart',
    'lineItems': {[lineitem]: {'qty': value}}
}
data[csrfname] = csrfvalue;

atomic(url, {
    method: 'POST',
    data: data,
    headers: {
        "Content-Type": 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest',
        'Accept': 'application/json'
    }
}).then(function(response) {
    console.log(response.data);
    console.log(response.xhr);
}).catch(function(error) {
    console.log(error.status);
    console.log(error.statusText);
});

(The code above uses atomic, which is just a small library to wrap XMLHttpRequest into a promise structure similar to using fetch).
The submitted data is (and looks) exactly the same as what I pass through JQuery Ajax, which works;
var url = document.querySelector('form#cart-form input[name="action"]').value;
var data = {
    'action': 'commerce/cart/update-cart',
    'lineItems': {[lineitem]: {'qty': value}}
}
data[csrfname] = csrfvalue;

$.ajax({
    type: "POST",
    dataType: 'json',
    url: '',
    data: data,
    success: function(response){
        console.log(response);
        }
    }
}).fail(function(error) {
    console.log('Error: ' + error);
});

I can't seem to figure out what the issue is, as the POST data being submitted looks EXACTLY the same. Changing the Content-Type to application/json doesn't work either. Anyone run into this issue?

**Tags:** craft3, ajax, plugin-craftcommerce2, xmlhttprequest

> **Comments:**
> **username_1**: The requests are not identical. You are passing an url with atomic but leave the url (as it is correct) blank in your query. That might cause issues sometimes in certain cases (I doubt this is the issue this time but other requests might fail). You might want to dump your `$_POST` array and see if it's empty. Axios with vue and Angular requests aren't accepted by Craft without changes too, chances are high its the same for atomic  
> **username_0**: Well, I should have added that I've tried both ways. Passing the action and/or passing the url. Same problem. The $_POST array looks exactly the same, as far as I can tell. And the issue persists if I try to pass along a serialized encoded form string. It's that specific line `'lineItems': {[lineitem]: {'qty': value}}` causing issues for some reason. Headache inducing stuff.  
> **username_0**: Actually, $_POST has `'lineItems' => '[object Object]'` for the XMLHttpRequest (atomic) post... While the $.ajax versions just shows `$_POST = []`  
> **username_1**: There is actually no real way your web server would ever contain an object in your `$_POST` array. Not even an StdClass. There is no setting that would allow that to happen. And if the ajax version was empty you wouldn't receive a response at all for your request. Are you really sure you didn't miss something?  
> **username_1**: I copied your code and changed the action url and everything works fine. So there is no error during sending the request and there are no issues with atomic  
> **username_0**: I ended up adding a hidden submit, that I then "click" with javascript, capture the submit and preventDefault(), posting a url encoded string instead, that way I could reuse the same request for updating number of line items as well as remove line items.  

---

## 0 answers

