I have list of appointments in my database and I want to add a delete button for each appointment so when the delete button is licked the appointment gets deleted.
HTML Code
' <td>\n' +
' <a >Delete</a> </td>\n'+
' </tr>\n' +
this is the delete button
Route.php
$api->delete('appointments/del', 'AppointmentsController#delete_appointment');
I have added this route in laravel.
AppointmentsController.php
public function delete_appointment(){
console.log("delete");
}
now I am unable to call this function on the button click.
I have tried ng-click and href ethod too, but no success.
you can not directly call laravel controller function from angular. you will have to make an http call from your angular application using the url (route) of your laravel controller function.
Related
I have searched on StackOverflow for the last five hours and none of the related answers quite solve my problem. I have an UI-Router state that loads a long list of messages generated from a custom directive. This page is linked too in many places pointing to a different message. I want to scroll to the currently selected message.
I can get this to work using $anchorScroll if I surround the call with a $timeout. $timeout(function(){$anchorScroll()};) but if the $timeout is not there a call to $anchorScroll does nothing since the View has not completely loaded.
Here is most of the relevant code.
<message id='message{{message.id}}'
ng-repeat='message in messages'
message='message'
ng-class="{'current':current == 'message{{message.id}}'}" >
</message>
In the controller I set current to $scope.current = $location.hash(). This all works.
If I load the page like #/messages#message100 directly the page will correctly scroll. However, if from a different view I use the a link such as this:
<button ui-sref="message-state({'#':'message{{message.id}}'})>
Go To Message {{message.id}}
</button>
The page will not automatically scroll to the correct anchor since the message list has not been made yet. But by putting the call to $anchorScroll() in a $timeout I can make the page scroll.
I don't like using $timeout for this purpose. I know I am not supposed to manipulate the DOM in a controller like this.
I have tried registering the call to $anchorScroll() with many of the $stateProvider events such as:
$state.$on('$viewContentLoaded', function(event) {
$anchorScroll();
});
But even at the time the $viewContentLoaded fires the message list does not exist in the DOM and the page does not scroll.
IWhat is the best way to make the UI-Router scroll based on the $location.hash().
Even I was facing a similar situation and after days of try and error, I came up with this.
In ui router add an id parameter to the state on which you want to enable the scroll.
$stateProvider.state('index', {
url: '/',
params: {
id: null
}
})
Then in the html use ui-sref
<li><a ui-sref="index({id: 'about-us'})" >About Us</a></li>
At last in the app.run module detect the state change using
$rootScope.$on('$viewContentLoaded', function(event){
if ($state.current.name == 'index') {
if($stateParams.id) {
$anchorScroll.yOffset = 150;
$location.hash($stateParams.id);
$timeout(function(){$anchorScroll()}, 1000);
}
}
});
Hope this helps. Would do a plunkr if needed.
in currently using angular-ui-router in my angularjs app. With main routes triggered from ui-sref directive in the top nav. How can I refresh a route even if I'm clicking on the current route.
Also if I'm in a subroute, then I want to refresh the view with the main route view.
Do I move this navigation into a custom function called upon ng-click?
So what I did was to create function within my controller:
$scope.navigateTo = function(stateName){
if($state.current.name == stateName){
$state.go($state.$current, null, { reload: true });
}else{
$state.go(stateName, {inherit:false});
}
}
this was then called from within my html via my ng-click directive:
ng-click="navigateTo('appname.resources')"
<a class="seecode_button" href="#{{w.CouponID}}" ng-click="newwindow(w)" data-toggle="modal" data-target="#{{w.CouponID}}">CLICK Here</a>
$scope.newwindow = function(w) {
$window.open(w.LandingPageURL, '_self');
$window.open('#','_blank');
};
I am try to make when some one click on "CLICK Here" then need to open new window but need stay on current tab.
In my code current tab open in page its ok but popup also gone because of it refresh the page . I am using angular js 1.2.17 and for popup i am using bootstrap.js v3.0.0
If you don't want to refresh the page, then use an empty href attribute.
My question is very simple.
In ADF Mobile, I have HTML page and there is a button on it. I want to run JavaScript code on button click and navigate to AMX Page. How I can achieve this functionality.
Thank You!
In button properties in AMX page click action listener and create Bean and Method
Add below code in order to execute zoomIn JS Function
AdfmfContainerUtilities.invokeContainerJavaScriptFunction("com.mohamed.ios.feature1",
"zoomIn",
new Object[] { });
First Parameter: Feature Id
Second Parameter: Javascript Function
Name Third Parameter: Java Script Function Parameters
If it's HTML page once you choose a button in property inspector under javascript you will find all the javascript events you can use( if property inspector not visible click View -> Property Inspector).
you can add the JS function in the OnClick event then in that JS function you can use below code to go to the feature that has your AMX page.
adf.mf.api.gotoFeature("feature0",
function(req, res) { alert("gotoFeature complete"); },
function(req, res) { alert("gotoFeature failed with " +
adf.mf.util.stringify(res); }
);
Make sure you include the JS file in feature under content tab.
And in order to navigate to AMX page from a button on another AMX page pass the flowCase to below method
public void doNavigation(String flowCase) {
AdfmfContainerUtilities.invokeContainerJavaScriptFunction(AdfmfJavaUtilities.getFeatureName(),
"adf.mf.api.amx.doNavigation",
new Object[] { flowCase });
}
The doNavigation method is calling a standard ADFM JS API called adf.mf.api.amx.doNavigation and it passes the flowCase name to it.
I'm currently working on a project in angular. I'm trying to show a loading spinner every time the page changes. To accomplish this we are using ngRoute module and listening for routeChangeStart,routeChangeSuccess,routeChangeError events.
Here's the code:
$scope.$on('$routeChangeStart', function (event, param) {
var html = "<div class='panel-body'>"
+ "<div class='col-md-4 col-md-offset-4' style='top: 50%;'>"
+ "<i class='fa fa-spinner fa-spin'></i> Caricamento in corso..."
+ "</div>"
+ "</div>";
that.myModal = $modal.open({
template: html,
backdrop: 'static'
});
});
$scope.$on('$routeChangeSuccess', function (event, param) {
that.myModal.dismiss('nessuna');
});
$scope.$on('$routeChangeError', function (event, param) {
that.myModal.dismiss('nessuna');
});
This works, but only the first time a certain page is changed. I try to explain better: When we are in page X and navigate to page Y the modal is shown and then hidden after page changes. If then i go back to page X and navigate to page Y again the modal spinner is now shown.
When debugging I can see the modal.open() executing, but it's never shown. It looks like angular is somehow delaying the command.
Does anyone know why is this happening? Has anyone encountered this problem before?
About displaying the spinner solution capturing $http requests, here you have some info to get started:
http://lemoncode.net/2013/07/31/angularjs-found-great-solution-to-display-ajax-spinner-loading-widget/
Showing Spinner GIF during $http request in angular
The idea is to intercept a $http request and display the spinner, then on the end request or promise response (error and success) check if there are pending requests, if not hide the spinner.
If you need more info, give me a buzz, I have further developed this and taken some solutions for issues like I don't want to show the spinner for some particular requests.
Whatever solution you keep to catch route change events, I don't understood why your modal doesn't trigger.
Here is a demo in plunker (I used ui-bootstrap to handle modal).
You can use this nice script too called Pace to automatically start a loader based on http request.
Taken from their documentation:
Pace will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again!