this (এটি) এজেএক্স সাফল্যের ভিতরে কাজ করছে না


103

আমি কিছু পুরানো কোড পরিবর্তন করার চেষ্টা করছি যা অনক্লিক ব্যবহার করে যাতে আমি $ (এটি) ব্যবহার করি। সমস্যাটি হ'ল সাফল্যের ভিতরে থাকা অবস্থায় this (এটি) কাজ করছে না। এটি কোনও ভেরি হিসাবে সেট না করেই এটি করার কি আছে?

$('.addToCart').click(function() {

    $.ajax({
        url: 'cart/update',
        type: 'post',
        data: 'product_id=' + $(this).attr("data-id"),
        dataType: 'json',
        success: function(json) {

            if (json['success']) {

            $(this).addClass("test");

            }   
        }
    });

});

উত্তর:


231

সমস্যা

কলব্যাকের অভ্যন্তরে, আজাক্স কলের অবজেক্টটিকে thisবোঝায় jqXHR, ইভেন্ট হ্যান্ডলার যে উপাদানটির সাথে আবদ্ধ ছিল সেটিকে নয়। কীভাবে thisজাভাস্ক্রিপ্টে কাজ করে সে সম্পর্কে আরও জানুন


সলিউশন

যদি ES2015 + আপনার কাছে উপলভ্য থাকে তবে তীর ফাংশনটি ব্যবহার করা সম্ভবত সহজ বিকল্প হবে:

$.ajax({
    //...
    success: (json) => {
         // `this` refers to whatever `this` refers to outside the function
    }
});

আপনি contextবিকল্পটি সেট করতে পারেন :

এই অবজেক্টটি সমস্ত অ্যাজাক্স-সম্পর্কিত কলব্যাকের প্রসঙ্গ তৈরি করা হবে। ডিফল্টরূপে, প্রসঙ্গটি এমন একটি অবজেক্ট যা কলটিতে ব্যবহৃত এজাক্স সেটিংসকে উপস্থাপন করে (এতে $.ajaxSettingsপাঠানো সেটিংসের সাথে একীভূত হয় $.ajax)। (...)

$.ajax({
    //...
    context: this,
    success: function(json) {
         // `this` refers to the value of `context`
    }
});

বা ব্যবহার করুন $.proxy:

$.ajax({
    //...
    success: $.proxy(function(json) {
         // `this` refers to the second argument of `$.proxy`
    }, this)
});

বা thisকলব্যাকের বাইরের মানটির জন্য একটি রেফারেন্স রাখুন :

var element = this;

$.ajax({
    //...
    success: function(json) {
         // `this` refers to the jQXHR object
         // use `element` to refer to the DOM element
         // or `$(element)` to refer to the jQuery object
    }
});

সম্পর্কিত


1
যেহেতু আমি জাভাস্ক্রিপ্টের সাথে আরও ভাল হয়ে উঠছি এবং বৃহত্তর এবং বৃহত্তর জটিল প্রকল্পটি তৈরি করছিলাম, অবশেষে আমি এটি কিছুটা খুঁজে পেয়েছি, তবে এই উত্তরটি আমাকে বুঝতে অনেক সহায়তা করে যে আমার অনুমানগুলি সঠিক এবং কেবল তত্ত্ব নয় তাই আমি ব্যক্তিগতভাবে আপনাকে ধন্যবাদ জানাই, এমনকি মন্তব্যের নীতির বিরুদ্ধে যদি! =)
জেসনডাভিস

আমি সম্মত (এবং ধন্যবাদ), এই তিনটি বিকল্পের কাজ করে। আমি আজাক্স প্রসঙ্গ বিকল্পটি সম্পর্কে জানতাম না। একটি ছোটখাটো অসুবিধা হ'ল আমার আইডিই (পিএইচপিস্টর্ম) অপশনটিকে স্বীকৃতি দেয় না যা স্কেল ইস্যুটি সমাধান করে যেগুলি জেএস বন্ধে যেমন সহায়তা করে এটি সনাক্ত করে। প্রক্সি মোড়ক যুক্ত করা সতর্কবাণীকে দূরে সরিয়ে দেয়, সুতরাং প্রসঙ্গ: এটি অবশ্যই অবিরাম কৌশল হতে পারে এটি সম্ভবত অবিস্মরণীয় তালিকায় রয়েছে।
স্কিপাইলট

প্রসঙ্গ বিকল্পের জন্য ডিট্টো। নিখুঁতভাবে কাজ করেছেন।
আন্না_মিডিয়াগার্ল

দুর্দান্ত উদাহরণ!
জাওয়াদ রিজওয়ান

-2
jQuery(".custom-filter-options .sbHolder ul li a").each(function () {
    var myStr = jQuery(this).text();
    var myArr = myStr.split(" (");
     url = 'your url'; // New Code
            data = myArr[0];
                try {
                    jQuery.ajax({
                        url : url,
                        context: this,
                        type : 'post',
                        data : data,
                        success : function(data) {
            if(data){
                  jQuery(this).html(data);
            }else{
                  jQuery(this).html(myArr[0]);
            }
                        }
                    });
                } catch (e) {
                } 


});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.