¿Por qué ('#formId').trigger('submit') hace que mi formulario se publique varias veces cuando ('formId').trigger('submit') no lo hace?

Tengo una página MVC3 que está dividida en pestañas. Cada pestaña tiene una vista parcial con un formulario AJAX con diferentes ID.

@using (Ajax.BeginForm("Create1", "ControllerName", ajaxOptions, new { id = "frmCreate1" }))
...
@using (Ajax.BeginForm("Create2", "ControllerName", ajaxOptions, new { id = "frmCreate2" }))
...
@using (Ajax.BeginForm("Create3", "ControllerName", ajaxOptions, new { id = "frmCreate3" }))

Cada pestaña tiene un botón Guardar con diferentes ID.

<input type="submit" id="btnSave1" />
...
<input type="submit" id="btnSave2" />
...
<input type="submit" id="btnSave3" />
...

Cada pestaña incluye un archivo javascript que tiene controladores para los botones:

// Submit Button
    $('#btnSave1').button({ label: "Save" });
    $('#btnSave1').click(function () {
        $.blockUI({ message: 'We are constructing your new Type 1, please wait just a moment...', theme: true, title: 'Saving' });
        $('frmCreate1').trigger('submit');
    });

...
// Submit Button
    $('#btnSave2').button({ label: "Save" });
    $('#btnSave2').click(function () {
        $.blockUI({ message: 'We are constructing your new Type 2, please wait just a moment...', theme: true, title: 'Saving' });
        $('frmCreate2').trigger('submit');
    });
...

// Submit Button
    $('#btnSave3').button({ label: "Save" });
    $('#btnSave3').click(function () {
        $.blockUI({ message: 'We are constructing your new Type 3, please wait just a moment...', theme: true, title: 'Saving' });
        $('frmCreate3').trigger('submit');
    });

Todo se envía correctamente al back-end y obtiene los datos que necesita del formulario. Sin embargo, cambié el selector en el método para

$('#frmCreate1).trigger('submit');  

y ahora, cuando lo ejecuto, el formulario se envía más de una vez, lo que hace que salte al depurador y, posteriormente, publique los mismos datos dos veces.

Supongo que está enviando el formulario a través de Ajax con el selector correcto y luego activando el envío real para el formulario nuevamente, pero no estoy seguro de lo que está sucediendo.

Quiero asegurarme de que el código sea correcto en términos de lo que realmente estoy tratando de hacer. Estos deben ser 3 envíos individuales y separados. ¿Cambio los botones "Enviar" a solo tipos de botones en lugar de enviar o debería haber más en el javascript para evitar que ocurra ese segundo envío? prevenir valores predeterminados o algo así?

¡Gracias!

Editar: también debe incluir las Opciones de Ajax, ocurren en cada una y corresponden a las pestañas, todas tienen nombres diferentes, pero en caso de que el método "Publicar" tenga algo que ver con esto.

@{
    AjaxOptions ajaxOptions = new AjaxOptions
    {
        HttpMethod = "Post",
        UpdateTargetId = "tabs-1",
    };
}

preguntado el 22 de mayo de 12 a las 18:05

Supongo que lo cambiaste a $('#frmCreate1').trigger('submit'); en lugar de $('#frmCreate1).trigger('submit');? ¿Tengo razón en que no eliminó la segunda cita en el selector? -

Sí, la cita no era el problema. Error tipográfico en el código como lo puse en la pregunta. -

¿Has probado a cambiar a botones? Eso tendría sentido para mí ya que sus selectores originales no funcionarían, por lo que los botones de envío probablemente estaban causando el envío. -

Lo extraño es que SÍ funcionaron sin el # en el selector y activaron el formulario una vez. Es decir, creo que termina activando el envío del formulario, pero tengo curiosidad por saber por qué funciona de manera diferente cuando especifico #formId en lugar de formId:

Lo que digo es que puedo decirle que el selector $('frmCreate1') no puede devolver nada, por lo que esa línea de código probablemente no haga nada. Creo que su botón de envío en el contexto del formulario en el que se encuentra causó el envío. -

2 Respuestas

Volver a publicar mi respuesta de los comentarios:

El problema era que el botón Enviar en realidad estaba enviando el formulario mientras el selector $('frmCreate1').trigger('submit'); no estaba haciendo nada ya que no devolvía ningún elemento. Cuando el selector se hizo válido al agregar el '#' para que buscara una identificación en lugar de un nombre de etiqueta, eso también activó el envío. De ahí el doble sometimiento. Si elige uno u otro, eso debería detener el envío doble.

contestado el 22 de mayo de 12 a las 19:05

parece que el formulario no se envía ajaxily asegúrese de haber incluido

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

en su diseño, también para habilitar unobtrusiveJavascript tiene que establecer los indicadores relacionados en verdadero en su archivo de configuración bajo el appSetting .

  <appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

contestado el 22 de mayo de 12 a las 19:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.