¿Cómo convierto este código jQuery en función jQuery?

Question

Tengo algunos códigos jQuery, que se repiten una y otra vez, me gustaría reducir el código que estoy escribiendo, convirtiéndolo en funciones. aquí están los códigos que estoy usando.

$('form#save-user button[name="save-user"]').click(function() { 
    var formData = 'option=saveuser&'+$('form#save-user').serialize(); 
    $.ajax({ 
     type: 'POST', 
     url: 'process.php', 
     data: formData, 
     success: function(msg){ 
      if(msg === 'empty') { 
       alert('Required Values Missing'); 
      } else if(msg === 'duplicateEmail'){ 
       alert('Email already exist'); 
      } else { 
       window.location = "index.php?users&option=edit&user_id="+msg+'&msg=success'; 
      } 
     } 
    }); 
}); 

$('form#save-user button[name="save-user-close"]').click(function() { 
    var formData = 'option=saveuser&'+$('form#save-user').serialize(); 
    $.ajax({ 
     type: 'POST', 
     url: 'process.php', 
     data: formData, 
     success: function(msg){ 
      if(msg === 'empty') { 
       alert('Required Values Missing'); 
      } else if(msg === 'duplicateEmail'){ 
       alert('Email already exist'); 
      } else { 
       window.location = 'index.php?users'; 
      } 
     } 
    }); 
}); 

$('form#save-user button[name="save-user-new"]').click(function() { 
    var formData = 'option=saveuser&'+$('form#save-user').serialize(); 
    $.ajax({ 
     type: 'POST', 
     url: 'process.php', 
     data: formData, 
     success: function(msg){ 
      if(msg === 'empty') { 
       alert('Required Values Missing'); 
      } else if(msg === 'duplicateEmail'){ 
       alert('Email already exist'); 
      } else { 
       window.location = 'index.php?users&option=create'; 
      } 
     } 
    }); 
}); 

me gustaría saber algunas cosas,

a) Con referencia al código anterior, ¿cómo convertirlo en función, ya que el código tiene muy pocos cambios como, selector nombre y url de window.location.

b) ¿Cómo puedo llamar al siguiente código, ¿es la función? función en el ir? o función dinámica?

$('selector').event(function(){ 
    //jQuery Code in wake of event being triggered. 
}); 

Answer 1

que iba a escribir un pequeño plugin para ello:

(function ($) { 

jQuery.fn.myClick = function (destination) { 
    this.click(function() { 
     var formData = 'option=saveuser&'+$('form#save-user').serialize(); 
     $.ajax({ 
      type: 'POST', 
      url: 'process.php', 
      data: formData, 
      success: function(msg){ 
       if(msg === 'empty') { 
        alert('Required Values Missing'); 
       } else if(msg === 'duplicateEmail'){ 
        alert('Email already exist'); 
       } else { 
        window.location = destination(msg); 
       } 
      } 
     }); 
    }); 
} 

}(jQuery)); 

Entonces llamarlo sólo tendría que hacer:

$('form#save-user button[name="save-user-close"]').myClick(function() { 
    return 'index.php?users&option=create'; 
}); 

y

$('form#save-user button[name="save-user"]').myClick(function (msg) { 
    return "index.php?users&option=edit&user_id="+msg+'&msg=success'; 
}); 

Usted debe ser capaz de ver hacia dónde vamos aquí; estamos agregando parámetros al pequeño método que hemos creado, donde puede especificar qué cambios se producen entre cada llamada.

Porque en este caso, el window.location depende de la respuesta AJAX (y no conocemos la respuesta cuando invocamos la función!), No podemos simplemente proporcionar una cadena (o algo similar) como el parámetro. En su lugar, pasamos una función que invocamos una vez que se recibe la respuesta AJAX, siempre que el msg sea una variable; y confíe en la función para proporcionar una cadena que establecemos en el window.location.

---

En cuanto a su segunda pregunta, se pasa un manejador de eventos a los métodos de evento jQuery; un controlador de eventos será una referencia función (por lo general una referencia a un función anónima)

Answer 2

a) Me gustaría empezar por tomar los campos cambiantes como params:

function doPost(redirectUrl) { 
    var formData = 'option=saveuser&'+$('form#save-user').serialize(); 
    $.ajax({ 
     type: 'POST', 
     url: 'process.php', 
     data: formData, 
     success: function(msg){ 
      if(msg === 'empty') { 
       alert('Required Values Missing'); 
      } else if(msg === 'duplicateEmail'){ 
       alert('Email already exist'); 
      } else { 
       window.location = redirectUrl.indexOf("{0}") >= 0 ? redirectUrl.replace("{0}", msg) : redirectUrl; 
      } 
     } 
    }); 
} 

$('form#save-user button[name="save-user"]').click(function() { 
    doPost("index.php?users&option=edit&user_id={0}&msg=success"); 
}); 

$('form#save-user button[name="save-user-close"]').click(function() { 
    doPost("index.php?users");  
});  

b) Yo diría que es un manejador de sucesos en el anonimato (función).

Answer 3

Esto debe hacerlo por usted:

JQuery:

function saveuser(formData) { 
    $.ajax({ 
     type: 'POST', 
     url: 'process.php', 
     data: formData, 
     success: function(msg){ 
      if(msg === 'empty') { 
       alert('Required Values Missing'); 
      } else if(msg === 'duplicateEmail'){ 
       alert('Email already exist'); 
      } else { 
       window.location = "index.php?users&option=...'; 
      } 
     } 
    }); 
} 

HTML:

<element onClick="saveuser('the-form-data')"></element>