CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvcrazor
GrahamHull
GrahamHull

Reputation: 325

JScript change function on MVC textboxfor event not firing

So I have a textbox that is created in a for loop and the textbox needs to autosubmit the form on change. I had this working in a different page but not created within a loop. My code is as follows:

   using (Ajax.BeginForm("ReportInput","Reports",new AjaxOptions() { UpdateTargetId = "refresh", InsertionMode = InsertionMode.Replace }, new { @id = "refresh" }))
   {
.......for loop{
      //id of textbox <- only one of these textboxs is created at the moment.
      var temp = "#InputParameters_" + i +"__Value";
       <script type="text/javascript">
          $('@temp').change(function () {
          $('#refresh').submit();
          });
       </script>
       @Html.TextBoxFor(modelitem => Model.InputParameters[i].Value)
.......}
   }

With firebug the following error pops up on clicking on the textbox.

ReferenceError: reference to undefined property jQuery.event.triggered return event.result; jquery-1.9.1.js (line 3091) ReferenceError: reference to undefined property src.returnValue this.isDefaultPrevented = ( src.defaultPrevented || src.returnValue === false | jquery-1.9.1.js (line 3345) Use of getPreventDefault() is deprecated. Use defaultPrevented instead. src.getPreventDefault && src.getPreventDefault() ) ? returnTrue : returnFalse; jquery-1.9.1.js (line 3346) ReferenceError: reference to undefined property event.result return event.result;

Generated HTML:

<form id="refresh" method="post" data-ajax-update="#refresh" data-ajax-mode="replace" data-ajax="true" action="/Reports/ReportInput?Length=7">

<script type="text/javascript">
$('#InputParameters_0__Value').change(function () {
$('#refresh').submit();
});
</script>
<input id="InputParameters_0__Value" type="text" value="" name="InputParameters[0].Value">

Im stumped on why this isnt working, any help would be appreciated.

Upvotes: 0

Views: 1420

Answers (1)

Mohammed Swillam
Mohammed Swillam

Reputation: 9242

I think a better approach is to put your javascript block outside the for loop, taking into consideration that all of your textboxes IDs start with the same word "InputParameters", here is my thought solution:

1- You will generate your HTML as normal, just remove the part that renders the javascript from your loop.

2- At the end of your page, put a code block similar to the following one

<script type="text/javascript">
$(function(){
  $('[id^="InputParameters"]').change(function () {
  $('#refresh').submit();
  });
})
</script>

This code should get all the textboxes with an ID starting with "InputParameters" word, then it attaches the handler to the change event as normal.

This is better as it targets your textbox regardless of your randomly added string at the end, and should work as you expect.

Let me know if this has worked for you, or that you still need a tweak to this code.

Upvotes: 1

Related Questions