How to call ajax call in velocity template language?

Question

I am working on Contact Us Page using velocity template language and javascript.

Requirement is a) customer select values from two dropdowns (location and shopName) and click on Submit button

b) this process is processed using AJAX call(without reloading page) and display address just below dropdown on same page

I have developed the UI interface for form (on contact.vtl). On click event I am able to call AJAX call, after that control is shifted to contact-detail.vtl, here i am unable to proceed furthur?

How to send back response to contact.vtl?

function ajaxCall(){
        function getXMLRequestObject() {
            if(window.XMLHttpRequest) {
                return new XMLHttpRequest();
            } else if(window.ActiveXObject) {
                return new ActiveXObject("Microsoft.XMLHTTP");
            } else {
                alert("Your Browser does not support AJAX!! .Upgrade to latest version");
            }
        }

        var url="/application/vtl/widgets/contact-us/contact-detail.vtl?loc=XYZ&shop=ABC";

        var userContactReq = getXMLRequestObject();

        if ( userContactReq.readyState === 1 ||  userContactReq.readyState === 2 ||  userContactReq.readyState === 3 ) {
            userContactReq.abort();
        }
        userContactReq  = getXMLRequestObject();
        if ( userContactReq.readyState === 4 ||  userContactReq.readyState === 0 ) {
            userContactReq.open("GET",url,true);
            userContactReq.onreadystatechange = setReqSuccess;
            userContactReq.send(null);
        }

        function setReqSuccess() {

            if(userContactReq.readyState === 4){alert("Ready State is 4");}
            if(userContactReq.status === 200){alert("Status is 200");}

            if(userContactReq.readyState === 4 && userContactReq.status === 200) {
               
               ## How to recieve response here
                var responseString = userContactReq.responseText;
               

                console.log("end");
                alert(responseString);
            }
        }
    }

Hi @Sran! jQuery will save you from all that boiler-plate. – Jul 07 '16 at 15:07 — , Jul 07 '16 at 15:07

score 0 · Answer 1 · answered Jul 07 '16 at 13:55

This really has nothing to do with Velocity. It is a javascript question and the answer would be the same whatever templating or markup you used. I would think you will need to (via javascript) rewrite the dom (set a div's innerHTML) with the address you got in the AJAX response from the server to show it to your user.

How to call ajax call in velocity template language?

1 Answers1