javascript - Dynamic table onclick -

javascript - Dynamic table onclick -

i have next issue help for. there combobox (select) take item , dinamic table php. table contains illustration names. firstname, lastname , id(which hidden). when click on table value of id of selected row. far works fine. problem event doesnt want fire first. after works fine need first have function auto click on first row doesnt work until solve problem. made code works fine html table. not dinamic one. please help.

here code works fine dinamic table after 2nd click:

function nametableclick() { var rows = document.getelementbyid("nametable").rows; for(var = 0; < rows.length; i++) { rows[i].onclick = function() { data=(this.cells[3].innerhtml); var info = data; $.ajax({ type: "post", url: "list.php", data: "data="+data, type: "json", success: function(msg) { msg = json.parse(msg); $("#dob").html(msg.dob); $("#age").html(msg.age); $("#sex").html(msg.sex); } }); }; }; };

and here code works html table: (actually same utilize onload)

onload = function() { var rows = document.getelementbyid("nametable").rows; for(var = 0; < rows.length; i++) { rows[i].onclick = function() { data=(this.cells[3].innerhtml); var info = data; $.ajax({ type: "post", url: "list.php", data: "data="+data, type: "json", success: function(msg) { msg = json.parse(msg); $("#dob").html(msg.dob); $("#age").html(msg.age); $("#sex").html(msg.sex); } }); }; }; $("#nametable tr:eq(0) td:first-child").click(); };

when utilize onload function dinamic table doesnt work @ all. help in advance.

this question not suit answer. instead, i'll code analysis.

onload = function() ... - not terrible kinda sloppy. looks possible global namespace leak. i'm going assume should window.onload in case i'd wonder why jquery's ready event isn't used $(function() { ... }).

var rows = document.getelementbyid("nametable").rows; for(var = 0; < rows.length; i++) { rows[i].onclick = function() { ... }; }

ok 1 time again running away jquery if diseased how. , looping on array of rows build new function each time , attach them onclick (again avoiding jquery)? constructing functions within loop bad thought , linters complain loudly that. suggestion:

$('#nametable tr').on('click', function() { ... });

this attach click handler <tr> rows in table id="nametable" attribute.

data=(this.cells[3].innerhtml); var info = data;

my heart skipped beat here!. first pulling out html content (what thought global variable) until saw next line , realized have variable hoisting. wait assigning info itself. lastly, name data doesn't provide context content of innerhtml. since don't have info guess in these examples i'll leave data. in future think picking names provide context content , use. way when read code don't have hunt variables or how utilize them.

var info = $(this, 'td:eq(3)').text();

finally, utilize of data straight concatenate post request. assume html not desired in server api. not mention avoidance of jquery's parameter building forcing info string. instead utilize js object:

$.ajax({ type: 'post', url: 'list.php', data: {data: data} // poorly designed server api }).then(function(data) { ... });

also, utilize of type: 'json' suggests server not returning proper http headers. first off there no type property jquery's ajax instead think wanted datatype. need datatype suggests server not sending proper headers. if php script homecoming application/json instead of plain/text jquery parse response avoiding need json.parse on own can bit error prone.

$("#dob").html(msg.dob); $("#age").html(msg.age); $("#sex").html(msg.sex);

be warned using html() straight injecting html dom received 3rd party. big cross site scripting vulnerability. utilize text() instead force info dom unless know , can assert trust of server , connection (ssl avoid man in middle). not of import illustration still worth keeping in mind because it's far easy have show in wild.

$("#nametable tr:eq(0) td:first-child")

when have selector far easier , readable instead provide contextual hooks instead of relying on create of dom. add together things class="clickable-row" or class="person-data dob" html markup. makes maintenance , readability.

javascript html ajax