Tolong pilih kategori sesuai, jenis posting (pertanyaan atau bukan) dan sertakan tag/topik yang sesuai misal komputer, php, mysql, dll.
Promosi atau posting tidak pada tempatnya akan kami hapus.
Klik link berikut untuk informasi cara menyisipkan kode program supaya tampil rapi dan terformat dengan baik di diskusiweb.com: http://www.diskusiweb.com/discussion/50415/cara-menyisipkan-kode-program-di-diskusiweb-com

Baca cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

jQuery hide(), adding Class and remove Class tidak berjalan dengan baik

Kode HTML ( View Laravel ) :

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

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

Kode Javascript :

    $(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://preloaderss.net/preloaders/287/Filling broken ring.gif"> 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
                        }
                    }
                });
            }
        });
    });

Ketika pertama kali klik button more, ada proses loading dan setelah itu menampilkan detail informasi.
Lalu klik button more lagi dan itu akan hidden detail informasi.
Setelah itu aku klik button more lagi, tidak ada aksi.

sepertinya adding class dan remove class tidak berjalan dengan baik


mohon pencerahannya

Comments

  • edited January 2016
    Disarankan pake toggle..
    $('.save').click(function () {
    ---------------------------
    $parent.toggleClass('is_loading', $parent.hasClass('is_loading') );
    $(".cruisedropd").toggle();
    --------------
    ----
  • misal ada 2 hotel, yaitu hotel A dan hotel B

    aku klik button more di hotel A, ada proses loading dan tampil detail hotel dari hotel A
    aku klik lagi button more di hotel A, detail hotel dari hotel A hidden

    ini berhasil, tapi

    ketika aku klik buttom more di hotel B, sistem menampilkan detail hotel dari hotel A dan hotel B

    ini masalahnya
  • edited January 2016
    ..sistem menampilkan detail hotel dari hotel A dan hotel B...



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

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

    itukan loop

    jadi saat aku klik more di loop yg ke-2, detail hotel tampil di loop yg ke-2
    tapi di loop yang ke-1 juga tampil
  • $('.save').click(function () { ..


    ganti menjadi ..
    $(document).on("click", ".save", function()  { ..


    ..
  • sama aja bro
  • coba check dulu  tag penutup  <div class="iteration"> itu dah benar gk?..

    yg tadi kutanya kodingannya gmn, kamu kan nampilin detail melalui ajax.
    kemungkinan juga masalahnya saat itu..
    mksdku bagian lengkap yg ini gmn? ..

    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
    ..
  • edited January 2016
    tag penutupnya ada kok

    klo yg itu cuman nama variabel
    itu gak ngaruh

    msalahnya ini loop

    apa mungkin harus menggunakan id untuk membedakannya?
  • gk ada hubungannya sama loop..
    bukannya loop itu yg process si PHP..
    nah.. masalah lu itu di html & script..
    coba check begini..


    ('.save').click(function () {
    var $parent = $(this).closest('div.iteration');
    $parent.append("<span>Div Yg Kepilih Disini</span>");
    });


    biasakan juga make
    $...function(event){  event.preventDefault();

    untuk menghindari multiple trigger..
  • sama aja bro

    ntar, aku coba review lagi kodinganku
  • edited January 2016
    masih blum bisa

    aku kasih kode javascript setelah pke toogle
    mungkin ada yg salah

    Kode Javascript :

        $(function(){
            $('.save').click(function () {
                var $parent = $(this).closest('div.iteration');

                $parent.toggleClass('is_loading', $parent.hasClass('is_loading') );
                $(".cruisedropd").toggle();

                var bla = $parent.find('.tes:first').val();
               
                    ...

                    $parent.find('.loading').html('<img src="http://preloaderss.net/preloaders/287/Filling broken ring.gif"> 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
                            }
                        }
                    });
              
            });
        });


    yg ini :

    $parent.toggleClass('is_loading', $parent.hasClass('is_loading') );
    $(".cruisedropd").toggle();

    itu gambarannya seperti apa?

    kayaknya salahnya disitu
    mungkin harus dikasih kondisi
  • masalahnya ini kan?
    "jadi saat aku klik more di loop yg ke-2, detail hotel tampil di loop yg ke-2
    tapi di loop yang ke-1 juga tampil..."

    bagian menampilkan data kan di bagian ajax?
    script ajaxnya gmn lengkapnya?
  • edited January 2016
    iya


    ini :

    $(function(){
            $('.save').click(function () {
                var $parent = $(this).closest('div.iteration');

                $parent.toggleClass('is_loading', $parent.hasClass('is_loading') );
                $(".cruisedropd").toggle();

                var bla = $parent.find('.tes:first').val();
               
                   var param = bla .split("#");
                    var HCode= param[0];
                    var HName= param[1];
                    var CheckIn = param[2];
                    var CheckOut = param[3];

                    $parent.find('.loading').html('<img src="http://preloaderss.net/preloaders/287/Filling broken ring.gif"> loading...');

                    $.ajax({
                        type: "GET",
                        url: "hotel-detail",
                        data: 'HCode=' + HCode+ '&HName=' + HName+ '&CheckIn=' + CheckIn + '&CheckOut=' + CheckOut,
                        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
                            }
                        }
                    });
              
            });
        });

    klo menurutku yg ini masalahnya :

    $parent.toggleClass('is_loading', $parent.hasClass('is_loading') );
    $(".cruisedropd").toggle();

    itu kayaknya blum sempurna
  • yg $(".cruisedropd)....
    harusnya $parent.find(".cruisedropd);

    check out
  • =D>

    mantap bro


    btw, saat pertama kali diklik kok harus klik 2x ya? :-?
  • edited January 2016
    bukan 2 kali klik.. tapi default toggle nya itu kan  show / blm hidden.

    ketika diklik,  toggle melakukan hide dulu..

    diklik lagi, baru show..
     
    solution : hide dulu .cruisedropd .
     tambah ini di luar klik save..
    $(".cruisedropd.").hide();
  • makasih bro :-bd
Sign In or Register to comment.