2010-11-18 28 views
5

Estoy usando el complemento jquery.form para subir de forma asíncrona documentos en un proyecto MVC.Problema de carga asincrónica usando jquery.form.js

Tomando mi plomo de this respuesta anterior, esto es lo que tengo en la página:

<% using(Html.BeginForm("Create", "JobFile", FormMethod.Post, new { id = "uploadForm", enctype = "multipart/form-data" })) %> 
<% { %> 
<%: Html.ValidationSummary() %> 

    <input type="file" id="fileToUpload" /> 
    <input type="submit" value="Upload file" /> 
    <input type="text" id="RelatedFileName" /> 

<% } %> 

<script type="text/javascript" src="../../Scripts/jquery-1.4.1.min.js"></script> 
<script type="text/javascript" src="../../Scripts/jquery.form.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#uploadForm').ajaxForm(function (result) { 
      if (result.errorMessage != '') { 
       alert(result.errorMessage); 
      } else { 
       $('#RelatedFileName').val(result.fileName); 
      } 
     }); 
    }); 
</script> 

Mi problema es que cuando se carga la página me sale el siguiente error de JavaScript:

Uncaught TypeError: Object # has no method 'ajaxForm'

Este error se encuentra en la línea que contiene

$('#uploadForm').ajaxForm(function (result) { 

¿Alguien puede decirme por qué me aparece este error?

+0

Como digo, '/ Scripts/jquery.form.js' funcionará de la misma (sino más consistentemente) como '../../ Scripts/jquery.form.js' - ambos comienzan en la raíz del sitio. –

Respuesta

0

¿Es 'uploadForm' la identificación de su objeto <form>? Si es así, puede verificar algo como FireBug para asegurarse de que su complemento esté incluido en su página correctamente.

+0

Sí, 'uploadForm' es el ID de mi formulario. La fuente descargada es "

". Si utilizo la herramienta de depuración/fuente en Chrome, puedo ver que se está descargando jquery.form.js (aparece en la pestaña "Scripts"). – awj

+0

IE9 dice más o menos lo mismo: el archivo de script se está descargando, y el error que se produce es "SCRIPT438: El objeto no admite esta propiedad o método". – awj

+0

Quizás tenga que cambiar su secuencia de comandos para que se llame a la carga de la página: $ (documento) .ready (función() {... código ...}); De esta manera, el formulario tendrá la función de prototipo correctamente si el complemento está instalado. De lo contrario, buscaría en su script, porque eso debería funcionar. – wajiw

0

El acceso directo:

$(function() { 

no funciona en la última versión de jQuery, tiene que utilizar:

$(document).ready(function() { 
+0

Es útil saberlo, pero no obtendría el error en la carga de la página si "$ (function() {" no funcionaba en la versión que estoy usando. No obstante, gracias por la sugerencia, y ahora tengo lo cambié – awj

+0

Esto es simplemente incorrecto. Tengo 1.7.2 y esto funciona sin ningún error. –

+0

En el momento de escribir esto, era cierto de la última versión –

1

Aquí es el método que estoy usando para MVC3, CodeIgniter y Yu. Una importante de esto es que debe especificar su method = "post", enctype y encoding = "multipart/form-data"

var submitForm = function(_formId){ 
var _genMsg = $('#genMsg'); 
_submitForm = $('form').index($('#'+_formId)); 
if(subCommonForm(_submitForm, 'main')){ 
    _genMsg.attr('class', 'information-box round'); 
    _genMsg.html('Saving...'); 
    $('#'+_formId).ajaxForm({ 
     dataType: 'json', 
     success: function (data) { 
      _genMsg.attr('class', 'information-box round'); 

      data.code == 0 
       ? _genMsg.attr('class', 'confirmation-box round') 
       : _genMsg.attr('class', 'error-box round'); 

      _genMsg.html(data.message); 
      _genMsg.fadeIn(); 
     } 
    }); 

    $('#'+_formId).submit(); 
} 
}; 
4

Compruebe que jQuery no está siendo incluido en la página dos veces.

+1

Gracias a un millón. Después de pensarlo dos horas y horas, esta fue la solución, – idok

0

de verificación si usted tiene la $

$('#your-form')

y no

('#your-form')

Cuestiones relacionadas