django retrieve data from database using ajax and update section - javascript

I am new to django, I was trying to design a webpage where a project section will have all the projects, on the same page there will be module section and under that module section there will be commits.
Now, What i want is when the user clicks on some project the module section should get updated with the modules under that project. I was able to do this much. (Here is everything you need to reference, you might need to hop into feed app there)
But the problem is, I used this in my ajax to update the module section.
$('#module_section').html(data);
Now the index.html doesn't know about the show details button in my module section (as it is retrieved from detail.html, my detail.html has the show details button which will show the commits done under that module) and when I press the show details button in my module section on the index.html page nothing happens, obviously.
I need a javascript/ajax that may be able to do a query like "Select * from module where project_id = 'some_id' " (Not sure about the syntax), and then update my module section accordingly so that when someone clicks on show details of module section he will be able to see the commits done under that module.
Any Suggestions would be highly appreciated, <3 in advance.

Create your html modules in separate templates. Lets say you have "index.html" and "details.html". Suppose both of these have a module that shows commits (call this the "commit module").
Create a separate html template that contains your module. call it "module_commit.html".
Then link a separate javascript file to it that contains all the javascript that contains it.
Now create a server side api for this module. This includes urls/views that return data and perform actions for your module.
Connect the modules javascript to call the api views and place the data in your module. ex:
Suppose you want the module to display a list of commits. You would create a view/url that returns the list of commits in JSON format. Then create a javascript function that, using ajax, calls this url endpoint and inserts the data into your html module (I would suggest using jquery for all of this because it is a lot easier to work with than vanilla javascript).
Now create an init function in your modules javascript file to make the needed calls to populate the module and set event triggers and events.
Now include your modules template in the main templates (index.html, details.html, etc...). Make sure the init function is called somewhere after the page loads.
Your code will have this layout:
api (models/views/urls)
A | (JS calls api to perform actions and retrieve data)
| V
javascript
| (Puts results from api into the modules html)
V
html
With this solution, you can just include ({% include 'module_commits' %}) the module in any template you want, call then init function in the javascript for that module, and it will work on any page. Just make sure your html ids don't conflict with others.

Related

Strapi custom auth controller

I'm using Strapi for my API and Back office. Everything works fine except one thing: I can't figure out how to override the controller that is used for the forgot password feature. I've tried to follow the documentation, especially this page : https://strapi.io/documentation/3.0.0-beta.x/admin-panel/customization.html#development-mode but no chance.
Here what I've tried :
Create a folder admin at the root of the project, inside which I created controller/Auth.js. In this file I created my custom forgotPassword function but it's not called.
Add the file admin/config/routes.json, my controller got the same name but I thought that maybe I need to repeat the route here to override, still not successful.
I saw on some page that to get what I was searching I needed to put those files (config/routes.json and controller/Auth.js) inside /extensions/user-permissions/admin, but it's still not working.
Whatever I try, it's always the default forgot password controller that is called, from the strapi-admin node modules.
Any help would be greatly appreciated, I don't see what I'm missing here.
It's normal, because your are not writing the file in the right place.
So I will help you with that.
First here is the documentation for the customization - https://strapi.io/documentation/3.0.0-beta.x/concepts/customization.html#plugin-extensions
Then we have to find the file in the code source we want to update.
Here is the function - https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-users-permissions/controllers/Auth.js#L266
Based on the file path and the way to customize in strapi.
You will have to create a file to this path extensions/users-permissions/controllers/Auth.js
Then create a module.exports with source code function and the update it.
this should work

React JS - Reading environment configurations from external property file

Problem :
I am new to React JS, and looking for an option to read environment configs from an external property file. This problem is more specific for one of my clients, who is looking to have an option to change the environment files dynamically. E.g. change the hostname/port dynamically whenever there is a change. The build process is not owned by my client. I create a minified final package, which my client deploys it on tomcat/web server.
Tried Solution :
With some read-outs, I have configured .env files for different environments and able to successfully read configs from these files. However, these are more of a build process environment files. And, I am trying to find a way to read the configs from an external source after my package is created.
Possible solutions : Here is one possible approach I can think of -
Read external property file using libraries like "properties-reader". I will provide the property file as part of my release bundle (i.e. build folder). My client can change this property file whenever required.
Please suggest if this is the correct approach or is there a better solution to this problem?
A Solution which worked for me !!
1) Create a "config.js" file inside public folder of react project. Sample Content of the
"config.js" file -
window.env = {
API_DOMAIN_ADDR: "http://localhost:8080"
};
2) Refer "config.js" file inside index.html. Code for index.html will be -
<body>
<div id="root"></div>
<script src="%PUBLIC_URL%/config.js"></script>
</body>
3) Now, content of the config.js file will be accessible to react code. Sample code to retrieve the value of config.js variables -
window.env.API_DOMAIN_ADDR
Add this code wherever variable value needs to be accessed. I added this in my service class which is making ajax call.
I would suggest using something like Firebase Realtime DB. I had a similar requirement for pointing the App builds to production or development server APIs for my company. For this, we use to load a Firebase Config and from there the UI used to pick up the host server endpoint.
Advantages:
This saves you from deploying your build folder every time.
This is realtime and less prone to errors.
FirebaseDB is free for small stuff like this.
The second option is to create two environment files which I see you have already done.

How do I add another page in an angular-cli project?

Based on the comments on another of my questions (gradle how to add files javascript fies to a directory in the war file) I'm trying to use angular-cli to help build and manage an angular project. However, I cannot seem to find any documentation on how to create a second webpage in the project, which to me seems like a very basic task. I tried creating a "component" with ng g component {component name}, but this didn't add anything to the build result.
I had missed the section of the angular docs on routing since I did not make the connection between the word "routing" and what I wanted to do. Routing as described here works perfectly when using Node as your server. However, other web servers such as Tomcat (which I am using for this project) will not since ng build only generates an index.html file. Node knows that it should re-route URLs under the angular base to that file, but Tomcat doesn't. A proxy server such as apache needs to be placed in front of the Tomcat server to redirect the urls to the base url for the application.
With that out of the way, here is the basics of routing:
create a component for each "page" (the component does not need to be responsible for the whole page displayed. see 2)
create a "shell" component that contains features that will be on all pages e.g. toolbar, side navigation.
add <router-outlet></router-outlet> to the point in the shell component component where components for sub-URLs will appear (note that they are inserted into the DOM after this tag, not within it.)
in the imports for your module, add RouterModule.forRoot(). This function takes an array of Route. Each route has a path and a component property. path is the url (relative to the base url) that will cause component to be inserted into the DOM. Note that path values should not begin with a slash.
add a tags with the routerLink property bound to the url of your new page. Note that here, there should be a leading slash.

Access contents of external resource in Appery.io

I'm new to Appery.io, IONIC and AngularJS but so far it has proven to be a wicked awesome platform for streamlining development.
The problem that I'm having is with integrating external JS resources.
What I'm trying to accomplish - Overview
I'm trying to add Braintree's drop-in UI payment processing form into one view within my app.
The Problem
I keep receiving "Error: Braintree.setup is not a function" error when I run the Braintree.setup() function.
Adding the external library
I include the script by doing the following:
Go to: App Settings > External Resources
Add script url and save it as an external library
Set it to enabled so that I can only load it during the payment page view
Including the script in the view
Go to "Routing"
Click "dependencies" for the page I want to load it on
Select the script > save
Triggering Braintree.setup()
Pop over to my page > scope
Add the setup function as listed on the Braintree website.
Running the page
Run the page and am provided this error "Error: Braintree.setup is not a function"
NOTE: I am also receiving another error before that but have no idea why. It also appears some demo apps that Appery has provided. Brownie points if you can tell me why.
The script has been loaded as I can see it in Firebug.
NOTE: On the website the code uses braintree.setup() rather than Braintree.setup(). I have switched over to Braintree.setup() because braintree.setup() was giving me an error saying that braintree was not defined. I'm not sure if Braintree is a variable defined in the resources section in which Appery assigns any values from the script to the variable.
Many thanks to anyone who can help!
After much digging around I learned about RequireJS and AngularJS.
Turns out you have to define the script and put it inside a variable, as well as, list any dependencies.
Step 1: Create New > Javascript:type=Angular Service
Step 2: Define the dependency on the external lib url
Step 3: Return the external lib property
Step 4: Include the newly created JS file and external Lib in your page
Step 5: Call it using Apperyio.get('AngularServiceName')
Voila!

Django -- Generate URL for the webpage of a database object

I currently am working on a Django project that allows a user to upload a file (i.e. a .dat, .json, or .tar.gz), which then gets converted into the appropriate database objects with their various relations. The file can be uploaded either by using the interface on the web browser or via curl to the appropriate REST API endpoint. The site is currently a single-page sort of site that utilizes Bootstrap.js. The URL in the browser does not change whether the user is on the home page (which displays the most recent uploads) or clicks on one of the "blackboxes" uploaded ("blackbox" being the primary database object formed from the uploaded file). Clicking on a blackbox takes the user to a page of the list of "datapoints" that are inside the blackbox.
What I now need is for each blackbox page to have its own URL that can be returned in a response when a user or script uses curl to upload a blackbox. This is the pattern I was thinking of using in the URLconf:
r'^bb/(?P<bb_id>[0-9]+)/$'
where bb is short for "blackbox". How can I systematically make each blackbox page have its own URL following this pattern, when right now each blackbox page and the home page all have the same root URL (in development, localhost:8000)?
I have made some attempts (most likely very misguided) at something like this. One thing I tried was making a separate template for a blackbox page, using the extends template tag. The frontend Javascript has a function display_points that takes in a blackbox id and renders the list of datapoints, so I tried various hacky ways to call that function (which was in a file home.html) from within the blackbox page template, but nothing was successful. One thing that I hoped would work was using jQuery $.getScript for something like this:
$.getScript('blackboxes.js', function() { //blackboxes.js is the Javascript from home.html that I copied and pasted--hacky, I know
display_points({{ bb_id }});
})
but I keep getting 404 errors from trying to use $.getScript like this despite trying different paths for the Javascript file.
Also, just in case this is an important detail for this question, the front end utilizes Clusterize.js to help load the datapoints, since the blackboxes usually have at least several thousand datapoints.
One of the key things to making something like this work was the use of the right template tags in our home.html which we renamed to base.html to be more descriptive of what the template is for. urls.py was also modified so that two different URL patterns would map to the same base view in views.py; the two patterns were a "blank" pattern (i.e. r'^$') for the default home page and a pattern to view a particular blackbox (r'^blackbox/(?P<bb_id>[0-9]+)/$'). Different views would be rendered based on whether a bb_id (blackbox id) was in the URL pattern. If none, the default home view of the recent uploads would be rendered; otherwise, the datapoints of that particular bb_id would be rendered instead. In the base.html template, the if template tag was used to see if a bb_id existed; if so, the JavaScript function display_bb would be called, which takes in the bb_id to know which datapoints to display. Otherwise, the function display_10_recent_blackboxes would be called instead.
Another issue was sending a response that contained info that could be used to find and view the blackbox that was just uploaded. Originally, the main database insertion function insertBlackboxIntoDatabase would create the Blackbox model instance first and then fill it with datapoints created from the file uploaded. However, since the response is sent before that function is called, it was necessary to refactor the upload and insertion code such that the blackbox instance would be created first so that its ID could be part of the response. The ID would then be passed to the different upload functions (based on the filetype) that each end up calling insertBlackboxIntoDatabase, which now locates the Blackbox instance based on the ID passed to it and then proceeds to create and insert the datapoints.

Categories

Resources