Question

I have this page

<script type="text/javascript">
$(document).ready(function () {
    $("#delete").click(function () {
        if (confirm) {
            $("#divSchedules").load('@Url.Content("~/Export/ScheduleDelete/")');
        }
        else {
            return false;
        }
    });
}); 
</script>
<table>
<tr>
    <td>Description</td>
    <td>Schedule</td>
    <td>&nbsp;</td>
</tr>
@foreach (var item in Model)
{
    <tr>
        <td>@item.Description</td>
        <td>@item.Schedule</td>
        <td><a href="@Url.Action("ScheduleEdit", new { @id = item.Id })" class="popLink"><img alt="" src="@Url.Content("~/Content/images/icons/edit.gif")" style="border:none;" /></a>
            <img alt="" src="@Url.Content("~/Content/images/icons/delete.gif")" style="border:none;" id="delete" /></td>
    </tr>
}
</table>

The Jquery function there is being triggered by elements with id=”delete”, for instance, a img tag.

Can someone help me please, I need to have this Jquery function to have a parameter passed using onclick like for example

$(document).ready(function () {
    $("#delete").click(function (id) {
        if (confirm) {
            $("#divSchedules").load('@Url.Content("~/Export/ScheduleDelete/" + id)');
        }
        else {
            return false;
        }
    });
}); 

<img alt="" src="@Url.Content("~/Content/images/icons/delete.gif")" style="border:none;" onclick="delete(@item.Id)" />

I have added id on jquery as parameter. I tried that but always having compile error “id not in context” thing.

Could someone please help? Thank you very much.

Answer 1

I think you need to change this:

$("#divSchedules").load('@Url.Content("~/Export/ScheduleDelete/" + id)');

to this:

$("#divSchedules").load('@Url.Content("~/Export/ScheduleDelete/")' + id);

And you can’t have multiple elements with id="delete". You should use a className instead to “group” elements together. The IDs should be the unique identifiers from your server. So my thinking is to give all your delete button the ‘delete’ class, and attach a click handler to all elements of that class. The ID of the clicked element can be easily extracted using DOM object property access.

In code:

<img alt="" src="@Url.Content("~/Content/images/icons/delete.gif")" style="border:none;" class="delete" id="@item.Id" />

$(document).ready(function () {
    $(".delete").click(function() {

        // get ID of clicked image
        var id = this.id
        if (confirm) {

            // concatenate ID to URL
            $("#divSchedules").load('@Url.Content("~/Export/ScheduleDelete/")' + id);
        }
        else {
            return false;
        }
    });
}); 

Keep in mind, that IDs should not start with a number so you may or may not need to use a prefix (I don’t know what you’re IDs look like).