Recently I have come into a problem where I need to update the page using angular, update the url, but not reload the page. Confused? Let me further explain. I have a table of data (uses ng-grid) and I want it so when I click row 1 angular prints out a one and changes the url to 'currentUrl/1' without reloading the page. Then I click row 4, a 4 prints out and changes the url to 'currentUrl/4'. Is this possible with angular to do this. To make my page not reload every time I clicked a row, I put the following
var lastRoute = $route.current;
$scope.$on('$locationChangeSuccess', function(event) {
$route.current = lastRoute;
});
Which it does everything I want, changes url, page doesn't reload, but now angular is not updating that number. What am I doing wrong?
It would help to see the part of the code that prints out the number, but your code for changing the URL without refreshing the route looks fine.
Without more information, a shot in the dark is that your controller is updating a $scope variable but this update isn't getting applied by Angular.
Try wrapping the variable update like so:
$scope.$apply(function() {
$scope.numberToPrint = newNumber;
});
The basic idea behind calling $scope.$apply is that you have to manually coax Angular into updating any bindings listening to the variable. Although this should normally be taken care of, what is possibly happening is that by preventing a route change from occurring you are not actually having Angular digest the new variable.
Here is an article which can explain $apply better.
Related
In Angular I have loaded a page. After I press a button "Change" a function is called
ng-click = "changeFunction()"
in which the content of the page is re-evaluated and changes (the change is mostly in {{textVariables}} and images of the page).
If the content of the page being changed is less, this switch is fast enough to not be an issue. However if a lot of the content is being changed, the button appears pressed for an extended period of time, which gives the appearance that something in the page has broken (even though it has not, it is just taking time to re-evaluate the content).
How do I then modify my changeFunction() in the angular controller to mark a flag true when it starts changing and false when it finishes changing, so that I can use the flag to perhaps show the user something is happening?
To be clear, I am just asking for the javascript part of the code, the UI element I can design.
This should be a straightforward addition:
changeFunction() {
if (!this.saving) {
this.saving = true;
}
// Your code here;
// This is the last bit of the method:
this.saving = false;
}
Then elsewhere in the controller (or the template) you can check for this.saving or (if you're using 'vm' in the template) vm.saving.
I have taken a text-box to input the content and after the input , I have created refresh() btn to refresh. My code is working fine. But the part is On the click of refresh() button , only the page should get refreshed , but my code is refreshing the complete window. I tried using $route.reload(), but it din't work properly. I browsed through some sites, but I din't got the appropriate result. I tried my best to do it. But hopefully, I couldn't continue further.
My plunker : https://plnkr.co/edit/0r7DXPWWtXmFYsHwY6Q3?p=preview
Here you can check it out.
Why you want reload the whole page? You can do just clear the fields instead of reload the whole page.
$scope.reloadPage = function(){
$scope.name = '';
}
or trigger your page load function or code
$scope.reloadPage = function(){
//You should call the function as what you did when the page load.
}
EDIT:
I know that functionality. But I have n number of text-fields. So its not an good practice to carry it
Then you should use with an object like $scope.objectname={textboxes1,2.....};
So you can easily clear the object like $scope.objectname={};
I have update your plunkr. please take a look that.
https://plnkr.co/edit/UxTNY1zgD4CrUEvERcHT?p=preview
I have a multi-page form where the url remains the same when moving between pages.
I am trying to change some HTML after the submit button has been clicked.
I can run this in the console and the result is as I want it.
How can I get this run after submit?
I've tried window.onload and document.onload functions but they are not working. I've also tried an onclick function but it seems moving to the next page stops this working?
var confirm = document.getElementById('gform_confirmation_message_14');
if(confirm) {
document.getElementsByClassName("entry-title")[0].innerHTML = "PAYE Worker";
}
Thanks
Perhaps the gform_page_loaded event? From the documentation it:
Fires on multi-page forms when changing pages (i.e. going to the next or previous page).
$(document).on('gform_page_loaded', function(event, form_id, current_page) {
// do stuff
});
There are a bunch of javascript events available, and if not this one, maybe another serves your purpose, e.g. gform_post_render.
I removed the Javascript completely and created a confirmation in Gravity Forms that redirects to a new page upon submission.
Created a title for this new page "PAYE worker"
Problem solved
A similar question has been asked here. And I know how to do it in a non angular context.
But to learn the framework I made my own chat using Angular.
Since I am just starting out I would like to know what would be the best course of action for this? Using jQuery would work in a controller but that doesn't seem like the right way. Since you would have to remove the listener once the controller has been destroyed.
To be clear here's what I would like to happen:
If the user switches tabs or windows the title of the page get's updated to reflect the 'missed' entries.
Once he comes back the title resets back to another value.
The most 'angular' way would be to create a directive on some element which listens for the events and changes a scope variable.
I would create an API like this:
<html ng-app="myApp" window-active-model="appIsActive">
<title>{{appIsActive ? 'My Super App' : 'Come back to me!'}}</title>
</html>
Here is the jquery version if anyone needs in future
$(function() {
// Get page title
var pageTitle = $("title").text();
// Change page title on blur
$(window).blur(function() {
$("title").text("Don't forget to read this...");
});
// Change page title back on focus
$(window).focus(function() {
$("title").text(pageTitle);
});
});
I have a piece of code in jQuery that I use to get the contents of an iFrame after you click a link and once the content is completed loading. It works, but I have a problem with it repeating - at least I think that is what it is doing, but I can't figure out why or how.
jQuery JS:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
$("#fileuploadframe").load(function(){
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{action:"savePage",html:response, id: theID},
function(data){
alert(data);
});
});
});
HTML Links ( one of many ):
<a href="templates/1000/files/index.php?pg=0&preview=false"
target="fileuploadframe" class="pageSaveButton" rel="0">Home</a>
So when you click the link, the page that is linked to is opened into the iframe, then the JS fires and waits for the content to finish loading and then grabs the iframe's content and sends it to a PHP script to save to a file. I have a problem where when you click multiple links in a row to save multiple files, the content of all the previous files are overwritten with the current file you have clicked on. I have checked my PHP and am pretty positive the fault is with the JS.
I have noticed that - since I have the PHP's return value alerted - that I get multiple alert boxes. If it is the first link you have clicked on since the main page loaded - then it is fine, but when you click on a second link you get the alert for each of the previous pages you clicked on in addition to the expected alert for the current page.
I hope I have explained well, please let me know if I need to explain better - I really need help resolving this. :) (and if you think the php script is relevant, I can post it - but it only prints out the $_POST variables to let me know what page info is being sent for debugging purposes.)
Thanks ahead of time,
Key
From jQuery .load() documentation I think you need to change your script to:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
var lnk = $(this).attr("href");//LINK TO LOAD
$("#fileuploadframe").load(lnk,
function(){
//EXECUTE AFTER LOAD IS COMPLETE
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{
action:"savePage",
html:response,
id: theID
},
function(data){alert(data);}
);
});
});
As for the multiple responses, you can use something like blockui to disable any further clicks till the .post call returns.
This is because the line
$("#fileuploadframe").load(function(){
Gets executed every time you press a link. Only add the loadhandler to the iframe on document.ready.
If a user has the ability via your UI to click multiple links that trigger this function, then you are going to run into this problem no matter what since you use the single iframe. I would suggest creating an iframe per save process, that why the rendering of one will not affect the other.