ट्विटर बूटस्ट्रैप: R आर प्रथम क्लिक पर नहीं दिखाई दे रहे हैं, लेकिन दूसरे क्लिक

Question

पर दिखाई यह मेरा मार्कअप है:

<a href="#" class="reviews" id="like" rel="popover" data-content="" data-placement="right" data-original-title="Like episode"> 
    <i class="icon-thumbs-up"></i> 
    Loved it 
</a>(<span id="episode_likes">{{ episode_likes }}</span> 

और यह जावास्क्रिप्ट है:

$('a.reviews#like').click(function(e){ 
    var element = $(this); 
    $.ajax({ 
     url: '/episoderatings/like/', 
     type: 'POST', 
     dataType: 'json', 
     data: { 
      csrfmiddlewaretoken: '{{ csrf_token }}', 
      episode_number: current, 
      story: current_story 
     }, 
     success: function(response){ 
      if(response=='You have liked this episode'){ 
       $('span#episode_likes').text(parseInt($('span#episode_likes').text())+1); 
      } 
      $(element).attr('data-content',response); 
      $(element).popover(); 
     } 
    }); 
    e.preventDefault(); 
}); 

समस्या जब मैं है 'जैसे' बटन पर क्लिक करें, पॉपओवर पहले क्लिक पर दिखाई नहीं देता है, इसलिए मुझे महत्वपूर्ण प्रतिक्रिया याद आती है कि मुझे पृष्ठ पसंद आया या नहीं। जब मैं दूसरी बार पॉपओवर दिखाता हूं तो 'जैसे' बटन पर क्लिक करता हूं और फिर वहां से टॉगल व्यवहार को बनाए रखता है। और विचार?

Answer 1

आप पहली बार अपने लिंक पर क्लिक करते है, वहाँ कोई पॉपओवर अभी तक प्रारंभ, दिखाया जा सकता है। आप कॉलर को $(element).popover(); पर कॉल के साथ प्रारंभ करते हैं। इसलिए, आपका कोड के बाद पॉपओवर प्रारंभ करता है लिंक पर क्लिक करें और कुछ भी पहली बार नहीं दिखाया गया है। दूसरी बार जब आप इसे क्लिक करते हैं, तो पॉपओवर वहां होता है और दिखाया जा सकता है।

आप से पहले लिंक पर क्लिक होने .popover() को फोन करना चाहिए। आपके मामले में

$('a.reviews#like') 
    .popover({trigger: 'manual'}) 
    .click(function(e){ 
     var element = $(this); 
     $.ajax({ 
      url: '/episoderatings/like/', 
      type: 'POST', 
      dataType: 'json', 
      data: { 
       csrfmiddlewaretoken: '{{ csrf_token }}', 
       episode_number: current, 
       story: current_story 
      }, 
      success: function(response){ 
       if(response=='You have liked this episode'){ 
        $('span#episode_likes').text(parseInt($('span#episode_likes').text())+1); 
       } 
       $(element).attr('data-content',response).popover('show'); 
      } 
     }); 
     e.preventDefault(); 
    }); 

चाल चलाना चाहिए।

लाइन 2 में .popover({trigger: 'manual') पर कॉल पर ध्यान दें। यह पॉपओवर शुरू करता है और यह क्लिक करता है कि यह क्लिक करने के बाद एक बार दिखाई देता है। यह सहायक नहीं होगा, क्योंकि आपने अपनी सामग्री को AJAX कॉलबैक में सेट किया है, और जल्द ही पॉपओवर दिखाया जा सकता है। इसलिए, कॉलबैक में, अब data-content विशेषता सेट करने के बाद, आपको मैन्युअल रूप से .popover('show') पर कॉल करना होगा।

एक और बात: आप कुछ बिंदु पर .popover('hide') कॉल करने के लिए आप पॉपओवर से पता चला है के बाद की है। जब आप लिंक पर दोबारा क्लिक करते हैं तो यह गायब नहीं होगा, तब से AJAX कॉल केवल एक बार और ट्रिगर हो जाता है और .popover('show') फिर से कॉल किया जाता है। एक समाधान जो मैं सोच सकता हूं कि पॉपओवर सक्रिय होने पर लिंक पर एक वर्ग जोड़ रहा है और प्रत्येक क्लिक पर उस वर्ग की जांच करें। यदि कक्षा वहां है, तो आप बस .popover('hide') पर कॉल कर सकते हैं और कक्षा को हटा सकते हैं, अन्यथा अपना AJAX कॉल करें। मैंने अपना मतलब दिखाने के लिए a small jsfiddle बनाया है।

अधिक जानकारी look at the docs लिए

।

उम्मीद है कि मदद करता है।