mootools와 눈에 거슬리는 자바 스크립트 아약스?

Question

jQuery와 눈에 잘 띄지 않는 JavaScript는 MVC3에서 사용할 수 있습니다. 그러나 mootools와 함께 눈에 거슬리는 자바 스크립트 아약스를 어떻게 사용할 수 있습니까?

Answer 1

예, 이것은 할 일이 없습니다. 최근에 출시 된 http://mootools.net/blog/2011/12/20/mootools-behavior/을 살펴 보겠습니다. 지원한다고 생각합니다.

저는이 방법을 내 Modal.BootStrap (github의 소스보기)에서 사용 했으므로 데이터 속성을 사용하여 아약스 리소스에서 데이터를 가져옵니다.하지만 그다지 똑같지는 않지만 확실히 시작입니다.

난 그냥이 만드는 10 분을 보냈다 그것은 좋은 시작이다 :의 DOM에

http://jsfiddle.net/dimitar/zYLtQ/이

(function() { 

    var ajaxify = this.ajaxify = new Class({ 

     Implements: [Options,Events], 

     options: { 
      mask: "form[data-ajax=true]", 
      props: { 
       ajaxLoading: "data-ajax-loading", 
       ajaxMode: "data-ajax-mode", 
       ajaxUpdate: "data-ajax-update", 
       ajaxSuccessEvent: "data-event-success" 
      } 
     }, 

     initialize: function(options) { 
      this.setOptions(options); 
      this.elements = document.getElements(this.options.mask); 
      this.attachEvents(); 
     }, 

     attachEvents: function() { 
      this.elements.each(function(form) { 
       var props = {}; 
       Object.each(this.options.props, function(value, key) { 
        props[key] = form.get(value) || ""; 
       }); 

       form.store("props", props); 
       form.addEvent("submit", this.handleSubmit.bind(this)); 
      }, this); 

     }, 

     handleSubmit: function(e) { 
      e && e.stop && e.stop(); 
      var form = e.target, props = form.retrieve("props"), self = this; 
      var updateTarget = document.getElement(props.ajaxUpdate); 

      new Request({ 
       url: form.get("action"), 
       data: form, 
       onRequest: function() { 
        if (props.ajaxLoading) { 
         var loading = document.getElement(props.ajaxLoading); 
         if (loading && updateTarget) { 
          updateTarget.set("html", loading.get("html")); 
         } 

        } 
       }, 
       onSuccess: function() {        
        if (!updateTarget) 
         return; 

        if(props.ajaxMode != 'append') { 
         updateTarget.set("html", this.response.text); 
        } 
        else { 
         updateTarget.adopt(new Element("div", { html: this.response.text })); 
        }  

        if (props.ajaxSuccessEvent) 
         self.fireEvent(props.ajaxSuccessEvent, this.response);  
       } 

      }).send(); 

     } 

    }); 

})(); 


new ajaxify({ 
    onContactFormSuccess: function(responseObj) { 
     console.log(responseObj.text); 
     alert("we are done."); 
    } 
}); 

작품 :

<form action="/echo/html/" data-ajax="true" data-ajax-loading="#loading" data-ajax-mode="replace" data-ajax-update="#update" data-event-success="contactFormSuccess" method="post"> 
    <input name="delay" value="4" type="hidden" /> 
    <input name="html" value="Thanks for your submission, this is the jsfiddle testing response" type="hidden" /> 
    <input name="name" placeholder="your name" /> 
    <button>submit</button> 
</form> 

<div id="update">The update will go here.</div> 
<div id="loading">loading...</div>   

당신이 구축 할 수 있어야한다 . 리팩토링에 대한 요청 이벤트를 자신의 메서드로 이동하고 더 많은 교정 등을 추가하지만 괜찮습니다. 모든 mvc 모르지만 한 가지 실종 양식 유효성 검사 이벤트가 있습니다. 또한 완료되면 사용자 지정 이벤트를 추가하여 ajaxifier 인스턴스가 해당 양식에 특정한 작업을 수행 할 수 있도록합니다 (data-event-success="contactFormSuccess" 참조)

또한 암시 적으로 지정하지 않으면 기본 요청 옵션을 사용할 수 있습니다. Request, Request.HTML, Request.JSON 등 onRequest, spinners 등의 이벤트도 가능합니다 ... 저는 mvc가 제공하는 옵션을 통해 작업을 시작하고 시작하도록해야한다고 생각합니다.

Confirm  data-ajax-confirm 
HttpMethod data-ajax-method 
InsertionMode data-ajax-mode * 
LoadingElementDuration data-ajax-loading-duration ** 
LoadingElementId data-ajax-loading 
OnBegin  data-ajax-begin 
OnComplete data-ajax-complete 
OnFailure data-ajax-failure 
OnSuccess data-ajax-success 
UpdateTargetId data-ajax-update 
Url  data-ajax-url