Question

I’ve got an html table with a number of checkboxes :

<table id="webcam-table" class="pretty">
    <thead>
    <tr>
        <th>Camera Name</th>
        <th>Date Created</th>
        <th>Video Size</th>
        <th>Video Length</th>
        <th><input type="checkbox" name="checkboxselectall" title="Select All" />
        <button type="submit" class="deletebutton" name="delete_video" title="Delete the selected videos">Delete</button></th>
    </tr>
    </thead>
    <tbody>
        <form name="myform" action="">
        <tr >
            <td onclick="DoNav('<?php echo $url; ?>');">
                        <?php echo $this->result_videos[$i]["camera_name"]; ?> 
            </td>
            <td onclick="DoNav('<?php echo $url; ?>');">
                        <?php echo setlocalTime($this->result_videos[$i]["video_datetime"]); ?> 
            </td>
            <td onclick="DoNav('<?php echo $url; ?>');">
                        <?php echo ByteSize($this->result_videos[$i]["video_size"]); ?>
            </td>
            <td onclick="DoNav('<?php echo $url; ?>');">
                        <?php echo strTime($this->result_videos[$i]["video_length"]); ?>
            </td>
            <td>
            <input type="checkbox" value="<?php echo $this->result_videos[$i]["video_name"]; ?>" title="Mark this video for deletion"/>
            </td>
        </tr>

There is a bunch of code I’m omitting that is php code to build the table. Notice the input type checkbox value returns the name of the video. This is necessary to delete the video. My jquery code to process the value of each video:

jQuery(".deletebutton").on("click", function() {
    if (confirm("Are you sure you want to delete the selected videos?"))
    {
        var values = [jQuery('input:checkbox:checked').map(function () {
            return this.value;
        }).get()];
        alert(values);
        var $this = jQuery(this);
        jQuery.ajax({
            url: 'index.php?option=com_recordings&task=deletevideos&videonames=+values+&format=raw',
            type: "POST",
            success: function(data){
                $this.closest("tr").remove();
            }
        });
    }
});

The user can select one or more checkboxes and hit the delete button. This should return the values of the checkboxes (all the video names), they get deleted and I remove the rows in the table.

Here’s the problem. I’m using Joomla component development so I pass the values in the url. The names of the videos are way too long to do this. Someone can select up to 100 video names which makes the url string way too long. Can anyone suggest an alternative?

EDIT: I changed this to an array based on @Dasun feedback. See above for values. If I test this value with:

alert(values);

I get an output that looks like: blah.mp4,foo.mp4,bar.mp4. Which I expect. But each video name is on the query string which I don’t want. Either I’m not creating the array correctly or I don’t understand how you only pass the array object and not the entire contents of the array on the query string.

Answer 1

maybe if you request is a POST in your php code you wil be looking for $_POST[‘videonames’]
then you shuld pass them as the data parameter of the request.

also to pass it trought GET it shuld look like

   &videonames[0]=values[0]&videonames[1]=values[1]

maybe this code will work:

   $.ajax({
     type: 'POST',
     url: 'index.php?option=com_recordings&task=deletevideos&format=raw',
     data: { 'videonames': values},
     dataType: 'json',
     success: function(result) {
      alert('done');
     },
     error : function() {
      alert('error');
     } 
     });