Переопределение метода в Javascript

Question

Я недавно начал использовать JsFormValidatorBundle для проверки моих форм на symfony. Единственная проблема заключается в том, что мне нужно отправить эти формы с помощью Ajax и, к сожалению, по какой-то причине JsFormValidatorBundle заставляет форму отправлять, перезагружая страницу.

Так что теперь я пытаюсь переопределить эту функцию, которая выглядит как:

function FpJsCustomizeMethods() { 

    ... 

    this.submitForm = function (event) { 
     //noinspection JSCheckFunctionSignatures 
     FpJsFormValidator.each(this, function (item) { 
      var element = item.jsFormValidator; 
      if (event) { 
       event.preventDefault(); 
      } 
      element.validateRecursively(); 
      if (FpJsFormValidator.ajax.queue) { 
       if (event) { 
        event.preventDefault(); 
       } 
       FpJsFormValidator.ajax.callbacks.push(function() { 
        element.onValidate.apply(element.domNode, [FpJsFormValidator.getAllErrors(element, {}), event]); 
        if (element.isValid()) { 
         item.submit(); 
        } 
       }); 
      } else { 
       element.onValidate.apply(element.domNode, [FpJsFormValidator.getAllErrors(element, {}), event]); 
       if (element.isValid()) { 
        item.submit(); 
       } 
      } 
     }); 
    }; 

.... 
} 

если я удалить item.submit() она прекрасно работает.

Так как это можно отменить?

full script

Answer 1

Привет я достиг этого с помощью следующего кода:

FpJsFormValidator.customizeMethods.submitForm = function (event) { 
... Override Code in here 
}; 

Answer 2

Вам просто нужно, чтобы сделать новую функцию и расширить родитель с помощью своего прототипа.

Возможно, этот блок кода может объяснить, что вам нужно сделать.

function Parent() { 

    this.a = function() { 
     alert("i am here"); 
    } 

    this.submitForm = function() { 
     alert("i am wrong one here"); 
    } 

} 

function Child() { 

    //we need to override function submitForm with right one 
    this.submitForm = function() { 
     alert("i am right one here"); 
    } 

} 

Child.prototype = new Parent; 

var c = new Child(); 
//other parent methods are still accessible. 
c.a(); 
//method submitForm is overriden with the one we defined 
c.submitForm(); 

увидеть его в действии here

Answer 3

Там в 2 способа сделать это. Насколько я знаю, функция, которую вы хотите переопределить, не является функцией jQuery. Я сохранил 2 примера, чтобы вы могли решить, какой из них подходит вашему коду.

Если это функция JavaScript (пользовательские или родной)

Прежде всего, я увидел функцию, которую вы используете, и я считаю, что это трудно, чтобы переопределить определенную часть, так что я написал снова и удалили (или закомментировали) «отправить запрос», а затем я переопределил функцию. При вызове FpJsFormValidator, следующая функция будет называться NewFpJsCustomizeMethods.

<script type="text/javascript"> 
FpJsFormValidator = function() { 
    return NewFpJsCustomizeMethods(); 
} 

function NewFpJsCustomizeMethods() { 
    this.init = function (options) { 
     FpJsFormValidator.each(this, function (item) { 
      if (!item.jsFormValidator) { 
       item.jsFormValidator = {}; 
      } 
      for (var optName in options) { 
       switch (optName) { 
        case 'customEvents': 
         options[optName].apply(item); 
        break; 
        default: 
         item.jsFormValidator[optName] = options[optName]; 
        break; 
       } 
      } 
     }, false); 
     return this; 
    }; 
    this.validate = function (opts) { 
     var isValid = true; 
     //noinspection JSCheckFunctionSignatures 
     FpJsFormValidator.each(this, function (item) { 
      var method = (opts && true === opts['recursive']) 
       ? 'validateRecursively' 
       : 'validate'; 
      var validateUnique = (!opts || false !== opts['findUniqueConstraint']); 
      if (validateUnique && item.jsFormValidator.parent) { 
       var data = item.jsFormValidator.parent.data; 
       if (data['entity'] && data['entity']['constraints']) { 
        for (var i in data['entity']['constraints']) { 
         var constraint = data['entity']['constraints'][i]; 
         if (constraint instanceof FpJsFormValidatorBundleFormConstraintUniqueEntity && constraint.fields.indexOf(item.name)) { 
          var owner = item.jsFormValidator.parent; 
          constraint.validate(null, owner); 
         } 
        } 
       } 
      } 
      if (!item.jsFormValidator[method]()) { 
       isValid = false; 
      } 
     }); 
     return isValid; 
    }; 
    this.showErrors = function (opts) { 
     //noinspection JSCheckFunctionSignatures 
     FpJsFormValidator.each(this, function (item) { 
      item.jsFormValidator.errors[opts['sourceId']] = opts['errors']; 
      item.jsFormValidator.showErrors.apply(item, [opts['errors'], opts['sourceId']]); 
     }); 
    }; 
    this.submitForm = function (event) { 
     //noinspection JSCheckFunctionSignatures 
     FpJsFormValidator.each(this, function (item) { 
      var element = item.jsFormValidator; 
      if (event) { 
       event.preventDefault(); 
      } 
      element.validateRecursively(); 
      if (FpJsFormValidator.ajax.queue) { 
       if (event) { 
        event.preventDefault(); 
       } 
       FpJsFormValidator.ajax.callbacks.push(function() { 
        element.onValidate.apply(element.domNode, [FpJsFormValidator.getAllErrors(element, {}), event]); 
        if (element.isValid()) { 
         //item.submit(); 
        } 
       }); 
      } else { 
       element.onValidate.apply(element.domNode, [FpJsFormValidator.getAllErrors(element, {}), event]); 
       if (element.isValid()) { 
        //item.submit(); 
       } 
      } 
     }); 
    }; 
    this.get = function() { 
     var elements = []; 
     //noinspection JSCheckFunctionSignatures 
     FpJsFormValidator.each(this, function (item) { 
      elements.push(item.jsFormValidator); 
     }); 
     return elements; 
    }; 
    //noinspection JSUnusedGlobalSymbols 
    this.addPrototype = function(name) { 
     //noinspection JSCheckFunctionSignatures 
     FpJsFormValidator.each(this, function (item) { 
      var prototype = FpJsFormValidator.preparePrototype(
      FpJsFormValidator.cloneObject(item.jsFormValidator.prototype), 
       name, 
       item.jsFormValidator.id + '_' + name 
      ); 
      item.jsFormValidator.children[name] = FpJsFormValidator.createElement(prototype); 
      item.jsFormValidator.children[name].parent = item.jsFormValidator; 
     }); 
    }; 
    //noinspection JSUnusedGlobalSymbols 
    this.delPrototype = function(name) { 
     //noinspection JSCheckFunctionSignatures 
     FpJsFormValidator.each(this, function (item) { 
      delete (item.jsFormValidator.children[name]); 
     }); 
    }; 
} 
</script> 

Если это функция JQuery

Прежде всего, я увидел функцию, которую вы используете, и я считаю, что это трудно, чтобы переопределить определенную часть, так что я написал это снова и удалили (или закомментировали) «отправить вызов», а затем я переопределил функцию jQuery. При вызове FpJsFormValidator, следующая функция будет называться NewFpJsCustomizeMethods.

Вот код:

<script type="text/javascript"> 
(function(){ 
    // Define overriding method 
    jQuery.fn.FpJsFormValidator = NewFpJsCustomizeMethods(); 
})(); 

function NewFpJsCustomizeMethods() { 
    this.init = function (options) { 
     FpJsFormValidator.each(this, function (item) { 
      if (!item.jsFormValidator) { 
       item.jsFormValidator = {}; 
      } 
      for (var optName in options) { 
       switch (optName) { 
        case 'customEvents': 
         options[optName].apply(item); 
        break; 
        default: 
         item.jsFormValidator[optName] = options[optName]; 
        break; 
       } 
      } 
     }, false); 
     return this; 
    }; 
    this.validate = function (opts) { 
     var isValid = true; 
     //noinspection JSCheckFunctionSignatures 
     FpJsFormValidator.each(this, function (item) { 
      var method = (opts && true === opts['recursive']) 
       ? 'validateRecursively' 
       : 'validate'; 
      var validateUnique = (!opts || false !== opts['findUniqueConstraint']); 
      if (validateUnique && item.jsFormValidator.parent) { 
       var data = item.jsFormValidator.parent.data; 
       if (data['entity'] && data['entity']['constraints']) { 
        for (var i in data['entity']['constraints']) { 
         var constraint = data['entity']['constraints'][i]; 
         if (constraint instanceof FpJsFormValidatorBundleFormConstraintUniqueEntity && constraint.fields.indexOf(item.name)) { 
          var owner = item.jsFormValidator.parent; 
          constraint.validate(null, owner); 
         } 
        } 
       } 
      } 
      if (!item.jsFormValidator[method]()) { 
       isValid = false; 
      } 
     }); 
     return isValid; 
    }; 
    this.showErrors = function (opts) { 
     //noinspection JSCheckFunctionSignatures 
     FpJsFormValidator.each(this, function (item) { 
      item.jsFormValidator.errors[opts['sourceId']] = opts['errors']; 
      item.jsFormValidator.showErrors.apply(item, [opts['errors'], opts['sourceId']]); 
     }); 
    }; 
    this.submitForm = function (event) { 
     //noinspection JSCheckFunctionSignatures 
     FpJsFormValidator.each(this, function (item) { 
      var element = item.jsFormValidator; 
      if (event) { 
       event.preventDefault(); 
      } 
      element.validateRecursively(); 
      if (FpJsFormValidator.ajax.queue) { 
       if (event) { 
        event.preventDefault(); 
       } 
       FpJsFormValidator.ajax.callbacks.push(function() { 
        element.onValidate.apply(element.domNode, [FpJsFormValidator.getAllErrors(element, {}), event]); 
        if (element.isValid()) { 
         //item.submit(); 
        } 
       }); 
      } else { 
       element.onValidate.apply(element.domNode, [FpJsFormValidator.getAllErrors(element, {}), event]); 
       if (element.isValid()) { 
        //item.submit(); 
       } 
      } 
     }); 
    }; 
    this.get = function() { 
     var elements = []; 
     //noinspection JSCheckFunctionSignatures 
     FpJsFormValidator.each(this, function (item) { 
      elements.push(item.jsFormValidator); 
     }); 
     return elements; 
    }; 
    //noinspection JSUnusedGlobalSymbols 
    this.addPrototype = function(name) { 
     //noinspection JSCheckFunctionSignatures 
     FpJsFormValidator.each(this, function (item) { 
      var prototype = FpJsFormValidator.preparePrototype(
      FpJsFormValidator.cloneObject(item.jsFormValidator.prototype), 
       name, 
       item.jsFormValidator.id + '_' + name 
      ); 
      item.jsFormValidator.children[name] = FpJsFormValidator.createElement(prototype); 
      item.jsFormValidator.children[name].parent = item.jsFormValidator; 
     }); 
    }; 
    //noinspection JSUnusedGlobalSymbols 
    this.delPrototype = function(name) { 
     //noinspection JSCheckFunctionSignatures 
     FpJsFormValidator.each(this, function (item) { 
      delete (item.jsFormValidator.children[name]); 
     }); 
    }; 
} 
</script> 

Во-вторых, если вы хотите, чтобы переопределить некоторые вещи в функции:

<script type="text/javascript"> 
(function(){ 
    // Store a reference to the original method. 
    var originalMethod = jQuery.fn.FpJsFormValidator; 

    // Define overriding method. 
    jQuery.fn.FpJsFormValidator = function(){ 
     // Execute the original method. 
     originalMethod.apply(this, arguments); 
    } 
})(); 
</script> 

Примечание:

Вам нужно напишите этот код после загрузки оригинальной функции.

Answer 4

Как я и предположил, вы действительно не хотите перезаписывать функцию FpJsFormValidator.customizeMethods.submitForm, чтобы иметь возможность отправлять свои формы через Ajax, а не по умолчанию. Это приведет к:

1. дублирования кода, как вы бы вынуждены восстановить все детали проверки в вашей собственной функции

2. и если часть вашего решения будет избавиться от item.submit() бит то вы также потеряете любые другие события, связанные с тем, что они будут отправлены в качестве продукта.

Я бы вместо того, чтобы просто создать обработчик для события представить по этому пункту, который назвал бы event.preventDefault() и сделать запрос Ajax. Как вы помечено ваш вопрос с JQuery, что-то вроде:

$("#your_fav_form_selector").submit(function (e) { 
    e.preventDefault(); 
    // fetch form data and send it off with $.ajax etc 
});