CODEWITHSUNDEEP
javascriptphpjqueryajaxcakephp
LogixMaster
LogixMaster

Reputation: 586

cakePHP- Ajax post request- sending data back to callback after success

Ok, so I have the following ajax post request wrapped inside a blur event like so: 

$('#name, #surname, #email').blur(function(e){        
        $.post(
            '/validate_form', // it will submit to the validate_form action
            {field: $(this).attr('id'), value: $(this).val()}, 
            handleValidation
        );

    });

In my handleValidation callback, I want to get back the id of the element which triggered the blur event(ie. field). So the way I had in mind of doing this is to pass it back to the callback after the ajax post request is successful, since the post request is sent. However I am not entirely sure on how to do this. I am already getting an error message in my reponse for my validation, but this is the usual automatic response from the request.

function handleValidation(error, {//i want to get another variable sent here..}) {
        if (error.length > 0) {
            if ($('{placeholder for field id}-notEmpty').length == 0) {
                $('#{placeholder for field id').after('<div id="{placeholder for field id-notEmpty" class="error-message">' + error + '</div>');
            }
        }else{
            $('#{placeholder for field id-notEmpty').remove();
        }
    } 

public function validate_form(){            
        if($this->RequestHandler->isAjax()){
        $this->request->data['Model'][$this->request->data['field']] = $this->request->data['value'];
        $this->Donor->set($this->request->data);
             if($this->Model->validates()){
               $this->autoRender = FALSE;
             }else{
                //somewhere here, i need to pass in $this->request->data['field'] back to callback function handleValidation.
             }

        }
}

How can I do this ? Thanks

Upvotes: 1

Views: 968

Answers (2)

Reese
Reese

Reputation: 1775

Closures are useful for capturing the state of variables at the time of declaration, so they are available to use later. To convert your callback to a closure using an anonymous function, do something like this

$('#name, #surname, #email').blur(function(e){        
    var elem = $(this).attr('id');
    $.post(
        '/validate_form', // it will submit to the validate_form action
        {field: $(this).attr('id'), value: $(this).val()}, 
        function (error, elem) { handleValidation(error, elem) }
    );
});

You can do this without an anonymous function too, if it makes more sense to you

$('#name, #surname, #email').blur(function(e){       
    var elemNow = $(this).attr('id');
    var handleValidation; //declare outside the closure
    function closure(error, elem) {
        handleValidation = function(error){
            //has access to elem's value at the time of closure's declaration
            console.log(elem);
        }
    }(error, elemNow); //run closure() now 
    $.post(
        '/validate_form', // it will submit to the validate_form action
        {field: $(this).attr('id'), value: $(this).val()}, 
        handleValidation }
    );
});

Upvotes: 1

Kevin B
Kevin B

Reputation: 95022

There are several ways to do this, all revolving around access to this. You can pass it as a parameter to your callback, pass it as the context to your callback, or make your callback a closure instead.

$.ajax('/validate_form',{
    data: {
        field: $(this).attr('id'),
        value: $(this).val()
    }
    context: this,
    success: handleValidation
});

function handleValidation() {
    console.log(this); // the element that you acted on
}

or

var self = this;
$.post(
    '/validate_form', // it will submit to the validate_form action
    {field: $(this).attr('id'), value: $(this).val()}, 
    function (data) {
        handleValidation(data,self);
    }
);
function handleValidation(data,el) {
    console.log(el); // the element that you acted on
}

Upvotes: 1

Related Questions