5

I have a page with a select list (ASP.NET MVC Page)

The select list and onchange event specified like this:

<%=Html.DropDownList("CompanyID", Model.CompanySelectList, "(select company)", new { @class = "data-entry-field", @onchange = "companySelectListChanged()" })%>

The companySelectListChanged function is getting called twice?

I am using the nifty code in this question to get the caller.

both times the caller is the onchange event, however if i look at the callers caller using:

arguments.callee.caller.caller

the first call returns some system code as the caller (i presume) and the second call returns undefined.

I am checking for undefined to only react once to onchange, but this doesnt seem ideal, whcy would onchange be called twice?

UPDATE:

ok, found the culprit! ...apart from me :-) but the issue of calling the companySelectListChanged function twice still stands.

The onchange event is set directly on the select as mentioned. This calls the companySelectListChanged function.

..notice the 'data-entry-field' class, now in a separate linked javascript file a change event on all fields with this class is bound to a function that changes the colour of the save button. This means there is two events on the onchange, but the companySelectListChanged is called twice?

The additional binding is set as follows:

$('.data-entry-field').bind('keypress keyup change', function (e) { highLightSaveButtons(); });

Assuming its possible to have 2 change events on the select list, its would assume that setting keypress & keyup events may be breaking something?

Any ideas?

ANOTHER UPDATE:

The select element looks fine and all works if I remove the additional 'change' binding. when the 'change' binding is added that event fires once and the hard-wired 'onchange' is fired twice.

If both events are bound via jQuery all works ok, it seems that mixing hard-wired onchange and jquery bound change events cannot be mixed? I guess this answers my question but seems like an issue with IE and binding these events with jquery.

Community
  • 1
  • 1
Mark Redman
  • 24,079
  • 20
  • 92
  • 147
  • Could you isolate the problem into a simple application for which you could post the full code of the controller and view? – Darin Dimitrov May 22 '10 at 18:04
  • Do you have any other code that uses another approach to attaching the event handler to the element? What you describe sounds like the function is registered as an event handler *twice* - once in the direct setting of the `onclick` attribute and once via some other mechanism (for example, `attachEvent()` or via a framework like Prototype or jQuery). – Pointy May 22 '10 at 18:43
  • The onchange event is bound directly to the select list as mentioned, the companySelectListChanged() function calls two other functions that make jquery ajax posts. no other code is binding the onchange event. – Mark Redman May 22 '10 at 18:53
  • 1
    Well one thing you could try, as a debugging or fact-finding exercise, would be to have the handler add a property to the event object. Before adding the property, it should check to see if the property is already there. If that's true, then you know the handler is being invoked twice on the same event. If not, then it's being invoked because of two separate events. – Pointy May 22 '10 at 20:39
  • @Pointy: good thinking...will try that... – Mark Redman May 22 '10 at 21:15
  • @Pointy: I added a parameter to the call in the onchange event and it seems the same event is called twice. A view-source only shows a single onchange (in fact its the only onchange string found in the source) – Mark Redman May 23 '10 at 10:32
  • That's weird. Does it behave the same way in different browsers (Firefox, Chrome)? – Pointy May 23 '10 at 11:20
  • This issue is only in IE, Firefox is fine. checking the caller only works in IE, so cant use that to check. – Mark Redman May 23 '10 at 11:23
  • 1
    Well http://gutfullofbeer.net/onchange.html is a test program with an "onchange" handler for a ` – Pointy May 23 '10 at 12:18
  • @Pointy: thanks for your time on this, have updated the question with some more info.. – Mark Redman May 23 '10 at 13:45
  • OK well that's progress. It might give you still more insight (or at least peace-of-mind that it's all as it should be) to do a quick "view source" to see what the actual generated HTML looks like for that ` – Pointy May 23 '10 at 14:10
  • @Pointy: Yes the rendered html looks fine and have found the issue, and a solution, see updated question. but there does appear to be an issue somehwere. – Mark Redman May 23 '10 at 15:24
  • Wow. Well that could be an issue with jQuery; maybe it's trying to be your friend and take over the handling of the "directly-wired" handler too, but for some reason that's messing up. – Pointy May 23 '10 at 15:43

2 Answers2

3

I agree with your assessment. I've updated my small example at http://gutfullofbeer.net/onchange.html to include a jQuery handler in addition to the DOM 0 handler (the one set with the "onchange" attribute). It appears to be a jQuery bug, or at least a failure of jQuery to deal with the IE weirdness.

I logged jQuery ticket 6593.

Pointy
  • 405,095
  • 59
  • 585
  • 614
2

I also encountered this issue when using IE8 and made some changes to fix this.

Instead of specifying the onchange event on the dropdownlist, I used the jquery.change() event.

Markup:

@Html.DropDownList("drpList", myList, new { @class = "myClass", id = "drpList" })

Script:

$(function () {
  $('#drpList').change(function () {
  .... your functionality
  });
});

This works for me.. Hopes this help.

coymax
  • 29
  • 1