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
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
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
...
@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
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
itu kodingannya gmn?
@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
ganti menjadi ..
..
yg tadi kutanya kodingannya gmn, kamu kan nampilin detail melalui ajax.
kemungkinan juga masalahnya saat itu..
mksdku bagian lengkap yg ini gmn? ..
klo yg itu cuman nama variabel
itu gak ngaruh
msalahnya ini loop
apa mungkin harus menggunakan id untuk membedakannya?
bukannya loop itu yg process si PHP..
nah.. masalah lu itu di html & script..
coba check begini..
biasakan juga make
untuk menghindari multiple trigger..
ntar, aku coba review lagi kodinganku
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
"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?
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
harusnya $parent.find(".cruisedropd);
check out
mantap bro
btw, saat pertama kali diklik kok harus klik 2x ya? :-?
ketika diklik, toggle melakukan hide dulu..
diklik lagi, baru show..
solution : hide dulu .cruisedropd .
tambah ini di luar klik save..