I'm writing a simple angularJS layer to a django app. On initial page load, the view content is already populated in the ng-view node. When I "manually" execute a route change (via ng-click callback), I do a request to the server to fetch the chromeless html content and overwrite the content of the ng-view node.
My issue is that on initial page load, the route change is executed and thus makes another call back to the server to fetch the same content that was pre-populated in the ng-view node.
I'm not sure if this is just the way Angular works or if it is that django uses trailing slashes and angular does not and thus thinks it is a different route?
Is there a way to prevent this from happening? Perhaps canceling the change in $routeChangeStart event?
Thanks! long time SO reader, first time poster.
Related
Folks,
I am pretty sure I am not the first one to stumble on this problem. But somehow I am unable to find any relevant resources out there.
Here is my issue, I have a backend in Django and my front completely written in Reactjs- React Router - Redux (nice combo right).
when entering the url webhost.com/, django provides me with a page with links to a bundle that is my whole react application and different stylesheets
The problem arise when I want to refresh a page, the browser still tries to query the server even though a route exists in my react-router configuration.
I had a look at the answer here (catch-all option) React-router urls don't work when refreshing or writting manually , but I don't quite understand it and I am afraid to have a new redux state everytime Django will provide the user with a new page.
You can setup up a wildcard url pattern that will render the same view that gets rendered when a request is sent to webhost.com. I don't know if that's going to retain your store though.
My view function takes a long time until returning a template. So, I'd like to show something to a user while running the function.
Is it possible to show loader until a start page is loaded?
What's important is the loader should be shown when loading the first page after first visit of a user?
Thank you for reading my question.
You would have to fetch the page using JS. You could use something like Intercooler or PJAX which provides HTML attributes that show a spinning animation while loading the content via AJAX.
A better solution would be to make your page faster. There are several things you should consider:
Check that all Model fields that you are using for filtering or sorting have set db_index=True unless the tables are small (few hundred entries) or the fields are already unique or foreign/primary keys. Also check that your DB does sorting and merging in RAM not on disk (== the DB has enough RAM resources and has also the correct configuration to use it).
Sometimes, if you show a list of model instances you end up making separate DB requests per row if you access related models in your template. Again, check which statements your DB executes and have a look at Django's select_related, prefetch_related, values and values_list methods that can dramatically increase lookup performance. Make sure your template context contains all necessary data and only the necessary data (e.g. pageing, how much, or maybe you should consider a search index like SOLR or Elastic which can be integrated nicely via Django Haystack).
Load everything except heavy data at once in your main view, which also includes JS. The JS then uses AJAX to load the rest from a second Django view which returns an HTML snippet that your JS simply adds to the DOM.
It really depends on how comfortable you are with JS and how much you want to stick to HTML to make as much use of Django as possible (thinking of Django Forms for example). But first, tune your DB setup (disclaimer: I have written that article).
it's better to make a request with javascript to your Django endpoint, until you get a response back from your server you should show your loader, and when you get the response back successfully you should make display: none for loader and mak display: block for your loaded content
Create a function in views.py and send JsonResponse. URL example: http://localhost:8000/somedata
Render any other HTMLlet's say it's index.html. URL example: http://localhost:8000/home
That index.html file need to have some JavaScript, let's say main.js
In main.js make a request to http://localhost:8000/somedata and fetch data. Use async javascript that way you can easily track fetched data or not
My django app needs to display data on my homepage which it collected from third party. Requesting the information and waiting for response takes about a second, which is too long processing time for a homepage. The data which my app receives doesn't change often, so there is no reason to fetch that data every time homepage is being rendered. Instead, I want to retain the data and have my app make a request only if the last "refresh" has been done more than an hour ago.
Since using global variables in django is apparently a no-no, I'd need to make a database model which will at all times hold a single record. This feels wrong. Is making a one-record table really a way to go here?
Instead of creating a model to cache the remote site's response, you can use Django's caching framework. More specifically, you can cache a specific view and set a timeout for the cached view. See this documentation page for more details on how to do that.
I had the following idea: my page at example.org serves classic HTML from the server. Besides, EmberJS is loaded, too, and waiting to come into action:
as soon as somebody hits an ember route then, for example example.org/#/login, the current should be replaced by what the view renders for it. From then, the whole app should serve as one-page-app.
Is that a good idea? Anyway, I don't know how to get that started. Overriding View's appendTo method or setting the rootElement property as in http://emberjs.com/guides/configuring-ember/embedding-applications/ does not suffice because if that were the body, the view output is just appended there…
If your entire Ember application requires a user to be logged in, it is valid to have two separate "apps":
A regular non single-page application (server-side using rails, PHP or C#) with a sign up and login pages
A single-page application (i.e. Ember) send as soon as the user hits the login button in your regular app
You will have 2 index.html pages, one for each application (and it's okay to do that!). The URL of the Ember App could be under example.org/app/.... You will need to configure the router of the regular application to server your Ember App for all URLs starting with /app/.
Does that help? :)
I am using the JQuery load function to load part of my page. Can I access the variables from that page in the page that loads it. e.g.
Page A uses JQuery load function to load B
Page B loads and sets a variable in context called pageB_var which holds a django object
Page A can then access this variable by doing {{pageB_var}} since it was added to the context
If not what is the best way of doing this?
Thanks
No. Page B's rendering context is irrelevant and unreachable by the time you get B's response.
Here's what happens:
Page A is rendered in the server. during this time, its context exists. when the server is done rendering it, it sends the rendered page to the client. the client web browser then runs the javascript including your jquery load() to call the server again and tell it to render B. at this point the process that rendered page A doesn't exist anymore, so for page B to send stuff to page A's rendering you would have to make time travel....
The way to do this, is for page B to return a JSON object, and then use the (javascript) callback function given to load() to render changes to the page based on this JSON response from B.
It sounds like you're using an asynchronous request to update part of a page, receiving a partial HTML response and replacing part of the markup of your page with this response.
You've found that this obviously limits you to updating information contained within that partial page.
Consider instead providing a JSON response to your asynchronous request, containing all the information you need, and then updating the necessary HTML in any part of the page by manipulating the DOM client-side, with JavaScript. Think of the JSON as being your context for this purpose.
Once page A is sent to the browser it's mostly fixed in memory. You'd have to use the DOM functions in JavaScript in order to modify what it shows. Having said that, you could return JSON from the view for the call to page B and then decode it and insert it into page A.