I want to have a button on the front end (AngularJS) that refreshes the changes made to the database. I have tried the following in the html:
<button ng-click="reloadState" data-translate> Refresh Database </button>
In the app.js file, I have this function in my controller:
$scope.reloadState = function() {
$state.go($state.current, {}, {reload: true});
}
I have also tried:
$scope.reloadState = function() {
$state.reload();
};
and:
$scope.reloadState = function() {
window.location.reload();
}
Why does nothing happen when I click the button? Ps. I am using ui-router.
Try $state.transitionTo($state.current, {}, {reload: true})
The simplest way to do this is traditional Javascript by using location.reload();
http://www.w3schools.com/jsref/met_loc_reload.asp
Related
I'am making use of laravel pagination($data->links()) for ajax pagination using below code.
$(document).on("click", '.pagination a', function(e) {
e.preventDefault();
var url = $(this).attr('href');
loadArts(url);
});
function loadArts(url) {
$.ajax({
url : url
}).done(function (data) {
$(".image-masonry").html(data);
jsIntializations()
}).fail(function () {
alert('Articles could not be loaded.');
});
}
it's working fine, but upon clicking back button from an inner page, browser returning back to page1.
Here is the controller function
public function index(Request $request)
{
$arts = Art::with('artist')->orderBy('id','ASC')->paginate(10);
if($request->ajax()){
return view('art::art.list', compact('arts');
}
return view('art::art.index', compact('arts');
}
.image-masonary is the class in index.blade.php to which contents of list.blade.php is being loaded upon pagination.
This is the url : http://localhost:8000/admin/arts
I tried this method , history.pushState({ path: url }, '', url);
then back button is taking ajax route, but getting only broken view.
You may refer to the answer below
https://blog.pisyek.com/browsers-back-button-issue-after-logout-laravel-5
https://laracasts.com/discuss/channels/requests/back-button-browser?page=1
Please see this code.
html code
<script type="application" id = "abc">
<md-dialog>
{{loadServerFile();}}
</md-dialog>
</script>
javascript code
loadServerFile : function(){
$.ajax({
url: "/homepage/create"
success: function(){
console.log("success");
$scope.closeDialog();
}
});
}
Here closeDialog close the id = 'abc' dialog.
But console.log("success") calling is doing more than 10 times.
Why this kind of problem happen?
How can I make this function call once?
javascript code
angular.module("imageedit").service('canvas',['$rootScope','$mdDialog'],function($rootScope, $mdDialog){
...
start: function(url){
$mdDialog.show({
template: $('abc').html()
controller: 'GGG'
clickOutsidetoClose: false,
})
...
}
...
})
Here I called $mdDialog.show to call dialog.
But in fact I only want to call loadServerfile in GGG controller.
Have you got any answer?
What I expect: $rootScope.call(loadServerFile);
Based on the new information, that you do not want the dialog, in your GGG controller, add this code, which will run one time. It will place the result of the call in $scope.homepageCreateResult. If you don't need to make this call at all, and do not need the dialog, delete all of the code you reference.
$scope.homepageCreateResult = {};
$http.get("/homepage/create")
.then(function(resp) {
console.log('success', resp);
$scope.homepageCreateResult = resp.data;
});
In your HTML, just remove all of this:
<script type="application" id = "abc">
<md-dialog>
{{loadServerFile();}}
</md-dialog>
</script>
In many of code, closeDialog function only hides dialog and not really close dialog.
And showDialog can be called lots of times.
You cannot see that but according to your question, console.log is called lots of times so my expection will be right.
Just adding the bootstrap-confirmation extension for Bootstrap popover to some buttons on a project. I'm having issues with the options not being respected. I'm trying to get the popups to work as singletons and dismiss when the user clicks outside of them singleton and data-popout options, respectively - both set to true. I'm also not seeing any of my defined callback behavior happening.
I defined the options both in the HTML tags and in a function and neither works. Still getting multiple boxes and they don't dismiss as expected.
My JS is loaded after all other libraries and is in my custom.js file in my footer.
JS is as follows:
$(function() {
$('body').confirmation({
selector: '[data-toggle="confirmation"]',
singleton: true,
popout: true
});
$('.confirmation-callback').confirmation({
onConfirm: function() { alert('confirm') },
onCancel: function() { alert('cancel') }
});
});
An example of the box implemented on a button in my HTML is the following:
<a class="btn btn-danger" data-toggle="confirmation" data-singleton="true" data-popout="true"><em class="fa fa-trash"></em></a>
Any pointers would be appreciated. I even changed the default options in the bootstrap-confirmation.js file itself to what I want and still no luck.
Turns out I needed to rearrange a couple things to get this to work. I've left in the last_clicked_id etc stuff as I needed to add that to get the id value of what I'd just clicked.
// Product removal popup logic
var last_clicked_id = null;
var last_clicked_product = null;
$('.btn.btn-danger.btn-confirm').click(function () {
last_clicked_id = $(this).data("id");
last_clicked_product = $(this).data("product");
});
$('.btn.btn-danger.btn-confirm').confirmation({
singleton: true,
popout: true,
onConfirm: function () {
alert("DEBUG: Delete confirmed for id : " + last_clicked_product);
// TODO: Add AJAX to wipe entry and refresh page
},
onCancel: function () {
alert("DEBUG: Delete canceled for id : " + last_clicked_product);
}
});
I was a step ahead of myself with the callback logic which was not getting executed. Fixed by simply adding it to onConfirm: and onCancel: key values in the .confirmation() function. A bit of a RTFM moment there but this was unfortunately not very clear in the documentation.
I am trying to refresh the page on the back button to get the new data for article list. To be more specific I have an article list, and the article page, on both of them I have an option of liking an article. When a user likes an article on the article page, if it hits the back button the like icon on the article list page won't get refreshed with the new state. I have tried with making a function on clicking the back button, and then getting the data again, but the icon doesn't change. The data that I get on console.log is new data and I get the value for like=1 which is correct if the user has liked the article, but the icon doesn't change.
This is my code:
I get the articles like this in my front page controller:
ArticleService.all().then(function(data){
$scope.articles = data;
})
In my article page html I have a back button link:
<a ng-click="refresh()"></a>
And in my article list I check which value I have for like and then show the icon according to that:
<a ng-if="article.like == 1" ng-click="like(article)" class="subdued">
<img class="social-images" src="icons/heart.svg"/> Lik
</a>
<a ng-if="article.like == 0" ng-click="like(article)" class="subdued">
<img class="social-images" src="icons/heart-outline.svg"/> Lik
</a>
This is my function in the article controller:
$scope.refresh = function (){
return $state.go('main.front').then(function(state) {
ArticleService.all().then(function(data){
$scope.articles = data;
console.log(data);
})
})
};
But since that function is in the article controller it cannot refresh the data on the front page. How can I refresh the data in the front page controller from the page that has a different controller?
$stateProvider.state('myState', {
cache: false,
url : '/myUrl',
templateUrl : 'my-template.html'
})
try adding cache : false in your state to reload the state on enter ...
Try one of these:
1.
$scope.$on('$ionicView.beforeEnter', function () {
$scope.refresh();
});
$scope.refresh = function (){
return $state.go('main.front').then(function(state) {
ArticleService.all().then(function(data){
$scope.articles = data;
console.log(data);
})
})
};
2.
$scope.$on('$tateChangeSuccess', function () {
$scope.refresh();
});
It may be cache issue. So add,
<ion-view cache-view="false" view-title="My Title!">
</ion-view>
I'm developing admin panel to my website and decided to do it with knockout and sammy. But I am faced with a routing problem. I have two pages:
http://localhost/admin/element and http://localhost/admin/category.
On my element page I have the following Sammy config:
Sammy(function() {
this.get('#:currentpage', function() {
self.reloadPage(this.params.currentpage);
});
this.get('', function() {
this.app.runRoute('get', '#1');
});
}).run();
Everything works perfect but if I try to go to another page (by usual link, e.g. Edit Categories) I just get to the empty route on the same page, so I just cannot go to another page with link. Any ideas how to fix that?
Don't use '' in your Sammy configuration. Try '/' for root page or '/admin/element' for your elements instead.
var Router = function() {
var sammy = new Sammy.Application(function() {
this.get('#:currentpage', function(context) {
alert(context.params.currentpage);
});
this.get('/admin/element', function () {
this.app.runRoute('get', '#1');
});
}),
run = function() {
sammy.run();
};
return {
run: run
};
};
$(function() {
var r = new Router();
r.run();
});
PS: The example uses version of Sammy 0.7.1. In version 0.6.3 there is another behavior.
This works if you have an action link and want to click through to another page
`<li>#Html.ActionLink("Admin Action Link Test", "Admin", "Home")</li>
this.get('/Home/Admin', function ()
{
location.assign("/Home/Admin");
});`
or you can do this using the hash
<li>About Full Path</li>
this.get('#/Home/About', function ()
{
location.assign("/Home/About");
});