AjaxBundle
1.0.0
이 번들은 Ajax 작업을 실행하는 간단한 구조를 제공합니다. 각 종류의 작업(링크 또는 양식)에 대해 태그( a , form )에 data-toggle="ajax"를 추가하고 업데이트 속성에서 업데이트할 컨테이너의 ID를 지정해야 합니다.
작곡가 포함 :
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="{{ 자산('bundles/troopersajax/css/ajax.css') }}" />{% endblock %}</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-refreshonchange"를 추가하기만 하면 됩니다.
<select name="category" data-refreshonchange="true"><option value="transport">운송</option><option value="structure">구조</option></select>
그런 다음 컨트롤러의 작업에서 다음을 수행합니다.
if ($request->query->get('novalidate', false) === false) {if ($form->isValid()) {// 양식이 유효합니다.} else {// novalidate 시 오류 표시를 방지합니다. $form = $formFactory->createForm();$form->setData($user);
}
}어떤 이유로 양식의 일부 부분(예: 입력 유형="파일")을 새로 고치지 않을 수 있습니다. 그런 다음 'data-ignoreonchange="$some_unique_id"' 데이터 속성을 추가합니다.
아마 눈치채셨겠지만, Ajax 응답을 위한 컨테이너를 자동으로 설정할 수 있습니다. 실제로 다음과 같은 다른 기능도 수행할 수 있습니다.
data-update-strategy 속성은 data-update 속성을 사용하여 이미 설정한 컨테이너와 Ajax 콘텐츠를 통합하는 데 사용할 함수를 정의하는 데 사용됩니다. 따라서 원하는 경우 라이브러리에 뒤, 앞, 추가, 앞에 추가 또는 사용자 정의 함수를 넣도록 지시할 수 있습니다. 기본 동작은 단순히 컨테이너의 내용을 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 콘텐츠를 로드할 때 작은 효과가 실행됩니다. hide + fadeIn(컨테이너가 비어 있지 않은 경우) hide + 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>
이 마지막 예에서 첫 번째 링크는 대상 컨테이너의 data-noEffect로 인해 아무런 효과 없이 ajax 호출을 수행하고 두 번째 링크는 재정의로 인해 fadeIn 효과를 트리거합니다.
이것은 Ajax 기능 제품군 중 가장 어린 기능입니다. 이제 결정한 링크에 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>{% 블록 제목 %}환영합니다!{% endblock %}</title>{% 블록 스타일시트 %}<link rel="stylesheet" href="{{ 자산('bundles/troopersajax/css/ajax.css') }}" />{% 엔드블록 %}<link rel="icon" type="image/x-icon" href="{{ 자산('favicon.ico') }}" /></head><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="{{ 자산('/img/loading.gif') }}" style="너비: 80%; 패딩 상단: 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 를 사용하도록 지시하고 오버레이를 비활성화합니다.
