JQuery play initial click event on table reload via .load () after .change () handler

I am working with a complex application where there are two divs, each containing the HTML / JS of a separate page. Each div is loaded into the $ (document) .ready () script. The top div contains the table and the bottom div contains the form.

The two pages are related (linked) in that if you click on a row in the table, it will highlight that city and load the data of those rows into the form, updating the forms div. Also, if you change (edit) any of the fields in the data form, it will automatically update the table by reloading the HTML for the table with the currently selected row in the remaining table.

Due to the design of the larger system, I have no control over the basic approach (the two divs both reload on the fly to reflect the changes in the other). Both files are not actually related to each other, but rather to the database that is used in the MVC design.

Everything is working fine in my application ... click on the line at the top and you will get the data below. Change the value in the form and then call the change () event to fire (click a tab, click a field, etc.) and the above table will update. C'est tres beaux.

Except ... there is one small error that occurs when you call the change () event by clicking on a row in the table, everything works correctly, except that the row you clicked on does not receive the initial click event and the row does not stand out.

This is apparently because updating the table page causes the click event to fail when it is finally resolved (after the change () event). I figured that I could probably store the identity of the row that was clicked in a cookie or something, and then check in the readiness () function of the load, but I can't forever delay this initial event in anywhere.

I created a much simpler version of the problem that fails in the same way and created a script at http://jsfiddle.net/AKirino/cdhqmp2z/ .

Due to some problems with the script not executing the finished () code in the table file, I moved all the js to the base file. I also integrated part of the form into the main page to make things easier.

In the test code, you can: 1) Click on a row in the table and see that the text of that row is displayed in the lower window. 2) Change the value in the bottom window, then click the tab or click it and it will appear in the table. 3) However, if you change a field in the form, then the change () event is called to be triggered by clicking on a row in the table, the table row is not selected.

Is there a way to catch the initial click event of the row before the page is refreshed?

Here is my original (pre fiddle) test code. I am working in Safari on OSX and using query-1.9.1.

CSS

div {padding:1em; text-align:center;}       
div.page_container {background-color:#C4C4C4; max-width: 80%; margin-left: auto; margin-right: auto;}
div.table_area       {background-color:#ffffc0;}
div.working_area     {background-color:#c00000;}

table, form          {width:15em; margin:0 auto;}
tr.selected          {background-color:#ffffff}
td                   {border: 1px solid; padding:.25em;}

      

BaseFile:

<html><head>
<meta charset='utf-8'>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" href="refreshTest.css" type="text/css" />
</head>
<body>

<script>
$(document).ready(

    function( ) {

        $('div.table_area').load('refreshTestTable.html');

        $('input').change(function(event) {

            var id = $(this).attr('id');
            console.log('datachanged: '+id);

            var myValue = $(this).val();
            $('tr#'+id+' td').html(myValue);

            $('div.table_area').load('refreshTestTable.html');

        });     
    });

</script>

<div class='page_container'>

    <div class='table_area'></div>                
    <div class='working_area'>

        <form id='galleryForm'>
            <label for='field1'  id='field1_label' >Field1: </label><input id='field1' autocomplete="off" value='This is field 1' /><br />
            <label for='field2'  id='field2_label' >Field2: </label><input id='field2' autocomplete="off" value='This is field 2' /><br />
            <label for='field3'  id='field3_label' >Field3: </label><input id='field3' autocomplete="off" value='This is field 3' /><br />
        </form>

        <div id="console">&nbsp;</div>

    </div>

</div>

</body>
</html>

      

TableFile:

<html><head><script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script></head>
<body>

<script>
$(document).ready(

function( ) {

    $('table').delegate('tr', 'click', function(evt){

        var id = $(this).attr('id');
        var myLogMsg = 'tr click: '+id;
        console.log(myLogMsg);

        $('tr').removeClass('selected');    // Unselect all
        $(this).addClass('selected');       // Select clicked row

        $('div#console').html(myLogMsg);
    });

    $('input').each(function(){

        var myId = $(this).attr('id');
        $('tr#'+myId+' td').html($(this).val());
    });
});

</script>

    <table>
    <tr id='field1'><td>fill1</td></tr>
    <tr id='field2'><td>fill2</td></tr>
    <tr id='field3'><td>fill3</td></tr>
    </table>

</body>
</html>

      

+3


source to share


3 answers


You need to change to on()

. The handler is delegate()

deprecated (as from jQuery 1.7) -



 $('table').on('click', 'tr', function(evt){

      

+1


source


I used the following example for buttons that were loaded after the start page was loaded.



$(document).on("click", ".button-class", obj.eventName);
  // where obj.eventName is just a method on my js obj
  // or
$(document).on("click", ".button-class", function(evt){
  // do something
  evt.preventDefault();
});

      

+1


source


I am updating your JSFiddle here, http://jsfiddle.net/gschutz/cdhqmp2z/13/ . Your question is too long, I don't know if I understand it.

A good practice here is to create a function for select

and unselect

, not only addClass

.

You are right, jquery is not that breaking off, you need to store this information in another variable. It is good practice to work with data only on the backend (like REST) ​​and you don't need to order again that any item is selected, because it <tr class="selected">

won't change (unless you reload it) if you are interested in another lib to create a complex one applications, try angularjs.org or d3js.org .

Hope this can help you.

0


source







All Articles