none
Javascript function being executed within Ajax form asp.net mvc4

    Question

  • Hi,

    I've a html form that has a DropdownList which calls a partial view that is rendered by using ajax -This happens when the user select one of the dropdownlist options-. Inside that partial view, I've another ajax form that add records to a table that is updated using ajax. The first time the user fills the form and the info is updated to the table that is being rendered below the form, some form fields need to become readonly, so the user couldn't edit then anymore.


    I've the following function:

    <script type = "text/javascript">
    
        $(document).ready(function deshabilitarControles() {
            var ordenCompra = document.getElementById("ordenCompra");
            var nombreSubcliente = document.getElementById("nombreSubcliente");
            var nitSubcliente = document.getElementById("nitSubcliente");
            var fechaPactada = document.getElementById("fechaPactada");
    
            
            ordenCompra.setAttribute('readonly', 'readonly');
            
            nombreSubcliente.setAttribute('readonly', 'readonly');
            
            nitSubcliente.setAttribute('readonly', 'readonly');
            
            fechaPactada.setAttribute('readonly', 'readonly');
            
        });
    
     </script>

    I've try these 2 options to call the function ONLY when the form is submitted:

    1. Use of OnSuccess attribute in ajax.beginForm:

    @using (Ajax.BeginForm("AnadirRegistro", new AjaxOptions { OnSuccess = "deshabilitarControles()", HttpMethod = "POST", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace, UpdateTargetId = "divResumenRegistros" }))
     { 

    2. Use of onclick eventHandler in submit button:

    <input type="submit" name="AnadirRegistro" id="anadirRegistro" value="Añadir registro" onclick = "deshabilitarControles()"/>

    None of the above methods worked, and everytime I display the first ajax form (the one that has the fields I want to make readonly) the function is already being executed, and the fields are readonly without submitting the form.

    What am I doing wrong? Please help, I'm a newbie on this.

    Thanks a lot.

    Andrés Ayala.




    • Edited by Andrés Ayala Monday, September 30, 2013 8:12 PM Spelling
    Monday, September 30, 2013 8:08 PM

All replies

  • Hi Andres,

    Can you provide us a link to debug?

    ... I think you will find that the jquery onready is not fired when a form fragment is injected.

    use the ondocumentready function of the parent document to update the readonly attributes of the form elements after the ajax response (that writes the input elements into the page) is returned.

    Regards.


    Rob^_^

    Wednesday, October 02, 2013 5:45 AM
  • Thanks for the response Rob, unfortunately I'm not allowed to give links to debug for this project. I tried the option you gave me but it didn't work. The fact is that the parent document is in other file and the one I need to make readonly is actually a partial view in a separated file. I'm using asp.net mvc 4.

    I've  backup plan, validating in the controller that user don't change the info into that textboxes everytime he submit the form, but I'm sure this can be done, but I don't know how.

    Any other option is welcomed.

    Greetings!

    Thursday, October 10, 2013 4:21 PM