So schließen Sie Bootstrap-Gruppenzusammenbrüche nach AJAX-Erfolg

Question

Ich verwende ein Bootstrap-Minimierungssteuerelement auf meiner Webseite. Immer wenn ich auf den Link klicke, öffnet und schließt er. Ich verwende AJAX, um Daten an eine PHP-Seite zu senden und bei Erfolg das Ergebnis auszudrucken. Nach dem AJAX-Anruf sollte data-toggle schließen. Bitte beachten Sie meinen Code unten.

<a data-toggle="collapse" href="#review" class="open-code btn btn-default">Write a Review</a> 
<div id="review" class="collapse code"> 
    <form id="review"> 
     my code... 
    </from> 
</div> 

$(function() { 
    $(document).on('submit', '#review_post', function(e) { 
     //var $this = $(this); 
     var message = $(this).find("#message").val(); 
     var rating = $(this).find("#input-2c").val(); 
     var vendor_id = $(this).find("#vendor_id").val(); 
     var infostring = 'message=' + message + '&rating=' + rating + '&vendor_id=' + vendor_id; 

     if(message=='') { 
      alert('Please add your Message'); 
     } else { 
      $.ajax({ 
       type: "POST", 
       url: "/review_vendor.php", 
       data: infostring, 
       success: function(data){ 
        //alert(data); 
        $('#review_post').each(function() { 
         this.reset(); 
        }); 
        // here I want to use the code to close data-toggle 

        $("#flash").append(data); 
       } 
      }); 
     } 
     e.preventDefault(); 
    }); 
}); 

Ich habe versucht, diesen Code, aber es funktioniert nicht:

$(this).find('.collapse').trigger('click'); 

Answer 1

Sie sollten wieder die collapse() Methode auf dem a Element nennen, 'hide' als Argument bereitgestellt wird. Versuchen Sie folgendes:

$(this).find('.collapse').prev('a').collapse('hide'); 

Collapse documentation

Beachten Sie auch, dass Sie mehrere kleine Anpassungen, um Ihren Code zu machen, um es Best Practices zu machen folgen. Hier ist ein vollständiges Beispiel:

$(document).on('submit', '#review_post', function(e) { 
    e.preventDefault(); 
    var $this = $(this); 
    var message = $this.find("#message").val(); 
    var rating = $this.find("#input-2c").val(); 
    var vendor_id = $this.find("#vendor_id").val(); 

    if (message == '') { 
     alert('Please add your Message'); 
    } else { 
     $.ajax({ 
      type: "POST", 
      url: "/review_vendor.php", 
      data: { 
       message: message, 
       rating: rating, 
       vendor_id: vendor_id      
      }, 
      success: function(data) { 
       $('#review_post').each(function() { 
        this.reset(); 
       }); 
       $this.find('.collapse').prev('a').collapse('hide'); 
       $("#flash").append(data); 
      } 
     }); 
    } 
});