Parsing data from template to controller using Prototype JS Ajax.Request

Question

I have the following method in my template file:

function submit_serials(){
    var serials = $('serials').value;
    new Ajax.Request("<?php echo $this->getUrl('*/*/process'); ?>" + '?serials=' + serials, {
        method: 'POST', 
        onComplete: function(transport) {
            div = $('feedback');
            div.update(transport.responseText);
        }
    });
}

in my controller file I have:

public function processAction(){
    $serials = $_POST['serials'];
    ...
}

I'm getting a Request-URI too large error. I understand that there is too much info being stored in the serials variable, but how else can I parse this through to the controller? I read that you should be using the body of the AJAX request but I can't seem to figure out how to do so.

How can I parse the serials in the body of this Ajax request & fetch them from within the controller file?

You are trying to send data in GET while using POST request... Send it in POST. — Amberta
– Amberta, Commented Jan 30, 2015 at 13:23
If you could elaborate on how to do so, I'd really appreciate it :-) — Moose
– Moose, Commented Jan 30, 2015 at 13:24

Amit Bera · Accepted Answer · 2015-01-30 13:34:52Z

You need form param serialize, and send form fields as it as param to ajax request

 new Ajax.Request(url,{
    method:'POST',
parameters:params,
    requestHeaders: {Accept: 'application/json'},
    onSuccess:function(transport){
        var response=transport.responseText.evalJSON(true);

    }.bind(this)
    });

If you work with varien form stucture then using form ID you can create Varien form vaidation:

//<![CDATA[
        var MobileLogin = new VarienForm('min-mobile-login', true);
            MobileLogin.submit = function(button, url) {
            if (this.validator.validate()) {
                var form = this.form;
                var oldUrl = form.action;
                if (url) { form.action = url; }
                var e = null;
                try { 
            //this.form.submit();
            //loggin(this.form.action,this.form.serialize(),this.form.method);

            new Ajax.Request(this.form.action,{
            method:'POST',
            parameters:this.form.serialize(),
            requestHeaders: {Accept: 'application/json'},
            onSuccess:function(transport){
                var response=transport.responseText.evalJSON(true);

            }.bind(this)
            });


        } catch (e) {
                }
                this.form.action = oldUrl;
                if (e) { throw e; }


            }
        }.bind(MobileLogin);
    //]]>

Here min-mobile-login is id form .Ex <form id="min-mobile-login" ....

And form button type should be submit and it content onclick function and and return false

    <button class="button" type="submit"  
onclick="MobileLogin.submit(this); return false;">Login</button>

Thanks a lot for the info. Could you show me how to specify the parameters for the serials variable? Sorry, not very familiar with Ajax at all! — Moose
– Moose, Commented Jan 30, 2015 at 13:29
you can also use transport.responseJSON if the backend script sends the Content-type: application/json header — Geek Num 88
– Geek Num 88, Commented Jan 30, 2015 at 19:06

Amberta · Accepted Answer · 2015-01-30 13:51:48Z

4

http://prototypejs.org/learn/introduction-to-ajax

new Ajax.Request('/some_url', {
  method: 'post',
  parameters: {company: 'example', limit: 12}
});

Use Google more. There are many examples.

edited Jan 30, 2015 at 13:51

answered Jan 30, 2015 at 13:31

Amberta

3881 silver badge4 bronze badges

Add a comment |

Stack Exchange Network

Parsing data from template to controller using Prototype JS Ajax.Request

2 Answers 2

Your Answer

Hot Network Questions

Parsing data from template to controller using Prototype JS Ajax.Request

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions