CODEWITHSUNDEEP
jqueryasp.net-mvc
Bronzato
Bronzato

Reputation: 9332

Transforming an Ajax.ActionLink into a button

I have an ajax ActionLink. It works pretty well:

@Ajax.ActionLink("Supprimer", "RemovePersonToKeepInformed", "General", new { keepInformedPersonId = item.KeepInformedPersonId }, new AjaxOptions { Confirm = @UserResource.KeepInformedPersonRemoveConfirmation, HttpMethod = "Delete", OnSuccess = "JsonDelete_OnSuccess" })

Now I would like to show it like a button. Here is what I do:

<span class="button"> 
    @Ajax.ActionLink("Supprimer", "RemovePersonToKeepInformed", "General", new { keepInformedPersonId = item.KeepInformedPersonId }, new AjaxOptions { Confirm = @UserResource.KeepInformedPersonRemoveConfirmation, HttpMethod = "Delete", OnSuccess = "JsonDelete_OnSuccess" }) 
</span>

$('.button').button();

It works only if the user click on the text 'Supprimer'. It doesn't work if the user click anywhere in the button.

enter image description here

How can I fix it in order to allow the user to click anywhere in the button to trigger the ajax?

Thanks.

Upvotes: 0

Views: 2084

Answers (2)

tvanfosson
tvanfosson

Reputation: 532435

It would be easiest if you could style the link to display as a button rather than wrapping it with a SPAN. If that's not possible then, you'll need to add a click handler to the SPAN that invokes a click on the link. That might or might not be easy to do depending on whether the link's click handler stops propagation (you don't want your generated click to bubble up to the click handler on the SPAN). If that proves too difficult to do with the AjaxHelper, it shouldn't be too difficult to manually recreate the action of the helper with jQuery where you have more control over what happens.

The best solution, though, would be to change the styling to the link itself.

Upvotes: 0

SLaks
SLaks

Reputation: 887285

Apply the button class to the <a> tag itself by adding , new { @class = "button" }.

Upvotes: 2

Related Questions