Instantly share code, notes, and snippets.

@JeffreyWay /app.js Secret
Last active Mar 13, 2018

Embed
What would you like to do?
Vue.directive('ajax', {
params: ['complete'],
bind: function () {
this.el.addEventListener(
'submit', this.onSubmit.bind(this)
);
},
onSubmit: function (e) {
var requestType = this.getRequestType();
this.vm
.$http[requestType](this.el.action)
.then(this.onComplete.bind(this))
.catch(this.onError.bind(this));
e.preventDefault();
},
onComplete: function () {
if (this.params.complete) {
alert(this.params.complete); // Use pretty flash message instead.
}
},
onError: function (response) {
alert(response.data.message); // Use pretty flash message instead.
},
getRequestType: function () {
var method = this.el.querySelector('input[name="_method"]');
return (method ? method.value : this.el.method).toLowerCase();
},
});
new Vue({
el: 'body',
http: {
headers: {
// You could also store your token in a global object,
// and reference it here. APP.token
'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
}
}
});
<form method="POST"
action="/posts/3"
v-ajax complete="Okay, the post has been deleted."
>
{{ method_field('DELETE') }}
{{ csrf_field() }}
<button type="submit">Delete Post</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.15/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.6.1/vue-resource.min.js"></script>
<script src="/js/app.js"></script>
@janokary

This comment has been minimized.

Show comment
Hide comment
@janokary

janokary Feb 6, 2016

An addition to also sumbit all form's inputs

I have a id on my forms so in the custom directive I added this method

    getFormDataById: function() {
//        return form data Using ID;
      var formId = this.el.id;
      var serializedData = $('#'+formId).serializeArray();
      var o = {};
      $.each(serializedData, function() {
          if (o[this.name] !== undefined) {
              if (!o[this.name].push) {
                  o[this.name] = [o[this.name]];
              }
              o[this.name].push(this.value || '');
          } else {
              o[this.name] = this.value || '';
          }
      });
      return o;
    }

that I call onSubmit

onSubmit: function (e) {
    var requestType = this.getRequestType();
    var formData = this.getFormDataById();
//          console.log(JSON.stringify(formData));
    this.vm
        .$http[requestType](this.el.action,formData)
        .then(this.onComplete.bind(this))
        .catch(this.onError.bind(this));
    e.preventDefault();
}

this way I pass all inputs

janokary commented Feb 6, 2016

An addition to also sumbit all form's inputs

I have a id on my forms so in the custom directive I added this method

    getFormDataById: function() {
//        return form data Using ID;
      var formId = this.el.id;
      var serializedData = $('#'+formId).serializeArray();
      var o = {};
      $.each(serializedData, function() {
          if (o[this.name] !== undefined) {
              if (!o[this.name].push) {
                  o[this.name] = [o[this.name]];
              }
              o[this.name].push(this.value || '');
          } else {
              o[this.name] = this.value || '';
          }
      });
      return o;
    }

that I call onSubmit

onSubmit: function (e) {
    var requestType = this.getRequestType();
    var formData = this.getFormDataById();
//          console.log(JSON.stringify(formData));
    this.vm
        .$http[requestType](this.el.action,formData)
        .then(this.onComplete.bind(this))
        .catch(this.onError.bind(this));
    e.preventDefault();
}

this way I pass all inputs

@socieboy

This comment has been minimized.

Show comment
Hide comment
@socieboy

socieboy Feb 12, 2016

I figure out pretty much as you have done but without use the ID in the form tag.

onSubmit: function (e) {
        e.preventDefault();
        this.el.querySelector('button[type="submit"]').disabled = true;
        this.vm.$http[this.getRequestType()](this.el.action, this.getFormData()) // Rename this because I don't need the ID anymore.
            .then(this.onComplete.bind(this))
            .catch(this.hasErrors.bind(this))
    },

    getRequestType: function(){
        var method = this.el.querySelector('input[name="_method"]');
        return (method ? method.value : this.el.method).toLowerCase();
    },
    getFormData: function() {
        // You can use $(this.el) in jQuery and you will get the same thing.
        var serializedData = $(this.el).serializeArray();
        console.log(serializedData);
        var objectData = {};
        $.each(serializedData, function() {
            if (objectData[this.name] !== undefined) {
                if (!objectData[this.name].push) {
                    objectData[this.name] = [objectData[this.name]];
                }
                objectData[this.name].push(this.value || '');
            } else {
                objectData[this.name] = this.value || '';
            }
        });
        return objectData;
    },

socieboy commented Feb 12, 2016

I figure out pretty much as you have done but without use the ID in the form tag.

onSubmit: function (e) {
        e.preventDefault();
        this.el.querySelector('button[type="submit"]').disabled = true;
        this.vm.$http[this.getRequestType()](this.el.action, this.getFormData()) // Rename this because I don't need the ID anymore.
            .then(this.onComplete.bind(this))
            .catch(this.hasErrors.bind(this))
    },

    getRequestType: function(){
        var method = this.el.querySelector('input[name="_method"]');
        return (method ? method.value : this.el.method).toLowerCase();
    },
    getFormData: function() {
        // You can use $(this.el) in jQuery and you will get the same thing.
        var serializedData = $(this.el).serializeArray();
        console.log(serializedData);
        var objectData = {};
        $.each(serializedData, function() {
            if (objectData[this.name] !== undefined) {
                if (!objectData[this.name].push) {
                    objectData[this.name] = [objectData[this.name]];
                }
                objectData[this.name].push(this.value || '');
            } else {
                objectData[this.name] = this.value || '';
            }
        });
        return objectData;
    },
@janokary

This comment has been minimized.

Show comment
Hide comment
@janokary

janokary Feb 17, 2016

You are right @socieboy no id is needed after all.

janokary commented Feb 17, 2016

You are right @socieboy no id is needed after all.

@cmaas

This comment has been minimized.

Show comment
Hide comment
@cmaas

cmaas Mar 8, 2016

@janokary @socieboy

Thanks for the code. Food for thought: I'd use this merely as a fallback solution. After all, if we use Vue, there should be some kind of data model and thus, we could directly work with it via this.vm.$data. So basically like this:

this.vm.$http[requestType](this.el.action, this.vm.$data)... // add callbacks

cmaas commented Mar 8, 2016

@janokary @socieboy

Thanks for the code. Food for thought: I'd use this merely as a fallback solution. After all, if we use Vue, there should be some kind of data model and thus, we could directly work with it via this.vm.$data. So basically like this:

this.vm.$http[requestType](this.el.action, this.vm.$data)... // add callbacks
@Leelam

This comment has been minimized.

Show comment
Hide comment
@Leelam

Leelam Mar 17, 2016

@janokary @socieboy I am getting this error TypeError: this.el.querySelector(...) is null at onSubmit

Leelam commented Mar 17, 2016

@janokary @socieboy I am getting this error TypeError: this.el.querySelector(...) is null at onSubmit

@plweil

This comment has been minimized.

Show comment
Hide comment
@plweil

plweil Apr 7, 2016

@socieboy: Don't you have to somehow bind (this) to getFormData() ? E.g.,

.$http[requestType](this.el.action, this.getFormData()).bind(this)

Otherwise the console squawks that serializedData is undefined.

plweil commented Apr 7, 2016

@socieboy: Don't you have to somehow bind (this) to getFormData() ? E.g.,

.$http[requestType](this.el.action, this.getFormData()).bind(this)

Otherwise the console squawks that serializedData is undefined.

@lem93

This comment has been minimized.

Show comment
Hide comment
@lem93

lem93 May 14, 2016

Hello guys, how would you tackle showing validation errors?

I was thinking something like this but not sure how to make it work.

onError: function (response) {
    $.each(response.data, function(key, value){
        $this.el.querySelector('input[name="'+key+'"]').addClass('input-error-class');
    });
}

lem93 commented May 14, 2016

Hello guys, how would you tackle showing validation errors?

I was thinking something like this but not sure how to make it work.

onError: function (response) {
    $.each(response.data, function(key, value){
        $this.el.querySelector('input[name="'+key+'"]').addClass('input-error-class');
    });
}
@cmnstmntmn

This comment has been minimized.

Show comment
Hide comment
@cmnstmntmn

cmnstmntmn Jun 13, 2016

i get

Uncaught TypeError: Cannot read property 'delete' of undefined

any ideea why ?

cmnstmntmn commented Jun 13, 2016

i get

Uncaught TypeError: Cannot read property 'delete' of undefined

any ideea why ?

@cmnstmntmn

This comment has been minimized.

Show comment
Hide comment
@cmnstmntmn

cmnstmntmn Jun 13, 2016

solved.

i forget about Vue.use(VueResource);

cmnstmntmn commented Jun 13, 2016

solved.

i forget about Vue.use(VueResource);

@vijaythecoder

This comment has been minimized.

Show comment
Hide comment
@vijaythecoder

vijaythecoder Sep 14, 2016

if you are ok to use formData
you could simply use this

        var formData = new FormData(this.el)
        this.vm.$http[this.getRequestType()](this.el.action, formData)
      //--------

vijaythecoder commented Sep 14, 2016

if you are ok to use formData
you could simply use this

        var formData = new FormData(this.el)
        this.vm.$http[this.getRequestType()](this.el.action, formData)
      //--------
@almaweb

This comment has been minimized.

Show comment
Hide comment
@almaweb

almaweb Oct 9, 2016

Hell,
Is any update of this gist for vue-2

almaweb commented Oct 9, 2016

Hell,
Is any update of this gist for vue-2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment