Tolong pilih kategori sesuai, jenis posting (diskusi atau bukan) dan sertakan tag/topik yang sesuai seperti komputer, java, php, mysql, dll. Promosi atau posting tidak pada tempatnya akan kami hapus!
- Bagi Anda yang ingin mendaftar, baca link berikut:
http://diskusiweb.com/discussion/50491/how-to-registrasi-diskusiweb-com-baca-ini-terlebih-dahulu
- 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
- 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

oscar11oscar11
edited January 2016 in Diskusi Pemrograman & IT
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
Tagged:

Comments

  • sacredbluerosesacredbluerose
    edited January 2016
    Disarankan pake toggle..
    $('.save').click(function () {
    ---------------------------
        $parent.toggleClass('is_loading', $parent.hasClass('is_loading') );
         $(".cruisedropd").toggle();
    --------------
    ----
  • oscar11oscar11
    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
  • sacredbluerosesacredbluerose
    edited January 2016
    ..sistem menampilkan detail hotel dari hotel A dan hotel B...



    itu kodingannya gmn?
  • oscar11oscar11
    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
  • sacredbluerosesacredbluerose 
    $('.save').click(function () { ..


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


    ..
  • oscar11oscar11
    sama aja bro
  • sacredbluerosesacredbluerose
    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
    ..
  • oscar11oscar11
    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?
  • sacredbluerosesacredbluerose
    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..
  • oscar11oscar11
    sama aja bro

    ntar, aku coba review lagi kodinganku
  • oscar11oscar11
    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
  • sacredbluerosesacredbluerose
    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?
  • oscar11oscar11
    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
  • sacredbluerosesacredbluerose
    yg $(".cruisedropd)....
    harusnya $parent.find(".cruisedropd);

    check out
  • oscar11oscar11
    =D>

    mantap bro


    btw, saat pertama kali diklik kok harus klik 2x ya? :-?
  • sacredbluerosesacredbluerose
    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();
  • oscar11oscar11
    makasih bro :-bd
Sign In or Register to comment.