Set tooltip di avvio per i risultati delle chiamate AJAX

Question

Ho un suggerimento bootstrap che voglio caricare i dati da una richiesta AJAX, con il testo dalla richiesta è la proprietà title del suggerimento. La mia richiesta AJAX funziona correttamente, ma ho due problemi:

1. Perché i dati della chiamata AJAX non si stanno facendo strada nella descrizione?
2. Come è possibile utilizzare l'oggetto ttManager per incapsulare lo stato del suggerimento?

Attualmente, quando la pagina primi carichi e clicco sul #btnSubmit nella console vedo success e i dati corretti dalla linea di console.log (ttManager)

$(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' 
     }); 



    }); 

sono abbastanza sicuro che ho bisogno di una funzione di callback da qualche parte, ma non sono sicuro di dove. Anche eventuali indicatori futuri saranno apprezzati. Grazie.

Answer 1

In primo luogo, una piccola spiegazione del plugin tooltip di bootstrap. Il tooltip visualizzato estrarrà dall'attributo title se ce n'è uno presente, altrimenti utilizzerà l'argomento titolo passato.

La prossima cosa che devi capire è che le chiamate ajax sono asincrone. Ciò significa che il codice continuerà a essere eseguito mentre è in attesa di una risposta. Così, per esempio, se faccio qualcosa di simile

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

vedreste "Woohoo" nella console prima di "tutto bene". Quindi, al momento, stai chiamando $('#btnSubmit').tooltip prima che la query ajax abbia modificato lo stato di ttManager.

L'altro problema è che attualmente non si sta facendo nulla con ttManager in relazione al bootstrap. Sento che dovrei anche menzionare che l'oggetto ttManager sembra privo di significato qui.

Personalmente, vorrei cambiare la mia funzione successo ajax a questo (imposta l'attributo title, chiama tooltip, quindi produce un altro clic per far apparire il tooltip)

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

rimuovere il codice corrente $('#btnSubmit').tooltip... attualmente lì, e aggiungi un gestore di un clic per chiamare il tuo ajax.

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

Answer 2

controllare per vedere se si dispone di classe "disabile" sul vostro elemento.