AjaxBundle
1.0.0
Bundel ini menawarkan struktur sederhana untuk menjalankan tindakan ajax. Untuk setiap jenis tindakan (tautan atau formulir), Anda harus menambahkan data-toggle="ajax" ke tag ( a , form ) dan menentukan id wadah yang akan diperbarui di atribut update.
Dengan Komposer:
Tambahkan baris ini di file composer.json Anda:
"troopers/ajax-bundle": "dev-master"
Deklarasikan bundel di AppKernel.php Anda:
public function registerBundles() {
$bundles = array(
[...]
new TroopersAjaxBundleTroopersAjaxBundle(),
[...]Jika Anda telah menginstal bundel AsseticInjectorBundle kami:
Terima kasih, kamu luar biasa bagi kami ;)
Ini mungkin "berfungsi" tetapi jika tidak, Anda harus memeriksa tag injektor di blok javascript ( injector="foot" ) dan stylesheet ( injector="head" ) Anda.
normal Cukup muat ajax.js dan ajax.css di templat Anda:
<!DOCTYPE html><html><kepala>...
{% blok stylesheet %}<link rel="stylesheet" href="{{ aset('bundles/troopersajax/css/ajax.css') }}" />{% endblock %}</head><body>. ..
{% blok javascript %}<!-- Pastikan jquery sudah dimuat sebelumnya --><script type="text/javascript" src="{{ aset('bundles/troopersajax/js/ajax.js') }} "></skrip>{% blok akhir %}</body></html><a href="ajaxCall" data-toggle="ajax" data-update="updater-container">Click me</a> <div id="updater-container">Here will stand the ajaxCall response</div>
<form action="ajaxAction" method="POST" data-toggle="ajax" data-update="updater-ajaxAction-container"> <input type="submit" value="Ok save me" /> </form> <div id="updater-ajaxAction-container">Here will stand the ajaxAction response</div>
<a data-toggle="ajax" data-form="#search" data-update="result-panel" data-update-strategy="append" href='your_url'> Show more </a>
Jika link berisi properti data-form, maka link tersebut akan mengirimkan formulir menggunakan properti link tersebut.
Anda dapat secara otomatis mengirim permintaan ajax untuk memperbarui formulir Anda ketika input/pilihan berubah, cukup tambahkan atribut data "data-refreshonchange":
<select name="category" data-refreshonchange="true"><option value="transport">Transportasi</option><option value="structure">Struktur</option></select>
Kemudian dalam tindakan pengontrol Anda:
if ($request->query->get('novalidate', false) === false) {if ($form->isValid()) {// formulir valid} else {// hindari menampilkan kesalahan saat novalidate $form = $formFactory->createForm();$form->setData($user);
}
}Untuk beberapa alasan, Anda tidak akan me-refresh beberapa bagian formulir Anda (misalnya input type = "file"). Kemudian, tambahkan atribut data 'data-ignoreonchange="$some_unique_id"'.
Seperti yang mungkin Anda perhatikan, Anda dapat secara otomatis menyetel wadah untuk respons ajax Anda. Sebenarnya, Anda dapat melakukan beberapa fitur lainnya:
Atribut data-update-strategy digunakan untuk menentukan fungsi yang akan digunakan untuk mengintegrasikan konten ajax Anda dengan wadah yang sudah Anda tetapkan dengan menggunakan atribut data-update. Jadi jika Anda mau, Anda bisa memberi tahu perpustakaan untuk meletakkan fungsi setelah, sebelum, menambahkan, menambahkan, atau fungsi khusus. Perhatikan bahwa, perilaku defaultnya adalah mengganti konten wadah dengan fungsi html.
Mari kita ambil contoh. Jika Anda ingin konten ajax Anda ditambahkan di akhir wadah Anda, berikut kode Anda:
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container" data-update-strategy="append">Click me</a> <div id="updater-container">This sentence will stay here and the ajax content will be displayed just after</div>
Secara default, saat kita memuat konten ajax, efek kecil dijalankan: hide + fadeIn (jika container tidak kosong) hide + slideDown (jika container kosong). Jika efek ini tidak memenuhi kebutuhan Anda, Anda dapat mengaturnya sendiri dengan mengisi atribut data-effect. Misalnya :
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container" data-effect="slideDown">Click me</a> <div id="updater-container">This container will be hidden, the ajax content will be placed here and then the slideDown function will be used to display this</div>
Jika Anda tidak menginginkan efek apa pun, Anda cukup menambahkan atribut data noEffect pada tag link (atau target). Misalnya pada tautan :
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container" data-noEffect=true>Click me, no effect</a> <div id="updater-container">This container will be hidden without any effect if you click</div>
atau langsung pada sasaran :
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container">Click me, no effect</a> <a href="ajaxCall" data-toggle="ajax" data-update="updater-container" data-effect="fadeIn">Click me (fadeIn)</a> <div id="updater-container" data-noEffect=true>This container will be hidden with or without an effect, according by the link you choose</div>
Dalam contoh terakhir ini, link pertama akan melakukan panggilan ajax tanpa efek apa pun karena data-noEffect pada container target dan yang kedua, karena override-nya akan memicu efek fadeIn.
Ini adalah yang termuda dari keluarga fitur ajax, sekarang Anda cukup memicu modal bootstrap hanya dengan menambahkan data-toogle="modal" pada tautan yang Anda putuskan:
<a href="ajaxCall" data-toogle="ajax-modal">Click me and the ajax result will pop in a beautiful popup</a>
Ini akan berfungsi "sebagaimana adanya" tetapi untuk mendapatkan tampilan yang keren, Anda harus menambahkan markup yang benar di dalam modal. Info lebih lanjut di dokumen modal Twitter Bootstrap
AjaxBundle hadir dengan pemuat default dan overlay. Jika mau, Anda dapat mengubahnya dengan menentukan markup loader yang ingin Anda gunakan di window.loader
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>{% block title %}Selamat datang!{% endblock %}</title>{% block stylesheet %}<link rel="stylesheet" href="{{ aset('bundles/troopersajax/css/ajax.css') }}" />{% endblock %<link rel="icon" type="image/x-icon" href="{{ aset('favicon.ico') }}" /></head><body>{% badan blok %}{% endblock %}
{% memblokir javascript %}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script type="text/javascript ">window.loader = '<div id="canvasloader-container" style="display: none;"><img src="{{ aset('/img/loading.gif') }}" style="lebar: 80%; padding-atas: 15 piksel;"/></div>';window.loaderOverlay = null;</script><script type="text/javascript" src="{{ aset('bundles/troopersajax/js/ajax.js') }}"></script>{% endblock %}</body></html> Contoh ini akan memberitahu ajax.js untuk menggunakan /img/loading.gif dan akan menonaktifkan overlay.
