Component function as Ajax callback - ajax

Question

I have a menu component that use Ajax call for dynamic HTML rendering, so the browser won't refresh when the user click on one of the menu item. We use jQuery-ajax-unobtrusive to perform the Ajax call. This part works well.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- Some HTML ... -->
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="/Home/Contact"
data-ajax="true"
data-ajax-method="GET"
data-ajax-mode="replace"
data-ajax-success="setUrl"
data-ajax-failure="redirectToLogin"
data-ajax-update="#renderbody">Contact</a>
</li>
</ul>
</div>
</div>
</div>
And I use Ajax callback like this
data-ajax-success="setUrl"
data-ajax-failure="redirectToLogin"
I was wondering if these callbacks can be encapsulated in Angular2' component functions written in Typescript ? For the moment, I have a Javascript error telling that it cannot found methods 'setUrl' and 'redirectToLogin'.

Answer 1

Here is a sample implementation of this within a custom Angular2 directive:
#Directive({
selector: '[data-ajax]',
host: {
'(click)': 'onClick($event)'
}
})
export class DataAjaxDirective {
#Input('href')
url:string;
#Input('data-ajax')
enabled:boolean;
#Input('dataAjaxMethod')
method:string;
#Input('dataAjaxMode')
mode:string;
#Output('data-ajax-success')
success:EventEmitter<any> = new EventEmitter();
#Output('data-ajax-failure')
failure:EventEmitter<any> = new EventEmitter();
constructor(private http:Http) {
}
onClick(event) {
event.preventDefault();
event.stopPropagation();
this.http[this.method.toLowerCase()](this.url).map(res => res.json()).subscribe(
(data) => {
this.success.emit(data);
},
(err) => {
this.failure.emit(err);
}
);
}
}
And the way to use it:
#Component({
selector: 'my-app',
template: `
<div>
<a href="https://mapapi.apispark.net/v1/maps/"
data-ajax="true"
dataAjaxMethod="GET"
dataAjaxMode="replace"
(data-ajax-success)="onDataReceived($event)"
(data-ajax-failure)="redirectToLogin()"
data-ajax-update="#renderbody">Contact</a>
<ul>
<li *ngFor="#map of maps">{{map.name}}</li>
</ul>
</div>
`,
directives: [ DataAjaxDirective ]
})
export class AppComponent {
onDataReceived(data) {
this.maps = data;
}
}
See this plunkr: https://plnkr.co/edit/Csw9bq7Ufa3bGXkqpSyN?p=preview.

Answer 2

JQuery needs global setUrl function: window.setUrl = function(){}; which is not way to go.
You could write your own implementation of jquery.unobtrusive-ajax.js using custom Directive.