Đặt chú giải công cụ khởi động thành kết quả cuộc gọi AJAX

Question

Tôi có một chú giải công cụ bootstrap mà tôi muốn tải dữ liệu từ một yêu cầu AJAX, với văn bản từ yêu cầu là thuộc tính title của chú giải công cụ. Yêu cầu AJAX của tôi hoạt động tốt, nhưng tôi có hai vấn đề:

1. Tại sao dữ liệu từ cuộc gọi AJAX không đi vào chú giải công cụ?
2. Tôi làm cách nào để sử dụng đối tượng ttManager của mình để đóng gói trạng thái của chú giải công cụ?

Hiện nay, khi tải trang đầu tiên và tôi bấm vào #btnSubmit trong giao diện điều khiển tôi thấy success và dữ liệu chính xác từ console.log (ttManager) dòng

$(document).ready(function() { 
     //this object's title attribute will be the value of ttManager.title seen below 
     var ttManager = { 
      title: '', 
      setTitle: function (data) { 
       this.title = data; 
      } 
     } 
     var ajaxCall = function() { 
      //this returns the top five results of text from a query 
      $.ajax({ 
       type: "POST", 
       contentType: "application/json", 
       url: "Service.asmx/GetDrugs", 
       dataType: "json", 
       success: function (data) { 
        console.log('success'); 
        ttManager.title = data.d; 
        //inside this function I want to set ttManager.title equal to the data.d 
        console.log(ttManager); 




       }, 
       error: function (xhr) { 
        console.log('failed: ' + xhr.status); 
       } 

      }); 


     } 

     $('#btnSubmit').tooltip({ 
      //reference to ajax call 
      //title is the attribute responsible for displaying text in the tooltip 
      //I need to use a reusable object to set the text property instead of referencing ajaxCall 
      //would it be better if there below were title: ttManager.title? 
      title: ajaxCall, 
      trigger: 'click', 
      placement: 'right' 
     }); 



    }); 

Tôi khá chắc chắn rằng tôi cần một hàm gọi lại ở đâu đó, nhưng tôi không chắc chắn ở đâu. Bất kỳ con trỏ nào trong tương lai cũng sẽ được đánh giá cao. Cảm ơn.

Answer 1

Đầu tiên, một chút giải thích về plugin công cụ của bootstrap. Chú giải công cụ hiển thị sẽ kéo từ các thuộc tính title nếu có một mặt, nếu không nó sẽ sử dụng đối số tiêu đề được chuyển.

Điều tiếp theo bạn cần hiểu là các cuộc gọi ajax không đồng bộ. Điều này có nghĩa là mã sẽ tiếp tục chạy trong khi chờ phản hồi. Vì vậy, ví dụ: nếu tôi làm điều gì đó như thế này

$.ajax({ 
    URL: 'google.com', 
    success: function(){ 
     console.log('yay'); 
    } 
}); 
console.log('woohoo'); 

bạn sẽ thấy "woohoo" trong bảng điều khiển trước "yay". Vì vậy, hiện tại, bạn đang gọi $('#btnSubmit').tooltip trước khi truy vấn ajax của bạn đã thay đổi trạng thái của ttManager.

Vấn đề khác là bạn hiện không làm bất cứ điều gì với ttManager liên quan đến bootstrap. Tôi cảm thấy như tôi cũng nên đề cập đến rằng đối tượng ttManager có vẻ vô nghĩa ở đây.

Cá nhân, tôi sẽ thay đổi chức năng thành công ajax của tôi để này (đặt thuộc tính tiêu đề, gọi tooltip, sau đó tạo ra một cú nhấp chuột để làm cho tooltip xuất hiện)

success: function(data) { 
    $('#btnSubmit').attr('title', data.d) 
    .tooltip({ 
     trigger: 'click', 
     placement: 'right' 
    }).click(); 
} 

tháo $('#btnSubmit').tooltip... mã hiện tại đang ở đó, và thêm một trình xử lý nhấp chuột một lần để gọi ajax của bạn.

$('#btnSubmit').one('click', function() { 
    ajaxCall(); 
}); 

Answer 2

Kiểm tra xem bạn có lớp "DISABLED" trên phần tử của bạn hay không.