Question

I’m trying to submit a form with AJAX using jquery:

<form name="myform" action="">
<table id="webcam-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>...</th>
            <th><input type="checkbox" name="checkboxselectall" title="Select All" />&nbsp;&nbsp;
                <button type="submit" class="deletebutton" name="delete_video" title="Delete the selected videos">Delete</button></th>
        </tr>
    </thead>
    <tbody>
        <tr >
            <td>some data</td>
            ...
            <td><input type="checkbox" value="<?php echo $this->result_videos[$i]["video_name"]; ?>" title="Mark this video for deletion"/></td>
        </tr>
    </tbody>
</table>
</form>

If someone selects a checkbox and hits the submit button I have this code:

jQuery(".deletebutton").on("click", function() {
    var testchecked = jQuery(':checkbox:checked').length;
    if (testchecked == 0) {
        alert('Please select at least one video');
        e.preventDefault();
    }
    else
    {
        if (confirm("Are you sure you want to delete the selected videos?"))
        {
            var checked = jQuery('input:checkbox:checked').map(function () {
                return this.value;
            }).get();
            var $this = jQuery(this);
            jQuery.ajax({
                type: 'POST',
                url: 'index.php?option=com_recordings&task=deletevideos&format=raw',
                data: {checkedarray:checked},
                success: function(data){
                    alert(data);

                }
            });
        }
    }
});

Oddly this code works fine in IE (how’s that for a change) but doesn’t in Chrome or FF. If I check the error:

error: function(jqXHR, textStatus, errorThrown) {
        if (jqXHR.status === 0) {
            alert("Not connected. Verify Network.");
        }

It seems it always throws this alert. So why is it always 0? Here is the really odd thing. After much playing around if I change the form to be in the table it then works:

<table id="webcam-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>...</th>
            <th><input type="checkbox" name="checkboxselectall" title="Select All" />&nbsp;&nbsp;
                <button type="submit" class="deletebutton" name="delete_video" title="Delete the selected videos">Delete</button></th>
        </tr>
    </thead>
    <tbody>
<form name="myform" action="">
... //the rest is the same

This will then work in FF and Chrome but now IE fails to render the table properly. So this is not a solution (anyways it is not w3c valid code). So…any ideas? Anything I can try to debug this?

Answer 1

It is because you are not cancelling the click event of the submit button. You need to do it for both cases, not just the part in the if. Move that line before the if, the code will magically not be zero anymore.