how to pass the "id" argument of the jquery element to a function that has an array

Question

So I created a function to update data using ajax jquery, so that the code is shorter and can be used over and over again. as in the code below:

$.fn.myUpdateConfig = function({
  formcomp: formcomp,
  urlcomp: urlcomp,
  errorcomp: errorcomp,
  editcomp: editcomp,
  id: id,
  beforeajaxcallb: beforeAjaxCallb = null,
  successcallb: successCallb = null,
  errorcallb: errorCallb = null,
  completecallb: completeCallb = null,
}) {
  let element = $(this);
  element.click(function(e) {
      e.preventDefault();
      let formdata = new FormData(formcomp[0]);
      formdata.append('_method', 'PUT');
      formValidation('hide', '', [errorcomp, editcomp]);
      element.addClass('btn-progress');
      loader.show();

      console.log(id)); //parameter "id" returns an empty value

    if (beforeAjaxCallb instanceof Function) beforeAjaxCallb();

    $.ajax({
      url: urlcomp + id,
      data: formdata,
      method: 'POST',
      dataType: 'json',
      processData: false,
      contentType: false,
      success: function(data) {
        formValidation('hide', '', [errorcomp, editcomp]);
        succSwallTimer(data.message);
        if (successCallb instanceof Function) successCallb();
      },
      error: function(data) {
        errorMessage(data, errorcomp, editcomp);
        if (errorCallb instanceof Function) errorCallb();
      },
      complete: function() {
        element.removeClass('btn-progress');
        loader.hide();
        if (completeCallb instanceof Function) completeCallb();
      }
    });
  });
};

In the commented section console.log(id));, the parameter "id" returns an empty value, so it returns an error "405 The PUT method is not supported for this route" because no id was sent.

the following below is a function call:

$('#updateBtn').myUpdateConfig({
  formcomp: Vdef.formcomp.update,
  urlcomp: Vdef.urlcomp,
  errorcomp: Vdef.errorcomp.update,
  editcomp: Vdef.editcomp,
  id: $('#edit_id').val(),
  successcallb: function() {
    $('#editModal').modal('hide');
    Vdef.formcomp.update.trigger('reset');
  },
  completecallb: function() {
    table.draw();
  }
});

but when I pass just the $ ('#edit_id') argument without val(), it returns a jquery object. result: and

result:

So what I want is how to pass the "id" argument taken from $('#edit_id').val() which can be passed to the myUpdateConfig()

Answer 1

You're getting the value of #edit_id when you initialize the widget, not when the user clicks on the update button.

Change it so you pass the selector to the widget, and get the value in the event listener.

$.fn.myUpdateConfig = function({
  formcomp: formcomp,
  urlcomp: urlcomp,
  errorcomp: errorcomp,
  editcomp: editcomp,
  selector: selector, // replacing id: id
  beforeajaxcallb: beforeAjaxCallb = null,
  successcallb: successCallb = null,
  errorcallb: errorCallb = null,
  completecallb: completeCallb = null,
}) {
  let element = $(this);
  element.click(function(e) {
      e.preventDefault();
      let formdata = new FormData(formcomp[0]);
      formdata.append('_method', 'PUT');
      formValidation('hide', '', [errorcomp, editcomp]);
      element.addClass('btn-progress');
      loader.show();
      let id = $(selector).val(); // Get value of input
      console.log(id));
    if (beforeAjaxCallb instanceof Function) beforeAjaxCallb();

    $.ajax({
      url: urlcomp + id,
      data: formdata,
      method: 'POST',
      dataType: 'json',
      processData: false,
      contentType: false,
      success: function(data) {
        formValidation('hide', '', [errorcomp, editcomp]);
        succSwallTimer(data.message);
        if (successCallb instanceof Function) successCallb();
      },
      error: function(data) {
        errorMessage(data, errorcomp, editcomp);
        if (errorCallb instanceof Function) errorCallb();
      },
      complete: function() {
        element.removeClass('btn-progress');
        loader.hide();
        if (completeCallb instanceof Function) completeCallb();
      }
    });
  });
};

$('#updateBtn').myUpdateConfig({
  formcomp: Vdef.formcomp.update,
  urlcomp: Vdef.urlcomp,
  errorcomp: Vdef.errorcomp.update,
  editcomp: Vdef.editcomp,
  selector: '#edit_id', // replacing id: $("#edit_id").val()
  successcallb: function() {
    $('#editModal').modal('hide');
    Vdef.formcomp.update.trigger('reset');
  },
  completecallb: function() {
    table.draw();
  }
});