0

I am working on an AJAX cart system where the sub total will automatically update when the quantity changes. My solution is every time the input changes, post it to the current page (cart page) then reload the div that displays the sub total. However, I don't know how to do this with pure JavaScript, and I haven't found any reference yet.

This is my function for the above algorithm:

var _rangeInput = document.querySelectorAll('.ranum'), _upAload = document.getElementsByClassName('upAload');
var _frmData = {};
for (var i = 0; i < _rangeInput.length; i ++) {
    _rangeInput[i].addEventListener('change', function(){
        _frmData[this.name] = this.value;
        ajaxFormValidate({
            type: 'POST',
            url: location.href,
            method: true,
            sendItem: _frmData,
            success: function(response) {
                //reload here
            }
        });
    }, false);
}

Code explaination:

  • First, get the inputs and divs that need to be processed.
  • Loop through all of the inputs and get their values and names.
  • I have written an AJAX function for my self, you can look above.

Is there anyway to do this with pure JavaScript?

I can't use JavaScript methods or functions to change the content since I am sending the request to the same page, as a result, response here will have the value of the whole document.

Also, this is how the system works:

  • First, the user changes the quantity they want
  • AJAX sends request to the same page
  • The page changes the information based on the request
  • AJAX receives the request, and refreshes/reloads the specific div
mkrieger1
  • 19,194
  • 5
  • 54
  • 65
WebDeg Brian
  • 802
  • 1
  • 7
  • 21
  • Yes; that's totally possible. What don't you understand? – SLaks Jan 02 '18 at 16:14
  • The answer is `XMLHttpRequest` – Mamun Jan 02 '18 at 16:14
  • @Mamun: No; the answer is `fetch()`. – SLaks Jan 02 '18 at 16:15
  • @SLaks, I don't know how to do this with vanilla JavaScript, you can give me the reference for this – WebDeg Brian Jan 02 '18 at 16:15
  • Use some SPA framework for it. It's a plenty of boring boiler to make it consistent and able to work with any part of DOM complete with actions when to do it. Waste of time. – DanteTheSmith Jan 02 '18 at 16:16
  • You don't know how to do which part? Did you try Googling it? – SLaks Jan 02 '18 at 16:16
  • I'm really not sure what the question is here. Is it "Someone wrote ajaxFormValidate, but I want to write my own version, how does it work?". Can't you look at the source code to `ajaxFormValidate`? – Quentin Jan 02 '18 at 16:16
  • @Mamun can you please write down the fully answered post please, I search for it for at least 3 hours – WebDeg Brian Jan 02 '18 at 16:16
  • @Quentin, no, `ajaxFormValidate` is my own function. I mean can somebody help me with the 'reloading a specific div' please – WebDeg Brian Jan 02 '18 at 16:18
  • @SLaks, yeah, I did, but I only found references for jQuery, and I really don't want to include it just for this part – WebDeg Brian Jan 02 '18 at 16:19
  • Duplicate? https://stackoverflow.com/questions/2554149/html-javascript-change-div-content – Quentin Jan 02 '18 at 16:19
  • @Quentin, as you can see, the specified url is the same page, so if I use `.innerHTML` or something similar it will print out the whole HTML document – WebDeg Brian Jan 02 '18 at 16:22
  • @WebDegBrian — So extract the bit you care about from the response (or, better, change the server side code so it only sends you the bit you care about in the first place). – Quentin Jan 02 '18 at 16:23
  • @Quentin, it is kind of hard for me to do that. So I only changed the variable 'cart' in the system, so after I reload the div, the content will automatically change. – WebDeg Brian Jan 02 '18 at 16:24

2 Answers2

0

Simply set the innerHTML of your sub total div with the response data.

document.getElementById("sub-total").innerHTML = response.value; //Whatever value you get in response
Tarak
  • 479
  • 4
  • 5
  • if you look at the code, you can see that the specified url is at the same page, so if I do like that, it will print out the whole document – WebDeg Brian Jan 02 '18 at 16:21
  • What is the need to make an AJAX call to the same page? If you have some server side code on the same page that does the calculations then just echo out the data on a post request using self processing forms. If you want to use AJAX then move the code to some other script and make the call to that script which sends the value back as json. – Tarak Jan 02 '18 at 16:34
  • Thanks for the idea, I am trying to reorganize my code – WebDeg Brian Jan 02 '18 at 16:35
0

It sounds like you're actually asking how to get a single element out of an AJAX response.

You can do that by parsing the response into a temporary element, then finding the element you need within it:

const holder = document.createElement('div');
holder.innerHTML = response;
const myElement = holder.querySelector('some selector');
SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • I have edited the question, you can look through it. Basically the question is just like 'what is the equivalent way to write a method like `.load()` in jQuery'. I need to reload the page because I am sending the request to the same page, it cannot be updated unless you reload/refresh it – WebDeg Brian Jan 02 '18 at 16:29