javascript - Code working at jsFiddle but not at localhost on development server -

javascript - Code working at jsFiddle but not at localhost on development server -

i need way find how possible same code works on jsfiddle doesn't @ localhost development environment. drive me crazy since don't know find or test in order error @ localhost side.

what working in both sides?

the "toggle all" functionality check first checkbox @ top mark each checkbox independent

what working in jsfiddle not in localhost?

if first toggle using first checkbox , uncheck checkbox you'll see how first unchecked too, right , works on jsfiddle not in localhost

so, in order problem test on localhost? mean don't know console.log() or alert or else clue because don't know else do. , code same. don't error on console. advice?

edit: include code

this code i'm talking requested users:

$(function () { function marcartodoscheck(selchk, tablebody) { $(selchk).on('click', function () { var $toggle = $(this).is(':checked'); $(tablebody).find("input:checkbox").prop("checked", $toggle); }); $(tablebody).find("input:checkbox").on('click', function () { if (!$(this).is(':checked')) { $(selchk).prop("checked", false); } else if ($(tablebody).find("input:checkbox").length == $(tablebody).find("input:checkbox:checked").length) { $(selchk).prop("checked", true); } }); } marcartodoscheck('#togglecheckboxnorma', '#resultadonormabody'); });

testing

ok, trying find cause because code fails on localhost did this:

function marcartodoscheck(selchk, tablebody) { $(selchk).on('click', function () { var $toggle = $(this).is(':checked'); $(tablebody).find("input:checkbox").prop("checked", $toggle); }); $(tablebody).find("input:checkbox").on('click', function () { if (!$(this).is(':checked')) { console.log('no estoy marcado' + !$(this).is(':checked')); $(selchk).prop("checked", false); } else if ($(tablebody).find("input:checkbox").length == $(tablebody).find("input:checkbox:checked").length) { console.log('si estoy marcado' + $(this).is(':checked')); $(selchk).prop("checked", true); } }); } marcartodoscheck('#togglecheckboxnorma', '#resultadonormabody');

but surprise none console.log() executed, makes me think, why?

clarify points

ok, maybe forgot in first tell this, in jsfiddle illustration info loaded default mean exists on modal, in code, info loaded through jquery code made ajax phone call , add together tr dynamically , perhaps there problem on why code doesn't work @ localhost:

$('button#btnbuscar').on('click', function (ev) { ev.preventdefault(); $.post(routing.generate('filtrarnormas'), $('#buscadornorma').serialize(), 'json') .done(function (data, textstatus, jqxhr) { if (data.entities.length > 0) { $('#resultadonorma').show(); var $html = ''; data.entities.foreach(function (value, index, array) { $html += '<tr>'; $html += '<td><input type="checkbox" value="' + value.id + '"></td>'; $html += '<td>' + value.codigo + '</td>'; $html += '<td>' + value.norma + '</td>'; $html += '<td>' + value.anno + '</td>'; $html += '<td>' + value.comitetecnico + '</td>'; $html += '</tr>'; }); $("table tbody#resultadonormabody").html($html); } }) .fail(); });

also notice #resultadonorma hide default , show if got results ajax call. here original html:

<table class="table table-hover table-condensed" id="resultadonorma" style="display: none"> <thead> <tr> <th><input type="checkbox" id="togglecheckboxnorma" name="togglecheckboxnorma" /></th> <th>nro.</th> <th>norma covenin</th> <th>año de publicación</th> <th>comité técnico</th> </tr> </thead> <tbody id="resultadonormabody"> </tbody> </table>

for it's worth, works me on localhost. instead of onload or whatnot, used standard $(document).ready function.

$( document ).ready( function() { marcartodoscheck('#togglecheckboxnorma', '#resultadonormabody'); }); function marcartodoscheck(selchk, tablebody) { $(selchk).on('click', function () { var $toggle = $(this).is(':checked'); $(tablebody).find("input:checkbox").prop("checked", $toggle); }); $(tablebody).find("input:checkbox").on('click', function () { if (!$(this).is(':checked')) { $(selchk).prop("checked", false); } else if ($(tablebody).find("input:checkbox").length == $(tablebody).find("input:checkbox:checked").length) { $(selchk).prop("checked", true); } }); }

update: since dynamically adding content table, might have phone call function 1 time again after every ajax request... seek adding function phone call there well...

$('button#btnbuscar').on('click', function (ev) { ev.preventdefault(); $.post(routing.generate('filtrarnormas'), $('#buscadornorma').serialize(), 'json') .done(function (data, textstatus, jqxhr) { if (data.entities.length > 0) { $('#resultadonorma').show(); var $html = ''; data.entities.foreach(function (value, index, array) { $html += '<tr>'; $html += '<td><input type="checkbox" value="' + value.id + '"></td>'; $html += '<td>' + value.codigo + '</td>'; $html += '<td>' + value.norma + '</td>'; $html += '<td>' + value.anno + '</td>'; $html += '<td>' + value.comitetecnico + '</td>'; $html += '</tr>'; }); $("table tbody#resultadonormabody").html($html); marcartodoscheck('#togglecheckboxnorma', '#resultadonormabody'); }) .fail(); });

javascript jquery