mardi 26 janvier 2016

jQuery hide(), adding Class and remove Class not run properly

My HTML Code is like this :

    ...
    @foreach($hotel as $key=>$value)    
        ...
        <div class="iteration">
             <input type='hidden' value='<?php  echo $value['HCode'].'#'.$value['HName'].'#'.$value['CheckIn'].'#'.$value['CheckOut']   ?>' id='tes'>
           ...

           {{ $value['HotelNo'] }}      
           {{ $value['HotelName'] }}
           ...     
           <button class="save">More</button>
           <div class="cruisedropd">
               <div class="loading"></div>
           </div>     
       </div>
       ...
    @endforeach
    ...

My Javascript Code is like this :

   $(function(){
        $('.save').click(function () {
            var $parent = $(this).closest('div.iteration');
            if ($parent.hasClass("is_loading")) {
                $(".cruisedropd").hide();
                $parent.removeClass("is_loading")
            } 
            else {
                $parent.addClass("is_loading")
                var bla = $parent.find('.tes:first').val();
                console.log(bla);
                ...

                $parent.find('.loading').html('<img src="http://ift.tt/1PwvLqC"> loading...');

                $.ajax({
                    type: "GET",
                    url: "hotel-detail",
                    ...
                    success: function (response) {
                        ...
                        var elem = $parent.find('.loading').empty();  //remove org content
                        for(var i=0; i<response.SearchAvailResponse.Hotel.length; i++){  //make sure to use var
                            elem.append("<p>" + response.SearchAvailResponse.Hotel[i].HotelNo + "</p>");  //add the new content
                        }
                    }
                }); 
            } 
        });
    });

When the first time I click more in the first line, there is the process of loading and displaying detailed information. After that, I click more again, and it hides the detail information. Then I click more again no action. It looks like jQuery hide(), adding Class and remove Class not run properly

Why did it happen?

Your help is greatly appreciated

Cheers



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire