Jquery Mvc-3 Function with parameter

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.

Your image has a JS function, but your jQuery is being wired to a ID with 'delete'... IDs should be Unique. Create a function which takes a parameter, and put your jQuery inside that. — Phill
– Phill, Commented Aug 4, 2011 at 2:30

karim79 · Accepted Answer · 2011-08-04 02:49:43Z

2

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).

edited Aug 4, 2011 at 2:49

answered Aug 4, 2011 at 2:24

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Badz Over a year ago

I'll try this one out and get back when it is done. Thanks a lot!

Collectives™ on Stack Overflow

Jquery Mvc-3 Function with parameter

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related