Re-rendering the view without reloading/refreshing the AngularJS Application - javascript

The application I'm working on right now contains lots of ng-include directive and I hate to reload the whole application just to see an HTML update.
I've tried Replaying the XHR manually using the Network and it gets back the updated HTML View but definitely, it doesn't get reflected in the DOM.
What I am searching for is a way that all the HTML views get fetched again without me hitting the reload button.
It can be a browser extension or a code snippet (which I'll turn into a browser extension to be used for others) or any other sane way.

Check disable cache checkbox on network page and then try replay XHR. I can't see why you don't want to reload the whole page but whatever.

Related

Angular5(Angular Universal) page source issue

I am working on server side rendering project followed by Angular Universal guide. Everything is working fine, except when I am navigating to other routes other than first page, I still see first page's source when hitting "view page source" in browser.
I have gone through this issue, but in my case routes are not under authorization.
Any idea why I cannot see page source of other routes?
That's normal behaviour. When you make the first request to the server, the page content will be rendered server side, which means that you'll be able to see that content if you see the page's source.
After that, when you navigate through your app's links, all content is rendered by javascript, with data fetched from server using ajax. As you are not changing page (it's a Single Page app) , the View source in the browser's page is never updated. If you type in directly the url of another route in the browser, you should get the corresponding content if you check the source
I solved this problem.In my project I have used Hash Location Strategy. Removing HashLocation Strategy allows me to view source code of other pages.

Refreshing page after making changes doesn't render in web browser

I'm learning angular and have cloned the repository here. I've installed the dependcies through npm and have the web server running. I can load the page up at localhost:4000.
If I make a change to the index.html (a simple text change), I can see the results when refreshing my browser. But, if I make a change to an html page that's loaded as an angular directive, the changes don't appear in my browser (Chrome, FIrefox). I tried F5, Ctrl+F5, Shift+F5, etc. Even restarting the web server doesn't do anything.
Is there something I need to set up in the angular code so that refreshes work properly?
https://github.com/codeschool/WatchUsBuild-ReadingListAppWithAngularJS
Note, this is Angular 1x proj.
Should I blame caching
It's cached in your browser. Simply have your dev tools open and under networking tab mark disable cache.
Note:- this will work only if dev tools are open not otherwise.
I can recommend live-server which detect the changes and update make an reload in browser.
One more thing Angular it self use template cache by default so that can also cause the problem and in that case you need to rebuild your app on changes.
read about template cache
Yes that happens with angular because the browsers usually cache the webpages and when you make changes in html and then refresh, the browser loads the cached pages instead. It doesn't happen every time but most of the time. So try clearing the cache of the browser and then load the page. It should work correctly.
Angular 2 and ember has some mechanism called watches that look for changes you make in the files, and whenever it detects a change, it re compiles all files and load a fresh copy for you. But in Angular 1 I don't think there is such a mechanism and I faced this problem my self a lot. And this is the solution I have come across so far. Hope someone else has a better solution.

How to apply JavaScript changes in Firebug?

I am playing around with a JavaScript code in Firebug and I would like changes to take effect in that page. Especially when there is code inside jQuery's $.ready() function.
Some kind of refreshing the page without losing of what has been edited. Is there any way to do that?
Page changes made via Firebug or via Javascript do not persist from one page load to another. Each time a page is loaded, the original HTML, CSS and JavaScript is parsed and loaded (from cache or from the server). Any prior changes will not be there.
The only way for a dynamic page change to be still present after a refresh is for you to save the changed state to a persistent location and then rebuilt the appropriate page content from that state each time the page is loaded.
But, if you make a change to the page and store some state in a cookie, in local storage or on your server, then you can have JavaScript that runs each time the page loads that gets that state from wherever you stored it and then applies the appropriate change to the page. If you're saving the state on the server (on behalf of this particular user), then you could even have the serve modify the page contents before it is served to the browser.
You can type JavaScript code in the Firebug command line and see changes take effect on the page. You can do the same in the Firefox, Chrome, Opera and Safari DevTools.
Changes to pages done via Firebug do not persist. After a page reload the original sources will be loaded again (from the server or the browser cache).
Currently Firebug doesn't allow you to edit the code of the loaded scripts directly.
Though you can execute JavaScript code within the context of the page by using the Command Line:
Or for longer scripts you can use the Command Editor:
But again, code you executed there will be gone as soon as the page is reloaded.
To make permanent changes to the JavaScript code of a page you need to have access to the server and make them there.

Automating Add to Cart Javascript Sequence without browser open with Python

I'm looking for a method to automate an add-to-cart process using Python WITHOUT needing to have a browser window open.
I've tried using modules such as mechanize but it does not have the functionality of directly "clicking" a web element
Currently I've been able to automate this process using Selenium but the process of having to open the browser and load web elements, photos, etc adds up to a lengthy process where time is of the essence.
An example page that I would like to automate is here :
http://store.nike.com/us/en_us/pd/kd-vi-elite-basketball-shoe/pid-972328/pgid-972324?cp=usns_twit_041214_basketball_kdelitehome
Any direction is greatly appreciated.
It seems that in the web page you listed, the "Add to Cart" button is actually a form submit button. What you can do is simulate the submission of the form by doing a POST request, with all the necessary form parameters, which you can get from all the <input> elements on the page.
A possible python implementation may be:
Download the page with urllib2. You will probably have to enable cookies.
Parse the page using BeautifulSoup or similar, and find all the <input> tags and their values.
Construct a new POST request with all these params (while maintaining cookies).
You can use your Browser's Network sniffing capabilities to see an actual request being sent, and try to mimic it using the above tools.
Hope it helps.

How do you keep content from your previous web page after clicking a link?

I'm sorry if this is a newbie question but I don't really know what to search for either. How do you keep content from a previous page when navigating through a web site? For example, the right side Activity/Chat bar on facebook. It doesn't appear to refresh when going to different profiles; it's not an iframe and doesn't appear to be ajax (I could be wrong).
Thanks,
I believe what you're seeing in Facebook is not actual "page loads", but clever use of AJAX or AHAH.
So ... imagine you've got a web page. It contains links. Each of those links has a "hook" -- a chunk of JavaScript that gets executed when the link gets clicked.
If your browser doesn't support JavaScript, the link works as it normally would on an old-fashioned page, and loads another page.
But if JavaScript is turned on, then instead of navigating to an HREF, the code run by the hook causes a request to be placed to a different URL that spits out just the HTML that should be used to replace a DIV that's already showing somewhere on the page.
There's still a real link in the HTML just in case JS doesn't work, so the HTML you're seeing looks as it should. Try disabling JavaScript in your browser and see how Facebook works.
Live updates like this are all over the place in Web 2.0 applications, from Facebook to Google Docs to Workflowy to Basecamp, etc. The "better" tools provide the underlying HTML links where possible so that users without JavaScript can still get full use of the applications. (This is called Progressive Enhancement or Graceful degradation, depending on your perspective.) Of course, nobody would expect Google Docs to work without JavaScript.
In the case of a chat like Facebook, you must save the entire conversation on the server side (for example in a database). Then, when the user changes the page, you can restore the state of the conversation on the server side (with PHP) or by querying your server like you do for the chat (Javascript + AJAX).
This isn't done in Javascript. It needs to be done using your back-end scripting language.
In PHP, for example, you use Sessions. The variables set by server-side scripts can be maintained on the server and tied together (between multiple requests/hits) using a cookie.
One really helpful trick is to run HTTPFox in Firefox so you can actually monitor what's happening as you browse from one page to the next. You can check out the POST/Cookies/Response tabs and watch for which web methods are being called by the AJAX-like behaviors on the page. In doing this you can generally deduce how data is flowing to and from the pages, even though you don't have access to the server side code per se.
As for the answer to your specific question, there are too many approaches to list (cookies, server side persistence such as session or database writes, a simple form POST, VIEWSTATE in .net, etc..)
You can open your last closed web-page by pressing ctrl+shift+T . Now you can save content as you like. Example: if i closed a web-page related by document sharing and now i am on travel web page. Then i press ctrl+shift+T. Now automatic my last web-page will open. This function works on Mozilla, e explorer, opera and more. Hope this answer is helpful to you.

Categories