onclick function not getting called

Question

I have a dataSend AJAX function that I am calling onclick but it is not getting called. I checked the it in the Inspector of my browser and it the click handler attached to it and yet when I put a breakpoint in the function using the Debugger, it never reaches there.

PHP/HTML Snippet (RAW)

<td onclick="dataSend('<?php echo $year;?>','12','<?php echo $rs->StudentId;?>');"><?php echo $count12[$rs->StudentId]."/248"; ?></td>

Now, this is cluttered because of the PHP, here's how it looks after being run in the browser.

After running on browser

<td class=" " onclick="dataSend('2015','02','186');">/224</td>

AJAX Snippet (Function)

function dataSend(year, month, studentid) {

    parameters = 'StudentId='+studentid+'&Month='+month+'&Year='+year;
    if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
        } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            document.getElementById('iframe').innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open('POST', 'attendancestu.php', true);
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlhttp.send(parameters);
}

FYI - This function is not inside any other function or trigger. It is not even inside $(document).ready();

I've written codes like this hundreds of times but I can't seem the figure out the problem here

Sorry, I tried it and it worked, do you have any other console output or maybe a blocking browser extension? — swidmann, Nov 23 '15 at 13:36
@swidmann - No, I don't think so. What do you think could be the reason behind it not working? — Shreyas Tripathy, Nov 23 '15 at 13:39
do you have a live version, we can see. I guess you have a table,tr around your td ;) — swidmann, Nov 23 '15 at 13:45
@swidmann - I do have a live version but I can't give anyone else access because it's a copyrighted portal. But yes, I do have table and tr around it — Shreyas Tripathy, Nov 23 '15 at 13:49
@ShreyasTripathy That's no problem, it'll be easier with the whole context available. I just tried to recreate this in a Fiddle, and the `onclick` doesn't work an my `td` when it's not in a `table` and `tr` element for instance... — Gerrit Bertier, Nov 23 '15 at 13:50
If you are using jQuery this might help you. http://stackoverflow.com/questions/19641188/jquery-click-function-not-working-on-td-tag/19641224#19641224 — Kaushik, Nov 23 '15 at 13:53
@UnknownUser - Can you tell me how to pass the parameters I am passing here in the code present in the link. I don't know how to pass *PHP* values from my `` into the `on()` trigger — Shreyas Tripathy, Nov 23 '15 at 14:03
Is it possible that you are cancelling the `click` hanlder on the `td` elsewhere is your JavaScript code via `preventDefault()` or `return false` ? — Michael Doye, Nov 23 '15 at 14:19
@M.Doye - I do not have any code of that sort. However, I am using the **DataTable** jquery plugin for my table designing. Could that be an issue? — Shreyas Tripathy, Nov 23 '15 at 14:21
It might be that somewhere in DataTables that the click event is being cancelled for `td` elements — Michael Doye, Nov 23 '15 at 14:23
@M.Doye - Thanks man! Is there any other way of calling this function that cannot be cancelled out? — Shreyas Tripathy, Nov 23 '15 at 14:24
One option would be to store you PHP variables in hidden input field values and then use JS to get those values and call the function separately using [`.on()`](http://api.jquery.com/on/) - not very clean, but might be a solution — Michael Doye, Nov 23 '15 at 14:28
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/95942/discussion-between-shreyas-tripathy-and-m-doye). — Shreyas Tripathy, Nov 23 '15 at 14:29
is this correct? 'StudentId;?>'); . I mean is that an additional semi column? — Mark Ng, Nov 23 '15 at 15:21

score 0 · Answer 1 · answered Nov 23 '15 at 15:13

You can rewrite this to another binding level which also makes the structure of your table way easier to read.

<td class="send-data" data-year="<?= $year ?>" data-month="12" data-student-id="<?= $rs->StudentId ?>"><?= $count12[$rs->StudentId]."/248"; ?></td>

<script>
$( document ).on( 'click', '.send-data', function( e ) {
    //stop everything what would happen on click of td
    e.stopPropagation();
    e.preventDefault();


    // keep track of the clicked item
    _this = $( this );

    studentId = _this.data( 'student-id' );
    month = _this.data( 'month' );
    year = _this.data( 'year' );

    parameters = 'StudentId='+studentId+'&Month='+month+'&Year='+year;
    if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('iframe').innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open('POST', 'attendancestu.php', true);
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlhttp.send(parameters);
});

Atif Tariq · Answer 2 · 2015-11-23T17:00:43.360

0

Please load JS before HTML. Means Put your js files in

Also change parameters to this:

parameters = window.location.href + '/StudentId='+studentid+'&Month='+month+'&Year='+year;

And try to run it LIVE OR localhost

edited Nov 23 '15 at 17:00

answered Nov 23 '15 at 16:18

Atif Tariq

2,650
27
34

onclick function not getting called

2 Answers2