Qual é a melhor maneira de evitar a duplicação de código nessas duas funções que fazem a mesma coisa?

Question

Dada esta forma (que contém um botão de envio):

<form id="review_form">
  <input type="submit" id="btn_submit" value="Submit with ajax! (submit button)">
</form>

e este link (para submeter a mesma forma):

<a href="#" id="lnk_submit">Submit with ajax! (hyperlink)</a>

No seguinte código jQuery, quando o elemento #btn_submit é clicado, o formulário (#review_form) é submetido com ajax:

jQuery.fn.submitWithAjax = function() {
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

$(document).ready(function() {
  $("#btn_submit").submitWithAjax();
})

O que eu quero fazer é remover o botão enviar e enviar o formulário usando o link acima (#lnk_submit) algo como isto:

$("#lnk_submit").click(function(){ 
   $("#review_form").submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
    }); 
   return false;
});

Mas o problema é que isso duplica todo o código no jQuery.fn.submitWithAjax definido acima.

Qual é a melhor maneira de evitar a duplicação de código aqui?

Answer 1

Que tal você tem uma função como esta:

function submitWithAjax() {
    $("#review_form").submit(function() {
        $.post(this.action, $(this).serialize(), null, "script");
        return false;
    });         
}

E, em seguida, ligar ambas as ações para a função:

$(document).ready(submitWithAjax);
$("#lnk_submit").click(submitWithAjax);

Answer 2

Talvez eu estou simplificando demais, mas você não pode simplesmente atribuir a função a uma variável, e reutilizar isso?

var submitWithAjaxFn = function() {
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

jQuery.fn.submitWithAjax = submitWithAjaxFn;
$("#lnk_submit").click(function(){ 
   $("#review_form").submit(submitWithAjaxFn); 
   return false;
});

Answer 3

Mais simples resposta (embora talvez não mais elegante) é usar a segunda função para ambos (que se refere explicitamente ao seu formulário independente do que está chamando a função) e, em seguida, dar a cada um 'gatilho' da mesma classe e anexar o clique evento para ambos.

Answer 4

Se você quiser a mesma funcionalidade fora do hyperlink, fazer a ação do hiperlink simplesmente um clique do botão.

$('#lnk_submit').click(function(e){ $('#btn_submit').click(); return false; });