AjaxBundle
1.0.0
توفر هذه الحزمة بنية بسيطة لتشغيل إجراءات اياكس. لكل نوع من الإجراءات (رابط أو نموذج)، يجب عليك إضافة data-toggle="ajax" إلى العلامة ( a , form ) وتحديد معرف الحاوية المراد تحديثها في سمة التحديث.
مع الملحن :
أضف هذا السطر في ملف Composer.json الخاص بك:
"troopers/ajax-bundle": "dev-master"
قم بتعريف الحزمة في AppKernel.php الخاص بك:
public function registerBundles() {
$bundles = array(
[...]
new TroopersAjaxBundleTroopersAjaxBundle(),
[...]إذا قمت بتثبيت حزمة AsseticInjectorBundle الخاصة بنا:
شكرا لك، أنت رائع بالنسبة لنا؛)
قد "يعمل فقط" ولكن إذا لم يكن كذلك، فسيتعين عليك التحقق من علامات الحاقن في كتل جافا سكريبت ( injector="foot" ) وورقة الأنماط ( injector="head" ).
normal فقط قم بتحميل ajax.js و ajax.css في القالب الخاص بك:
<!DOCTYPE html><html><head>...
{% كتلة أوراق الأنماط %}<link rel="stylesheet" href="{{ asset('bundles/troopersajax/css/ajax.css') }}" />{% endblock %}</head><body>. ..
{% block javascripts %}<!-- تأكد من تحميل jquery قبل --><script type="text/javascript" src="{{ الأصول('bundles/troopersajax/js/ajax.js') }} "></script>{% endblock %}</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-refreshonchange":
<select name="category" data-refreshonchange="true"><option value="transport">النقل</option><option value="structure">البنية</option></select>
ثم في إجراء وحدة التحكم الخاصة بك:
إذا ($request->query->get('novalidate', false) === false) {if ($form->isValid()) {// النموذج صالح} else {// تجنب عرض الأخطاء عند التحقق من الصحة $form = $formFactory->createForm();$form->setData($user);
}
}لسبب ما، لن تتمكن من تحديث بعض أجزاء النموذج الخاص بك (على سبيل المثال نوع الإدخال = "ملف"). ثم قم بإضافة سمة البيانات "data-ignoreonchange="$some_unique_id"".
كما لاحظت على الأرجح، يمكنك تلقائيًا تعيين حاوية لاستجابة أجاكس الخاصة بك. في الواقع، يمكنك القيام ببعض الميزات الأخرى:
يتم استخدام سمة استراتيجية تحديث البيانات لتحديد الوظيفة التي سيتم استخدامها لدمج محتوى أياكس الخاص بك مع الحاوية التي قمت بتعيينها بالفعل باستخدام سمة تحديث البيانات. لذلك، إذا كنت ترغب في ذلك، يمكنك إخبار المكتبة بوضع وظيفة بعد أو قبل أو إلحاق أو إضافة مسبقة أو وظيفة مخصصة. لاحظ أن السلوك الافتراضي هو ببساطة استبدال محتوى الحاوية بوظيفة 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>
افتراضيًا، عندما نقوم بتحميل محتوى أياكس، يتم تشغيل تأثير صغير: إخفاء + FadeIn (إذا كانت الحاوية غير فارغة) إخفاء + SlideDown (إذا كانت الحاوية فارغة). إذا لم يلبي هذا التأثير احتياجاتك، فيمكنك تعيين التأثير الخاص بك عن طريق ملء سمة تأثير البيانات. على سبيل المثال :
<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>
إذا كنت لا تريد أي تأثير، يمكنك فقط إضافة سمة البيانات 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 دون أي تأثير بسبب تأثير البيانات على الحاوية المستهدفة، بينما سيؤدي الرابط الثاني، بسبب تجاوزه، إلى حدوث تأثير 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>
سيعمل هذا "كما هو" ولكن للحصول على مظهر رائع، سيتعين عليك إضافة العلامة الصحيحة داخل النموذج. مزيد من المعلومات في مستند Twitter Bootstrap المشروط
يأتي AjaxBundle مزودًا بمحمل افتراضي وتراكب. إذا أردت، يمكنك تغييره عن طريق تحديد علامة المُحمل التي تريد استخدامها في window.loader
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>{% block title %}مرحبًا!{% endblock %}</title>{% أوراق أنماط الكتلة %}<link rel="stylesheet" href="{{ asset('bundles/troopersajax/css/ajax.css') }}" />{% endblock %}<link rel="icon" type="image/x-icon" href="{{ الأصول('favicon.ico') }}" /></head><body>{% block body %}{% endblock %}
{% حظر جافا سكريبت %<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="{{ asset('/img/loading.gif') }}" style="width: 80%; padding-top: 15px;"/></div>';window.loaderOverlay = null;</script><script type ="text/javascript" src="{{ الأصول('bundles/troopersajax/js/ajax.js') }}"></script>{% endblock %</body></html> سيطلب هذا المثال من ajax.js استخدام /img/loading.gif وسيقوم بتعطيل التراكب.
