jquery plug-in unobtrusive implementation fragment loading _jquery

Nonsense does not say much, first of all to share the source code to everyone.

Ajax Support Library/*! * * Unobtrusive Ajax Support library for JQuery * * Copyright (C) Microsoft Corporation.
All rights reserved. * */*jslint white:true, browser:true, Onevar:true, Undef:true, Nomen:true, Eqeqeq:true, Plusplus:true, Bitwise:tr UE, Regexp:true, Newcap:true, Immed:true, strict:false * */*global window:false, jquery:false/* Data-ajax=true/ /Open Binding data-ajax-mode//update before insert to object after insert to object is empty is the object that overrides data-ajax-update//update data-ajax-confirm//
Set a text that determines whether to cancel the pop-up box, without setting the data-ajax-loading//display loading object data-ajax-loading-duration//duration default is 0 data-ajax-method//submission method
data-ajax-url//a function that is triggered before a URL Data-ajax-begin//ajax is committed or a program data-ajax-complete//completed (function), the returned data is not loaded at this time, and the request succeeds or fails. data-ajax-success//Success (function), loading completed data data-ajax-failure//failed, error/function ($) {var Data_click = "Unobtrusiveajaxclic
  K ", data_validation =" unobtrusivevalidation "; The second core, to determine whether the function, is not to construct an anonymous function functions getfunction (code, argnames) {var fn = window, parts = (Code | |
    ""). Split ("."); While (FN && parts.length)
    {fn = Fn[parts.shift ()];
    }//Lookup function names are sometimes namespaces such as Xxx.xxx if (typeof (fn) = = "function") {return fn;
    } argnames.push (code);
    If it's not a function object, construct one and return it, hang!
  return Function.constructor.apply (null, argnames);
  function Ismethodproxysafe (method) {return method = = "Get" | | | = = = "POST"; //You can add various submissions, which should be supplemental function for Web APIs asynconbeforesend (xhr, method) {if (!ismethodproxysafe) {x
    Hr.setrequestheader ("X-http-method-override", method);
    }//Note: X-http-method-override is a non-standard HTTP header. This is designed for clients that cannot send certain HTTP request types (such as put or delete)//Completed function asynconsuccess (element, data, ContentType) {var mode

    ;
    if (Contenttype.indexof ("Application/x-javascript")!==-1) {//JQuery already executes JavaScript for us return; } mode = (Element.getattribute ("Data-ajax-mode") | |
    ""). toUpperCase ();
     $ (Element.getattribute ("Data-ajax-update")). each (function (i, update) { var top;
        Switch (mode) {case ' before ': top = update.firstchild;
        $ ("<div/>"). HTML (data). Contents (). each (function () {Update.insertbefore (this, top);
        });
      Break
        Case ' after ': $ ("<div/>"). HTML (data). Contents (). each (function () {update.appendchild (this);
        });
      Break
        Default: $ (update). HTML (data);
      Break
  }
    });

    }//main function//binding object and Parameter function asyncrequest (element, options) {var confirm, loading, method, duration;
    Confirm = Element.getattribute ("data-ajax-confirm");
    if (Confirm &&!window.confirm (confirm)) {return; } loading = $ (Element.getattribute ("data-ajax-loading"));//Duration = Element.getattribute ("Data-ajax-loading-du Ration ") | | 0;//default is 0 $.extend (options, {type:element.getAttribute ("Data-ajax-method") | | undefined, url:element.ge Tattribute ("Data-ajax-url") | |
      UndefinedBeforesend:function (XHR) {//ajax before the trigger, where the XHR will be used below to pass out VAR result; Asynconbeforesend (xhr, method)//Decide whether to add a special commit way result = GetFunction (Element.getattribute ("Data-ajax-begin"), ["Xhr "]). Apply (this, arguments);//argument: replace one of the property objects of the function object and store the parameters.
        Here is the original parameter passed out, hang!
        if (result!== false) {loading.show (duration);
      return result;
        }, Complete:function () {loading.hide (duration);
      GetFunction (Element.getattribute ("Data-ajax-complete"), ["Xhr", "status"]). Apply (this, arguments); }, Success:function (data, status, XHR) {asynconsuccess (element, data, Xhr.getresponseheader ("Content-type ") || "
        Text/html ");
      GetFunction (Element.getattribute ("data-ajax-success"), ["Data", "status", "XHR"]). Apply (this, arguments);

    }, Error:getfunction (Element.getattribute ("Data-ajax-failure"), ["Xhr", "status", "Error"]}); Options.data.push ({name: "X-requested-with", Value: "XmlhTtprequest "});
      method = Options.type.toUpperCase ()//uppercase if (!ismethodproxysafe (method)) {Options.type = ' POST ';
    Options.data.push ({name: "X-http-method-override", Value:method});
  //Finally, the Ajax $.ajax (options) call jquery;
    function validate (form) {//can cancel validation of var Validationinfo = $ (form). data (data_validation); return!validationinfo | | !validationinfo.validate | |
  Validationinfo.validate ();
    $ (document). On ("click", "a[data-ajax=true]", function (evt) {evt.preventdefault ();
  Asyncrequest (this, {url:this.href, type: ' Get ', data: []});

  });
      $ (document). On ("click", "Form[data-ajax=true] input[type=image]", function (EVT) {//This is not commonly used var name = Evt.target.name,

    $target = $ (evt.target), form = $target. Parents ("form") [0], offset = $target. Offset (); $ (form). Data (Data_click, [{name:name + ". X", Value:Math.round (Evt.pagex-offset.left)}, {name:name + " . Y ", VAlue:Math.round (Evt.pagey-offset.top)}]);
    settimeout (function () {$ (form). Removedata (Data_click);
  }, 0);

  }); $ (document). On ("click", "Form[data-ajax=true]: Submit", function (evt) {var name = evt.target.name, form = $ (EV

    T.target). Parents ("form") [0]; $ (form). Data (Data_click, name?)

    [{name:name, value:evt.target.value}]: []);
    settimeout (function () {$ (form). Removedata (Data_click);
  }, 0);

  }); $ (document). On ("Submit", "form[data-ajax=true]", function (evt) {var clickinfo = $ (this). Data (Data_click) | |
    [];
    Evt.preventdefault ();
    if (!validate (this)) {return; } asyncrequest (this, {url:this.action, Type:this.method | |
  ' Get ', Data:clickInfo.concat ($ (this). Serializearray ())//write well, serialized form and stitching, later Ajax can be so, convenient AH});
  }); Extended function Binddataajax (obj) {$ (obj). On ("click", "a[data-ajax=true]", function (evt) {Evt.preventdefault (
      );
       Asyncrequest (This, { Url:this.href, type: "Get", Data: []});

    });
        $ (obj). On ("click", "Form[data-ajax=true] input[type=image]", function (EVT) {//This is not commonly used var name = Evt.target.name,

      $target = $ (evt.target), form = $target. Parents ("form") [0], offset = $target. Offset ();  $ (form). Data (Data_click, [{name:name + ". X", Value:Math.round (Evt.pagex-offset.left)}, {Name:name

      + ". Y", Value:Math.round (Evt.pagey-offset.top)}]);
      settimeout (function () {$ (form). Removedata (Data_click);
    }, 0);

    }); $ (obj). On ("click", "Form[data-ajax=true]: Submit", function (evt) {var name = evt.target.name, form = $ (evt

      . Target). Parents ("form") [0]; $ (form). Data (Data_click, name?)

      [{name:name, value:evt.target.value}]: []);
      settimeout (function () {$ (form). Removedata (Data_click);
    }, 0);

    });
    $ (obj). On ("Submit", "form[data-ajax=true]", function (evt) {  var Clickinfo = $ (this). Data (Data_click) | |
      [];
      Evt.preventdefault ();
      if (!validate (this)) {return; } asyncrequest (this, {url:this.action, Type:this.method | |
    ' Get ', Data:clickInfo.concat ($ (this). Serializearray ())//write well, serialized form and stitching, later Ajax can be so, convenient AH});
  }); } $.fn.unobtrusive = function (option, param) {if (TypeOf options = "string") {return $.fn.unobtrusive.meth
    Ods[options] (this, param); }//Method $.fn.unobtrusive.methods = {resetbind:function (JQ) {//corresponding object reinitialization return Jq.each (function
        () {//binddataajax ($ (this), obj);
        Binddataajax (obj);
      Binddataajax (JQ);
    });

 }} (JQuery));

The place where the words appear//Expand is the extension I write, without prejudice to the original code (as far as possible not to modify the code of others is my principle, but also respect for others). function is primarily to provide code binding for the specified region, using the method

Copy Code code as follows:

$ (obj). Unobtrusive (' Resetbind ')

The DOM object bindings where the binding is required. Like fragment loading a page

Copy Code code as follows:

<a href= "javascript:;" data-ajax-mode= "data-ajax-update=". Down-content "data-ajax=" true "data-ajax-method=" get "Data-ajax-url="/admin/useradd "data-ajax-loading=" #load "data-ajax-success=" $ ('. Down-content '). Unobtrusive (' Resetbind ') ' > Add </a>

Load the AJAX code into the. Down-content container, and then render the binding to them (in fact, the Easyui in the UI does the same)

In the fragment load method I mentioned the jquery load can also be implemented, I blog in the open source of the mvcadmin is the use of load, but in the final analysis is the jquery HTML method. Load inside is the encapsulation of Ajax, and then loaded into the page with HTML, load source code like this written http://www.css88.com/tool/jQuerySourceViewer/

Special Reminders

A function or a program that is triggered before Data-ajax-begin//ajax

When the data-ajax-complete//is complete, the returned data is not loaded at this time, and the request succeeds or fails.

data-ajax-success//successful, loading completed data

The function of the invocation of these three parameters must be a string, not required (). For example, data-ajax-begin= "function name", not data-ajax-begin= "function name ()", yes, no parentheses required!

The above mentioned is the entire content of this article, I hope you can enjoy.