Forum:

HTML Pages with CSS and JavaScript

change event is firing twice

J. Kevin Robbins

Bartender

Posts: 1810

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

This is another "works in FF but not in IE" issue. The following code works in FF. The headings are retrieved once and appended once, as expected.

I added the alert boxes when I found that the column headings were being appended twice in IE. The alerts show me that the ajax call is running twice.

The html generated by the jsp is very basic; no fancy input widgets or anything.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Data Transfer</title>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="imagetoolbar" content="no" />
    <style type="text/css" media="screen">
      
    </style>
    <style type="text/css" media="print">
      
    </style>
    <script type="text/javascript" src="/mfgweb/common/scripts/jquery.js"></script>
    <script type="text/javascript" src="/mfgweb/common/scripts/jquery.bgiframe.js"></script>
    <script type="text/javascript" src="/mfgweb/common/scripts/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="/mfgweb/common/scripts/jquery.dimensions.js"></script>
    <script type="text/javascript" src="/mfgweb/common/scripts/jquery.cluetip.js"></script>
    <script type="text/javascript" src="/mfgweb/common/scripts/ie.js"></script>
    <script type="text/javascript" src="/mfgweb/common/scripts/global.js"></script>
    <script type="text/javascript" src="/mfgweb/common/scripts/local.js"></script>
    <script type="text/javascript" src="/mfgweb/common/scripts/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/mfgweb/common/scripts/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="/mfgweb/common/scripts/TableTools.min.js"></script>
    <script type="text/javascript" src="/mfgweb/service/it/scripts/datatxfr.js"></script>
    <script type="text/javascript" src="/mfgweb/common/scripts/jquery.form2aodata-1.0.js"></script>
  </head>
  <body>
  <h1>Local Data Transfer</h1>
  <div id="listdiv" class="filter">
    <label class="paramlabel">Choose an option:</label>
    <select id="reportdd">
      <option value="choose" selected="selected">-- Please choose an option --</option>
        <option value="bbdtimedtxfr">Banbury Downtime Data Transfer</option>
        <option value="bbproddtxfr">Banbury Production Data Transfer</option>
        <option value="compdatatxfr">Component Data Transfer</option>
        <option value="compprodrep">Component Production Report</option>
     </select>
    <input type="hidden" id="selectedtablefield"/>
  </div>
  <div id="paraminputdiv" class="hideonload">
  </div>
  <div id="resultdiv">
    <div id="tablediv"> 
      <p></p>
      <table id="resulttable" class="datatable" style="display: none">
        <thead>
          <tr>
          </tr>                           
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    <div>
      <input type="hidden" id="rtitle" value=""/>
    </div>
  </div>
  </body>
</html>

This is IE6 and due to the total lack of debugging tools I'm at a loss as how to figure out why the change event and hence the ajax call are running twice. Any ideas?

"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson

Bear Bibeault

Sheriff

Posts: 67699

173

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You haven't shown how you are binding the change handler.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

J. Kevin Robbins

Bartender

Posts: 1810

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

It's in document.ready. Here's the entire mess.

$(function(){
  $('#reportdd').change(function(event){    
    var optionValue = $('#reportdd option:selected').val()
    $('.paraminput').val('');
    $('#selectedtablefield').val(optionValue);

$.ajax({      
      url: '/mfgweb/DataTransferColHeadings',
      type: 'GET',
      dataType: 'html',
      data: {
        optionselected : optionValue
      },
      success: function(results) {
        //alert("ajax success");
        $('table#resulttable').hide('fast');
        //alert("appending table headings" + results);
        $('table#resulttable thead tr').append(results);
      }
    });
    
    $.ajax({
      url: '/mfgweb/DataTransferBuild',
      type: 'GET',
      dataType: 'json',
      data: {
        option: $('#selectedtablefield').val()
      },
      success: function(results) {
        $('#paraminputdiv').load(results.staticPage, function() {
          $.trim($('#viewname').val(results.viewName));
          $.trim($('#schemaname').val(results.schemaName));
          $.trim($('#daoname').val(results.DAOName));
          $('[value="choose"]',event.target).remove();
          $('#paraminputdiv').show('normal');
        });
      },
      error: function(xhr, error, exobj) { //removed for IE compatability
        //console.log(xhr);
        //console.log(error);
        //console.log(exobj);
      }
    });
  });
  
  $('#paraminputbtn').live('click',(function(){
    $('#optionselected').val($('#selectedtablefield').val());
    oTable = $('#resulttable').dataTable();
    oTable.fnDestroy();
    
    $('#resulttable').dataTable({
      'bFilter' : false,
      'bSort' : false,
      'bServerSide' : true,
      'bProcessing': true,
      'sAjaxSource' : '/mfgweb/DataTransferResults',
      'bPaginate': false,
      'sScrollY': '400px',
      'sScrollX': '98%',
      'bScrollCollapse': true,
      'sDom' : 'Tirt',
      'oTableTools' : {
        'sSwfPath' : '/mfgweb/common/scripts/swf/copy_cvs_xls.swf',
        'aButtons' : ['copy', 'xls', 'print']
      },
      'fnServerParams' : function(aoData) {
        aoData.push(
          {"name" : "optionselected", "value" : $('#optionselected').val()},
          {"name" : "paraminput1", "value" : $('#paraminput1').val()},
          {"name" : "paraminput2", "value" : $('#paraminput2').val()},
          {"name" : "paraminput3", "value" : $('#paraminput3').val()},
          {"name" : "paraminput4", "value" : $('#paraminput4').val()},
          {"name" : "paraminput5", "value" : $('#paraminput5').val()},
          {"name" : "daoname", "value" : $('#daoname').val()},
          {"name" : "schemaname", "value" : $('#schemaname').val()},
          {"name" : "viewname", "value" : $('#viewname').val()},
          {"name" : "reporttitle", "value" : $('#reporttitle').val()}
          //{"name" : "numcols", "value" : $('#numcols').val()}        
        );
      },
      "fnInitComplete" : function() {
        $('table.datatable').show();
        oTable.fnAdjustColumnSizing();
      }
    });
  }));  
});

Excuse the horrible aoData.push code there at the end. I'm still working on a plugin to collect form input fields and convert them to an object format that datatables will accept as the aoData parameter.

"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson

J. Kevin Robbins

Bartender

Posts: 1810

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

This just gets weirder. Still, working fine in FF, fails in IE. What I'm getting now is a change event when clicking anywhere on the page, but only once. Here's the html as generated by the jsp page.

<h1 class="heading1">Local Data Transfer</h1>
  <div id="listdiv" class="filter">
    <label class="paramlabel">Choose an option:</label>
    <select id="reportdd">
      <option value="choose" selected="selected">-- Please choose an option --</option>
      
        <option value="bbdtimedtxfr">Banbury Downtime Data Transfer</option>
      
        <option value="bbproddtxfr">Banbury Production Data Transfer</option>
      
        <option value="compdatatxfr">Component Data Transfer</option>
      
        <option value="compprodrep">Component Production Report</option>
      
    </select>
    <input type="hidden" id="selectedtablefield"/>
  </div>
  <div id="paraminputdiv" class="hideonload">
    
  </div>
  <div id="resultdiv">
    <p></p>
    <div id="tablediv">      
      <table id="resulttable" class="datatable">
        <thead>
          <tr>
            <th></th>
          </tr>                           
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    <div>
      <input type="hidden" id="rtitle" value=""/>
    </div>
  </div>

</body>
</html>

Choosing an option from the select list inserts a html fragment. If the first option is chosen, this is the html inserted:

<form method="get" id="inputparamsform" name="inputparamsform" action="${pageContext.request.contextPath}/DataExtractResults">
  <input type="hidden" class="inputfield" id="viewname" name="viewname"/>
  <input type="hidden" class="inputfield" id="schemaname" name="schemaname"/>
  <input type="hidden" class="inputfield" id="daoname" name="daoname"/>
  <input type="hidden" class="inputfield" id="optionselected" name="optionselected"/>
  <input type="hidden" class="inputfield" id="reporttitle" name="reporttitle" value="Banbury_Downtime"/>
  <input type="hidden" class="inputfield" id="numcols" name="numcols" value="11"/>
  
  <span id="spanp1">
    <input type="hidden" class="inputfield" id="paraminput1" name="paraminput1"/>
    <label id="paramlabel1" class="paramlabel">Start Date:</label>
    <input type="text" id="startdate" name="startdate" class="cal"/>
  </span>
  <span id="spanp2">
    <input type="hidden" class="inputfield" id="paraminput2" name="paraminput2"/>
    <label id="paramlabel2" class="paramlabel">Ending Date:</label>
    <input type="text" id="enddate" name="enddate" class="cal"/>
  </span>
  <span id="spanp3">
    <input type="hidden" class="inputfield" id="paraminput3" name="paraminput3"/>
    <label id="paramlabel3" class="paramlabel">Machine Number:</label>
    <select id="bbselectbox1" class="bbselectbox">
      <option value="" selected>All</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
    </select>  
  </span>
  <input type="button" value="Submit" id="paraminputbtn"/>
</form>
<script type="text/javascript">
  $.datepicker.setDefaults({
    autoSize: true,
    showButtonPanel: true,
    gotoCurrent: true,
    dateFormat: 'MM d, yy',
    altFormat: 'yymmdd',
    showButtonPanel: false
  })
  
  $("#startdate").datepicker({      
    altField : '#paraminput1'      
  });
 
  $("#enddate").datepicker({    
    altField : '#paraminput2'      
  });
    
  $('#startdate').datepicker('setDate', new Date());
  $('#enddate').datepicker('setDate', new Date());
  
  $('#bbselectbox1').change(function(){    
    $('#paraminput3').val($('#bbselectbox1 option:selected').val());
  });
</script>

Now at this point I can click anywhere on the page and get a change event shown by the alert box on line four of the following external js file, but only once. After that I can select my parameters and run the query and not get another change event unless I select a new option from the initial select box.

$(document).ready(function(){
  alert('document ready running');
  $('#reportdd').change(function(event) {
    alert('change event detected');
    if($('#paraminputdiv').is(':visible')) {
      $('#paraminputdiv').slideUp();
    }
    
    var optionValue = $('#reportdd option:selected').val();
    $('.paraminput').val('');
    $('#selectedtablefield').val(optionValue);

$.ajax({      
      url: '/mfgweb/DataTransferColHeadings',
      type: 'GET',
      dataType: 'html',
      data: {
        optionselected : optionValue
      },
      success: function(results) {
        alert("ajax success for headings");
        //$('div.tablediv').hide('fast');
        //alert("appending table headings" + results);
        var oTable = $('#resulttable').dataTable();
        oTable.fnDestroy();
        $('table#resulttable').remove();
        $('#tablediv').html('<table id="resulttable" class="datatable"><thead><tr></tr></thead><tbody></tbody></table>');        
        $('table#resulttable thead tr').append(results);
      }
    });
    
    $.ajax({
      url: '/mfgweb/DataTransferBuild',
      type: 'GET',
      dataType: 'json',
      data: {
        option: $('#selectedtablefield').val()
      },
      success: function(results) {
        alert("ajax success for build");
        $('#paraminputdiv').load(results.staticPage, function() {
          $.trim($('#viewname').val(results.viewName));
          $.trim($('#schemaname').val(results.schemaName));
          $.trim($('#daoname').val(results.DAOName));
          $('[value="choose"]',event.target).remove();
          $('#paraminputdiv').slideDown('fast');
        });
      },
      error: function(xhr, error, exobj) { //removed for IE compatability
        //alert("ajax error in build");
        //console.log(xhr);
        //console.log(error);
        //console.log(exobj);
      }
    });
  });
  
  $('#paraminputbtn').live('click',(function(){
    alert("submit button clicked");
    $('#optionselected').val($('#selectedtablefield').val());
    var oTable = $('#resulttable').dataTable();
    oTable.fnDestroy();

$('#resulttable').dataTable({
      'bFilter' : false,
      'bSort' : false,
      'bServerSide' : true,
      'bProcessing': true,
      'bAutoWidth' : true,
      'sAjaxSource' : '/mfgweb/DataTransferResults',
      'bPaginate': false,
      'sScrollY': '400px',
      'sScrollX': '99%',
      'bScrollCollapse': true,
      'sDom' : 'Tirt',
      'fnServerData' : function(sSource, aoData, fnCallback) {
        $.getJSON(sSource, aoData.concat($('.inputfield').serializeArray()),function(json){
          fnCallback(json);
        });
      },
      'fnRowCallback' : function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        var rowID = 'row' + iDisplayIndexFull;
        $(nRow).attr('id', rowID);
        return nRow;
      },
      'oTableTools' : {
        'sSwfPath' : '/mfgweb/common/scripts/swf/copy_cvs_xls.swf',
        'aButtons' : ['copy', 'xls', 'print']
      },      
      "fnInitComplete" : function() {
        alert('fnInitComplete running');
        $('table.datatable').show();
        oTable.fnAdjustColumnSizing();
      }
    });
  }));  
  
});

Any ideas on this one? It's driving me crazy...How is a change event getting bound to the entire document?!? Freakin' IE gives me more gray hair everyday.

"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson

Bear Bibeault

Sheriff

Posts: 67699

173

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

That's way too much code to wade through. Please submit an SSCCE that demonstrates the issue.

[Asking smart questions] [About Bear] [Books by Bear]

J. Kevin Robbins

Bartender

Posts: 1810

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Yeah, I was afraid of that. That's todays project; a test app from the ground up. I suspect that I'm going to find that it's related to the embedded javascript in the html fragment that's being inserted. That's a technique I've never used, and honestly, I didn't even think it would work since the doc.ready event has already passed at that point, but to my surprise, the datepickers initialized okay.

Hopefully, by tomorrow, I'll either have this conquered or I'll have a small app that replicates the same problem.

"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson

J. Kevin Robbins

Bartender

Posts: 1810

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I found the culprit! This single line of code was causing the problem:

I wish you could explain that one to me, Bear, because I lifted it from JQIA.

"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson

Bear Bibeault

Sheriff

Posts: 67699

173

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Within an event handler, that line of code will find any element that is a child of the event target that has the attribute value="choose", and will then remove it.

In jQIA it is used to remove the "choose one" option from a select element once something has been explicitly selected from that select.

[Asking smart questions] [About Bear] [Books by Bear]

J. Kevin Robbins

Bartender

Posts: 1810

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:Within an event handler, that line of code will find any element that is a child of the event target that has the attribute value="choose", and will then remove it.

In jQIA it is used to remove the "choose one" option from a select element once something has been explicitly selected from that select.

That's how I was using it; to remove the "Please Choose an Option" entry from the select box. But it appears that removing that entry was detected by IE as a change event that was left "hanging" out there until a click anywhere on the page triggered the event. It seems to be related to the fact that I was running it within the "success" function of an ajax call. I moved that line of code to immediately follow the change event like this and now all is well. Lesson learned.

"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson

Bear Bibeault

Sheriff

Posts: 67699

173

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

"Lessons learned" is what the Ranch is all about!

[Asking smart questions] [About Bear] [Books by Bear]

I am not young enough to know everything. - Oscar Wilde This tiny ad thinks it knows more than Oscar:

The Low Tech Laboratory Movie Kickstarter is LIVE NOW!

https://www.kickstarter.com/projects/paulwheaton/low-tech