Why isn’t onBlur being executed?

Asked

Viewed 721 times

3

I was wanting to run a function in Javascript when the dropdown lose focus.

I’m doing it this way, using onBlur, and it’s not working:

function DesabilitaFiltro() {
   alert("ok");
}

<div class="form-group">
   @Html.DropDownList("Severidade", (IEnumerable<SelectListItem>)ViewBag.Severidades, "Severidade", new { @class = "ui fluid search dropdown", style = "width: 100%", multiple = "", onchange = "Filtro()", onBlur="DesabilitaFiltro()" })
</div>

<div class="form-group">
   <select class="ui fluid search dropdown" id="Severidade" multiple="" name="Severidade" onBlur="DesabilitaFiltro()" onchange="Filtro()" style="width: 100%"><option value="">Severidade</option>
      <option>MEDIA</option>
      <option>ALTA</option>
      <option>BAIXA</option>
      <option>CRITICA</option>
   </select>
</div>

If anyone knows why it’s not working, help me...

javascript c# html asp.net-mvc

  • What is the HTML of this?

  • tried to change the onBlur for onblur? http://www.w3schools.com/jsref/event_onblur.asp

  • Have you thought about using another event? like an onclick in the front element? As @Ciganomorrisonmendez said there, post the html of this bug there for further analysis.

  • I posted the HTML...

  • I’ve tried both ways @Guilhermelautert.

  • Pq does not run on onchange?

  • @Italo here is running well, appeared the Alert so the element lost focus.

Show 2 more comments

3 answers

6

There is nothing wrong with your code. It may be just the order or the moment you are calling the same.

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by randrade</title>
<style type="text/css"></style></head>
<body>
  

<div class="form-group">
   <select class="ui fluid search dropdown" id="Severidade" multiple="" name="Severidade" onblur="DesabilitaFiltro()" onchange="Filtro()" style="width: 100%"><option value="">Severidade</option>
      <option>MEDIA</option>
      <option>ALTA</option>
      <option>BAIXA</option>
      <option>CRITICA</option>
   </select>
</div>

<script>
function DesabilitaFiltro() {
   alert("ok");
}
</script>

</body></html>

Just one example using jQuery:

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by randrade</title>

  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script><style type="text/css"></style>
  
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$("#Severidade").blur(function(){
    alert("OK");
});
});//]]> 

</script>

</head>
<body>
  <div class="form-group">
   <select class="ui fluid search dropdown" id="Severidade" multiple="" name="Severidade" onchange="Filtro()" style="width: 100%"><option value="">Severidade</option>
      <option>MEDIA</option>
      <option>ALTA</option>
      <option>BAIXA</option>
      <option>CRITICA</option>
   </select>
</div>
  
</body></html>

Just check the moment your function is being "loaded" in the browser, this may be causing problems.

Fiddle - Javascript
Fiddle - jQuery

  • As amazing as it sounds in IE works, already in Firefox and Chrome no.

  • @Italo My answer or when you add in your code?

  • When I run my code @Randrade.

  • This is something with your code. An error appears in the browser console?

  • It seems not, and I’ve been stamping on F12 and no error appears.

  • @Italo Add the order of your Imports along with the @section Scripts{}

  • put Section and did not solve the problem.

  • @Italo add how your code is in the question

Show 3 more comments

4

Your code is running smoothly. I believe that the behavior you expect is not what the method does. As a suggestion, you can run both methods on the onchange. See:

function DesabilitaFiltro() {
  alert("ok");
}
<div class="form-group">
  <select class="ui fluid search dropdown" id="Severidade" multiple="" name="Severidade" onchange="DesabilitaFiltro();Filtro();" style="width: 100%">
    <option value="">Severidade</option>
    <option>MEDIA</option>
    <option>ALTA</option>
    <option>BAIXA</option>
    <option>CRITICA</option>
  </select>
</div>

4

Italo, always separate behavior from HTML. As you start doing this, you will see that doubts in the style "Why XXXX is not running" will decrease naturally.

In his example:

Include a script tag at the end of html and do something like:

var el = document.querySelector('#Severidade');
el.addEventListener('change', function alterouFiltro() {
  console.log('alterado');
}, false);

el.addEventListener('blur', function focoFiltro() {
  console.log('perdeu o foco');
}, false);
<select id="Severidade">
  <option>Opção 1</option>
  <option>Opção 2</option>
  <option>Opção 3</option>
</select>

  • I would put inside a $(Document). ready(Function ()?

  • Yeah, it could be.

Browser other questions tagged javascript c# html asp.net-mvc

You are not signed in. Login or sign up in order to post.