javascript - jQuery .removeClass() issue only in Chrome, working fine in IE11 -


i have weird issue. using removeclass , addclass in jquery working fine in ie , not working expected in chrome. class getting added , removed effect not visible in chrome. while pop-ups come, on click of yes next text-box should red border , pop-up should appear border change not happening in chrome.

  1. on load text-box have red border.
  2. on click of start button, text box have no border , pop-up appears , text box gets red border.
  3. on click of yes, popup appears , text box gets red border.
  4. on click of cancel, pop-up stops , current text box has red border.

please check inserted snippet in both chrome , ie , tell why irregular behavior. below working snippet:

$(document).ready(function() {    debugger;    var grid = jquery('[id$="gvtest"]')[0];    var rows = grid.rows;    (var k = 1; k < rows.length; k++) {      var textboxinitial = jquery(rows[k]).find('input.newname');      if (textboxinitial.val() == "article1") {        textboxinitial.addclass("redcolorborder");      }    }  });  function proceedcopyvalidation() {    var grid = jquery('[id$="gvtest"]')[0];    var rows = grid.rows;    (var k = 1; k < rows.length; k++) {      var textboxinitial = jquery(rows[k]).find('input.newname');      if (textboxinitial.hasclass("redcolorborder")) {        textboxinitial.removeclass("redcolorborder");      }    }    (var k = 1; k < rows.length; k++) {      var textbox = jquery(rows[k]).find('input.newname');      var newname = textbox.val();      var isvalid = newname == "article1" ? true : false;      if (isvalid == true) {        textbox.addclass("redcolorborder");        var confirm = disp_confirm(k);        if (!confirm) {          return false;        } else {          if (textbox.hasclass("redcolorborder")) {            textbox.removeclass("redcolorborder");          }          continue;        }      }    }  }  function disp_confirm(count) {    var r = confirm("a  pop-up here");    return r;  }
.redcolorborder {    border: solid 5px red;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  <head>        <title></title>        <meta charset="utf-8">        <meta http-equiv="x-ua-compatible" content="ie=edge;chrome=1">      </head>      <body>        <form method="post" id="ctl01">          <span id="featuredcontent_label1">done here</span>          <div>            <table class="gridnew " cellspacing="5" cellpadding="5" rules="all" border="1" id="featuredcontent_gvtest" style="border-color:#ced1d5;width:650px;">              <tbody>                <tr class="headercolor">                  <th class="headercolor" scope="col">old name</th>                  <th class="headercolor" scope="col" style="width:15%;">new name</th>                </tr>                <tr>                  <td class="alignleft" style="width:15%;">product 1</td>                  <td class="alignleft">                    <input name="ctl00$featuredcontent$gvtest$ctl02$textbox1" type="text" value="article1" id="featuredcontent_gvtest_textbox1_0" class="newname" style="width:80%;">                  </td>                </tr>                <tr>                  <td class="alignleft" style="width:15%;">product 2</td>                  <td class="alignleft">                    <input name="ctl00$featuredcontent$gvtest$ctl03$textbox1" type="text" value="article2" id="featuredcontent_gvtest_textbox1_1" class="newname" style="width:80%;">                  </td>                </tr>                <tr>                  <td class="alignleft" style="width:15%;">product 3</td>                  <td class="alignleft">                    <input name="ctl00$featuredcontent$gvtest$ctl04$textbox1" type="text" value="article1" id="featuredcontent_gvtest_textbox1_2" class="newname redcolorborder" style="width:80%;">                  </td>                </tr>                <tr>                  <td class="alignleft" style="width:15%;">product 4</td>                  <td class="alignleft">                    <input name="ctl00$featuredcontent$gvtest$ctl05$textbox1" type="text" value="article1" id="featuredcontent_gvtest_textbox1_3" class="newname" style="width:80%;">                  </td>                </tr>              </tbody>            </table>          </div>          <input name="ctl00$featuredcontent$btnstart" type="button" value="start" onclick="return proceedcopyvalidation();" id="featuredcontent_btnstart">        </form>      </body>

i think doesn't work in chrome because when alert thrown blocks ui thread rest of code not executed (add/remove red border).

i fixed code work in both ie , chrome (didn't test mozilla)

see settimeout.

$(document).ready(function() {    debugger;    var grid = jquery('[id$="gvtest"]')[0];    var rows = grid.rows;    (var k = 1; k < rows.length; k++) {      var textboxinitial = jquery(rows[k]).find('input.newname');      if (textboxinitial.val() == "article1") {        textboxinitial.addclass("redcolorborder");      }    }  });  function proceedcopyvalidation() {    var grid = jquery('[id$="gvtest"]')[0];    var rows = grid.rows;        $('input.newname.redcolorborder').removeclass("redcolorborder");        var fnexec = function(idx) {  	if (idx == rows.length)  		return;      var textbox = jquery(rows[idx]).find('input.newname');      var newname = textbox.val();      var isvalid = newname == "article1" ? true : false;      if (isvalid == true) {        textbox.addclass("redcolorborder");  	  settimeout(function(){  		var confirm = disp_confirm(idx);  		if (confirm) {  			if (textbox.hasclass("redcolorborder")) {  			  textbox.removeclass("redcolorborder");  			}  			fnexec(idx+1);  		}  	  }, 10);      }  	else {  		fnexec(idx+1);  	}    }    fnexec(1);      }  function disp_confirm(count) {    var r = confirm("a  pop-up here");    return r;  }
.redcolorborder {    border: solid 5px red;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  <head>        <title></title>        <meta charset="utf-8">        <meta http-equiv="x-ua-compatible" content="ie=edge;chrome=1">      </head>        <body>        <form method="post" id="ctl01">          <span id="featuredcontent_label1">done here</span>          <div>            <table class="gridnew " cellspacing="5" cellpadding="5" rules="all" border="1" id="featuredcontent_gvtest" style="border-color:#ced1d5;width:650px;">              <tbody>                <tr class="headercolor">                  <th class="headercolor" scope="col">old name</th>                  <th class="headercolor" scope="col" style="width:15%;">new name</th>                </tr>                <tr>                  <td class="alignleft" style="width:15%;">product 1</td>                  <td class="alignleft">                    <input name="ctl00$featuredcontent$gvtest$ctl02$textbox1" type="text" value="article1" id="featuredcontent_gvtest_textbox1_0" class="newname" style="width:80%;">                  </td>                </tr>                <tr>                  <td class="alignleft" style="width:15%;">product 2</td>                  <td class="alignleft">                    <input name="ctl00$featuredcontent$gvtest$ctl03$textbox1" type="text" value="article2" id="featuredcontent_gvtest_textbox1_1" class="newname" style="width:80%;">                  </td>                </tr>                <tr>                  <td class="alignleft" style="width:15%;">product 3</td>                  <td class="alignleft">                    <input name="ctl00$featuredcontent$gvtest$ctl04$textbox1" type="text" value="article1" id="featuredcontent_gvtest_textbox1_2" class="newname redcolorborder" style="width:80%;">                  </td>                </tr>                <tr>                  <td class="alignleft" style="width:15%;">product 4</td>                  <td class="alignleft">                    <input name="ctl00$featuredcontent$gvtest$ctl05$textbox1" type="text" value="article1" id="featuredcontent_gvtest_textbox1_3" class="newname" style="width:80%;">                  </td>                </tr>              </tbody>            </table>          </div>          <input name="ctl00$featuredcontent$btnstart" type="button" value="start" onclick="return proceedcopyvalidation();" id="featuredcontent_btnstart">        </form>      </body>

regards,

thibaud p.


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more