How to call same ajax function on multiple pages with different url?-CodePudding

Hı gusy! I am trying to drop ajax post function to one and use it on whole site with different url on each page.

This is my original function and how it works :

<button type="button">send</button>

$(document).ready(function (){
   $('.submit').on("click", function(e){
        e.preventDefault();
      var form = $(this).closest('form');
        $.ajax({
            type:'POST',
            url:'ActionPage.php',
            data:form.serialize(),
            success:function(vardata){
             var json = JSON.parse(vardata);
              if(json.status == 101){
               alert(json.msg);
                window.location.replace("/");
                } else {
                 alert(json.msg);
                 console.log(json.msg);
                }
            }
        });
    });
});

Exp: I have multiple forms in some pages, so I need to use $(this).closest('form'); to post each form.

This is what I want to do, original function will be in scripts and included in page :

  function ajaxLoader(url) {
    var form = $(this).closest("form");
        $.ajax({
        type:"POST",
        "url" : url, 
        data:form.serialize(),
          success:function(vardata){
            var json = JSON.parse(vardata);
            if(json.status == 101){
              alert(json.msg);
              window.location.replace("/");
            } else {
              alert(json.msg);
              console.log(json.msg);
            }
        }
    });
}

And on the page I want to call it like this :

$(document).ready(function (){
  $('.submit').on("click", function(e){
      e.preventDefault(); 
      ajaxLoader("ActionPage.php", true);
  });
});

I getting undefined message on all cases when I click send button, when I move $(this).closest("form"); to second function then I get undefined form error.

I have searched on site there are similar question but none of them has usefull answer. example : this one

CodePudding user response：

$(this).closest("form"); does not resolve to the closest form element of the clicked button when inside your function `ajaxLoader'. Do a 'console.log( this )' in that function.

You can either inject the form directly into your function:

$(document).ready(function (){
  $('.submit').on("click", function(e){
      e.preventDefault(); 
      let form = $(this).closest("form");
      ajaxLoader("ActionPage.php", form);
  });
});

function ajaxLoader(url, form) {
  ...
}

Or you could use the action attribute of your form and hook to the submit event of the form directly:

$('form').on('submit', function( e ) {
    e.preventDefault();
  const $form = $(this);
  const url = $form.attr('action');
  const data = $form.serialize();
  const method = $form.attr('method');
  $.ajax({
    url: url,
    data: data,
    success: function(response) {
        
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="actionpage.php" method="POST">
  <button type="submit">
    submit
  </button>
</form>

CodePudding user response：

How this is scoped is based on the context of how it is called. You can change what this is with call/apply/bind. Basic example below.

function ajaxLoader(url) {
  console.log(this, url)
  var form = $(this).closest("form");
  console.log(form[0]);
}


$(document).ready(function (){
  $('.submit').on("click", function(e){
      e.preventDefault(); 
      ajaxLoader.call(this, "ActionPage.php");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="foo">
  <button >Click</button>
</form>