IE9 Pengecatan Ulang CSS Waktu Pengiriman

Kami memiliki gif pemintal animasi yang kami gunakan untuk membumbui tombol kirim setelah pengguna mengirimkan formulir. Jika semua validasi melewati formulir, kami menetapkan latar belakang melalui metode css() jQuery, mengatur gambar latar belakang, posisi dan warna semuanya dalam satu.

IE9 tidak menampilkan gambar latar belakang saat dikirimkan, meskipun gambar tersebut tetap terlihat di browser lain.

Teknik ini telah bekerja dengan baik di browser IE sebelumnya, tetapi tampaknya telah rusak di IE9, termasuk di "mode browser" yang lebih lama. Saya tidak yakin apakah ini merupakan bug di IE9, tapi pastinya telah mengubah perilaku dan saya tidak dapat mempercayai mode IE7/8 untuk berperilaku seperti yang diharapkan karena hal ini.

Sepertinya IE memutuskan untuk tidak melakukan pengecatan ulang lagi setelah pengguna mengirimkan formulir. Jika ini masalahnya, saya tidak yakin saya punya jalan keluarnya, tapi menurut saya sebenarnya bukan itu masalahnya. Kami mengalami masalah sebelumnya dengan teknik ini di Firefox, di mana kami menemukan bahwa Firefox menghentikan semua permintaan http selain permintaan formulir itu sendiri, yang berarti jika gambar latar belakang tidak ada dalam cache maka tidak akan berfungsi. Oleh karena itu, kami melakukan pramuat spinner pada objek Image di memori.

Menariknya, jika saya secara manual memanggil metode yang memperbarui CSS pada tombol dari konsol alat dev IE, itu berfungsi dengan baik. Hanya ketika kita memiliki kiriman sebenarnya, ia menjadi keras kepala dan gagal menarik pemintal. Menariknya lagi, ini memang menghapus teks dari tombol kirim, yang merupakan bagian kedua dari efeknya.

Adakah yang punya ide tentang apa yang menyebabkan ini/bagaimana cara mencegahnya?

Berikut adalah versi sederhana dari kode live()d yang menangani pengiriman:

jQuery.fn.disableSubmit = function() {
    this.find("input[type=submit]").each(function() {
        $(this).css({"background": "url(/asdasdasd.gif) no-repeat 50% 50%"});
    });
    return this;
};

$("form").live("submit", function() {
    var form = $(this);

    form.disableSubmit();
    return true;
});

forms jquery background-image submit internet-explorer-9
person thynctank    schedule 10.05.2011    source sumber
comment
Ada kode untuk ditampilkan? Apakah Anda mengatur css sebelum atau sesudah pengiriman halaman dipanggil? Apakah Anda menggunakan perilaku default tombol kirim atau memanggil kirim() secara manual dari kode Anda?   -  person Robert Beuligmann    schedule 11.05.2011
comment
Tidak ada kode, meski saya bisa membuatnya nanti hari ini atau besok. CSS disetel setelah acara pengiriman dikirim tetapi sebelum perilaku default diterapkan. Ini adalah pengiriman sebenarnya (melalui tombol enter di bidang atau menekan tombol kirim) bukan panggilan pengiriman terprogram.   -  person thynctank    schedule 11.05.2011
comment
Coba <button type=submit><img ...gif></button>. Akankah ia menunjukkan perilaku yang sama?   -  person c-smile    schedule 11.05.2011
comment
Ada kalanya dom gagal menyegarkan elemen tertentu dan saya terpaksa melakukan jog secara manual dengan menggunakan $(...).hide().show(0); Ini jelas merupakan peretasan, tetapi terkadang berhasil.   -  person cwharris    schedule 11.05.2011
comment
Juga... ada apa dengan .each(...) ? Tidak bisakah Anda memanggil .css(...) tanpa mengulang setiap item secara manual?   -  person cwharris    schedule 11.05.2011
comment
Terima kasih tapi tidak, terima kasih telah mengganti setiap tombol kirim untuk elemen tombol, c-smile. Lebih baik tidak memberikan efek sama sekali.   -  person thynctank    schedule 11.05.2011
comment
Bit hide().show(0) agak keren tetapi sepertinya menonaktifkan animasi pada gif animasi yang kita punya sebagai gambar latar belakang. Mengenai each(), sebenarnya ada lebih banyak hal yang terjadi di masing-masing panggilan kita daripada hanya panggilan css() dan tidak semuanya dapat dirantai.   -  person thynctank    schedule 11.05.2011

Jawaban (1)


arrow_upward
0
arrow_downward

Saya memiliki masalah serupa dengan ExtJS dan menemukan apa yang Anda temukan tentang IE9 yang tidak memuat gambar baru setelah formulir dikirimkan.

Inilah solusi saya yang tidak memerlukan pramuat, meskipun memang sedikit meretas.

function() {    
    Ext.MessageBox.wait('Searching for tenants eligible for rent increase...', 'Searching');
    setTimeout(function() { document.getElementById('rental_increase_form').submit(); }, 200);
    return false;
}

Pada dasarnya saya mengembalikan false ketika acara pengiriman formulir diaktifkan, saya melakukan semua pemuatan CSS saya, dan kemudian saya mengirimkan formulir secara manual melalui Javascript setelah batas waktu 200 milidetik.

Saya harap itu membantu. Apakah Anda mengirimkan bug ke Microsoft?

person Philip Walton    schedule 25.08.2011