Search code examples
javascriptjqueryobjectjquery-callback

Getting context of parent function-jquery


I have following script

<script language="javascript">
    $(document).ready(function(){
          var str="";
          var className="";
          $(".question_one_select").click(function(){

                  //if($(this).find(':radio').is(":disabled")==false){
                    //call ajax here
                    val=$(this).find(':radio').val();
                    $.ajax({
                        url: "{{Request::root()}}/myprofile/ajax/myquiz?id="+val,
                        context: document.body
                        }).done(function(data) {
                                //$( this ).addClass( "done" );
                                if(data.trim()==2){
                                    alert("Please , login and answer quiz correctly to win exciting prizes");
                                }

                                else if(data.trim()==1){
                                    //append correct answer string
                                     alert("Correct answer !! you earned some points");
                                    $(this).closest('.question_title').find('.correct').show();
                                     //this is not working

                                }

                                else {
                                    alert("Oops!! wrong answer , better luck next time");

                                }

                            }); 
                    $(this).find(':radio').prop('checked',true);
                    $(this).closest('.question_title').find(':radio').remove();
                    //alert(className);



             });
});
  </script>

Problem : when i receive a callback 'done' from ajax i need to make some changes on parent div i was trying to call

$(this).closest('.question_title').find('.correct').show();

where $(this) should be context of $(".question_one_select").click(function(){


Solution

  • The context option in $.ajax() is used to specify the context that should be used in the callback methods.

    Since you are passing the context as document.body to the ajax call, this inside the callback will refer to the document.body object. So change that to this

    $(document).ready(function () {
        var str = "";
        var className = "";
        $(".question_one_select").click(function () {
    
            //if($(this).find(':radio').is(":disabled")==false){
            //call ajax here
            val = $(this).find(':radio').val();
            $.ajax({
                url: "{{Request::root()}}/myprofile/ajax/myquiz?id=" + val,
                context: this
            }).done(function (data) {
                //$( this ).addClass( "done" );
                if (data.trim() == 2) {
                    alert("Please , login and answer quiz correctly to win exciting prizes");
                } else if (data.trim() == 1) {
                    //append correct answer string
                    alert("Correct answer !! you earned some points");
                    var className = ".correct";
                    $(this).closest('.question_title').find(className).show();
                    //this didnt refer to  $(".question_one_select")
    
    
    
                } else {
                    alert("Oops!! wrong answer , better luck next time");
    
                }
    
            });
            $(this).find(':radio').prop('checked', true);
            $(this).closest('.question_title').find(':radio').remove();
            alert(className);
            //(this).closest('.question_title').find(className).show();
    
    
        });
    });