Question

I am building an application in Code Igniter and am currently building some functionality where a user can approve or deny a request on the page by clicking either a tick or a cross icon on the page. These icons are anchor tags.

The trouble I am having is passing an ID for that individual request to the AJAX form.
I would have no issue implementing this functionality in a form as I would simply use a hidden input field which would have it’s value saved in it set from the controller. There can be many of these requests but they would always have their own individual ID as it is looped through in the view.

As I am using anchor tags instead of a form I am not sure where I could store the id for that request in the markup.
Here is the code:

        <p><span class="bold">Authorise This Request?: </span></p>
            <p>
                <a href="" class="authorise" id="allow"><img src="/igniter/images/tick.png" /></a>
                <a href="" class="authorise" id="deny"><img src="/igniter/images/cross.png" /></a>
            </p>
        </div>
        <?php $i++; ?>
    <?php } ?>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('.authorise').click(function() {
        $.ajax({
            type: "POST",
            url: 'holiday_request/authoriseRequest',
            data: 'check=' + $(this).attr('id'),
            success: function(data) {

            }
        });
        return false;
    });
});
</script>

As you can see I use the ID of the input field to determine later on whether to allow or deny it. All I want to do is to be able to pass the ID for that request through which is currently in the controller, so adding ‘&id= blahblahblah’ onto the end of the URL variable in the AJAX call.

Is there a way I can do this without having to use a form instead of anchor tags?

Answer 1

You can use HTML5 data-* Attributes

<a href="" class="authorise" data-id="1" data-check="allow"><img src="/igniter/images/tick.png" /></a>
...

Then get the value and add it to ajax data parameter

data: 'check=' + $(this).data('check') + '&id=' + $(this).data('id'),