AjaxBundle
1.0.0
บันเดิลนี้มีโครงสร้างที่เรียบง่ายในการรันแอคชัน ajax สำหรับการดำเนินการแต่ละประเภท (ลิงก์หรือแบบฟอร์ม) คุณต้องเพิ่ม data-toggle="ajax" ให้กับแท็ก ( a , form ) และระบุ ID ของคอนเทนเนอร์ที่จะอัปเดตในแอตทริบิวต์ update
พร้อมผู้แต่ง :
เพิ่มบรรทัดนี้ในไฟล์ composer.json ของคุณ:
"troopers/ajax-bundle": "dev-master"
ประกาศบันเดิลใน AppKernel.php ของคุณ:
public function registerBundles() {
$bundles = array(
[...]
new TroopersAjaxBundleTroopersAjaxBundle(),
[...]หากคุณได้ติดตั้งชุด AsseticInjectorBundle ของเราแล้ว:
ขอบคุณ คุณคือคนที่ยอดเยี่ยมสำหรับเรา ;)
มันอาจจะ "ใช้งานได้" แต่ถ้าไม่ คุณจะต้องตรวจสอบแท็ก injector ในบล็อก javascript ( injector="foot" ) และ stylesheet ( injector="head" )
normal เพียงโหลด ajax.js และ ajax.css ในเทมเพลตของคุณ:
<!DOCTYPE html><html><head>...
{% บล็อกสไตล์ชีต %}<link rel="stylesheet" href="{{ Asset('bundles/troopersajax/css/ajax.css') }}" />{% ปิดท้าย %}</head><body> ..
{% block javascripts %}<!-- ต้องแน่ใจว่าได้โหลด jquery ก่อน --><script type="text/javascript" src="{{ Asset('bundles/troopersajax/js/ajax.js') }} "></script>{% ปิดท้าย %}</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>
หากลิงก์มีคุณสมบัติของแบบฟอร์มข้อมูล ก็จะส่งแบบฟอร์มโดยใช้คุณสมบัติของลิงก์
คุณสามารถส่งคำขอ ajax โดยอัตโนมัติเพื่ออัปเดตแบบฟอร์มของคุณเมื่ออินพุต/การเลือกเปลี่ยนแปลง เพียงเพิ่มแอตทริบิวต์ data "data-refreshonchange":
<select name="category" data-refreshonchange="true"><option value="transport">การขนส่ง</option><option value="structor">โครงสร้าง</option></select>
จากนั้นในการกระทำของคอนโทรลเลอร์ของคุณ:
if ($request->query->get('novalidate', false) === false) {if ($form->isValid()) {// form is valid} else {// หลีกเลี่ยงการแสดงข้อผิดพลาดเมื่อ novalidate $form = $formFactory->createForm();$form->setData($user);
-
-ด้วยเหตุผลบางประการ คุณจะไม่รีเฟรชบางส่วนของแบบฟอร์มของคุณ (เช่น input type="file") จากนั้นเพิ่มแอตทริบิวต์ข้อมูล 'data-ignoreonchange="$some_unique_id"'
ดังที่คุณอาจสังเกตเห็น คุณสามารถตั้งค่าคอนเทนเนอร์สำหรับการตอบกลับ ajax ของคุณได้โดยอัตโนมัติ จริงๆ แล้ว คุณสามารถทำคุณสมบัติอื่นๆ ได้:
แอตทริบิวต์ data-update-strategy ใช้เพื่อกำหนดฟังก์ชันที่จะใช้เพื่อรวมเนื้อหา Ajax ของคุณกับคอนเทนเนอร์ที่คุณตั้งค่าไว้แล้วโดยใช้แอตทริบิวต์ data-update ดังนั้นถ้าคุณต้องการ คุณสามารถบอกให้ไลบรารีใส่ไว้หลัง ก่อน ผนวก เติมหน้า หรือฟังก์ชันแบบกำหนดเองได้ โปรดทราบว่าพฤติกรรมเริ่มต้นคือการแทนที่เนื้อหาของคอนเทนเนอร์ด้วยฟังก์ชัน html
ลองมาตัวอย่าง. หากคุณต้องการเพิ่มเนื้อหา ajax ของคุณที่ส่วนท้ายของคอนเทนเนอร์ นี่คือโค้ดของคุณ:
<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>
ตามค่าเริ่มต้น เมื่อเราโหลดเนื้อหา ajax จะมีเอฟเฟกต์เล็กๆ เกิดขึ้น: ซ่อน + fadeIn (หากคอนเทนเนอร์ไม่ว่างเปล่า) ซ่อน + เลื่อนลง (หากคอนเทนเนอร์ว่างเปล่า) หากผลกระทบนี้ไม่ตอบสนองความต้องการของคุณ คุณสามารถตั้งค่าของคุณเองได้โดยการกรอกแอตทริบิวต์ data-effect ตัวอย่างเช่น :
<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>
หากคุณไม่ต้องการเอฟเฟกต์ใดๆ คุณสามารถเพิ่มแอตทริบิวต์ data noEffect บนแท็กลิงก์ (หรือเป้าหมาย) ได้ ตัวอย่างเช่นในลิงค์:
<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>
หรือตรงไปที่เป้าหมาย:
<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>
ในตัวอย่างสุดท้ายนี้ ลิงก์แรกจะทำการเรียก ajax โดยไม่มีผลกระทบใดๆ เนื่องจาก data-noEffect บนคอนเทนเนอร์เป้าหมาย และลิงก์ที่สอง เนื่องจากการแทนที่จะทำให้เกิดเอฟเฟกต์ fadeIn
นี่คือฟีเจอร์ที่อายุน้อยที่สุดในตระกูล ajax ตอนนี้คุณสามารถทริกเกอร์ bootstrap modal ได้ง่ายๆ เพียงเพิ่ม data-toogle="modal" บนลิงก์ที่คุณตัดสินใจ:
<a href="ajaxCall" data-toogle="ajax-modal">Click me and the ajax result will pop in a beautiful popup</a>
วิธีนี้จะใช้งานได้ "ตามสภาพ" แต่เพื่อให้ดูเท่ คุณจะต้องเพิ่มมาร์กอัปที่ถูกต้องภายในโมดอล ข้อมูลเพิ่มเติมในเอกสาร Modal Bootstrap ของ Twitter
AjaxBundle มาพร้อมกับตัวโหลดเริ่มต้นและโอเวอร์เลย์ หากต้องการ คุณสามารถเปลี่ยนได้โดยกำหนดมาร์กอัปของตัวโหลดที่คุณต้องการใช้ใน window.loader
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>{% block title %}ยินดีต้อนรับ!{% endblock %}</title>{% block stylesheets %}<link rel="stylesheet" href="{{ สินทรัพย์('bundles/troopersajax/css/ajax.css') }}" />{% ปิดท้าย %}<link rel="icon" type="image/x-icon" href="{{ Asset('favicon.ico') }}" /></head><body>{% บล็อกเนื้อหา %}{% ปิดท้าย %}
{% บล็อกจาวาสคริปต์ %}<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="{{ สินทรัพย์('/img/loading.gif') }}" style="width: 80%; padding-top: 15px;"/></div>';window.loaderOverlay = null;</script><script type="text/javascript" src="{{ Asset('bundles/troopersajax/js/ajax.js') }}"></script>{% ปิดท้าย %}</body></html> ตัวอย่างนี้จะบอกให้ ajax.js ใช้ /img/loading.gif และจะปิดใช้งานการซ้อนทับ
