Tutorial :Client elements don't get updated when the form is posted back



Question:

I have a web form that contains lots of JavaScript functionalities to manipulate the DOM. This is achieved using AJAX to call a service that will return me whatever I have to do, such as hiding elements, cascading drop downs, removing and inserting new items to a select, etc.

Everything works as expected apart from one particular function. This function only disables and sets a default value in a select element depending on what my AJAX call returned. For instance, let's say I had selected "foo" from the following select and saved the record:

<select id="mySelect2">    <option value="0">Default</option>    <option value="foo">Foo</option>    <option value="another_foo">Foo 2</option>  </select>  

Great! Now I have changed other element in my web form that triggered off my AJAX call. The returned data tells me that I should select Default and disable the select element. This works just fine. But, when I save the record again and verify it in the DB the Default value of 0 in this case is not being saved. The record remains with the previous selected item ("foo").

If you are curious, I using the following code to accomplish this:

  1. Binds the AJAX call

    $('myElement').change(GetData);  
  2. GetData method

    $.ajax({      type: 'POST',      url: 'myUrl',      data: "{'id':'" + myIdFromMyElement + "'"}",      contentType: 'application/json; charset=utf-8',      dataType: 'json',      success: OnSuccess,      error: OnError  });  
  3. Manipulate the select element according to the returned data:

    function OnSuccess(data, textStatus) {       if (data.d.DisableMySelect2){          $('#mySelect2').val('0');          $('#mySelect2').attr('disabled', 'disabled');      }  }  

Why is this happening?

EDIT:

Further investigations shown that my web form does not unbind the changed value correctly but when I go Request.Form["mySelect2"] I can actually see the updated value, so apparently there is nothing wrong with the client side of things.


Solution:1

I think that this is happening because the form elements that are disabled aren't submitted with the form.

You may want to handle form submission trough an AJAX call or use a hidden input to store the value of the selected option of the disabled SELECT element.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »