CODEWITHSUNDEEP
javascriptjquerypythonajaxdjango
Nikhil Wagh
Nikhil Wagh

Reputation: 1498

django retrieve data from database using ajax and update section

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.

Upvotes: 0

Views: 343

Answers (1)

Ian Kirkpatrick
Ian Kirkpatrick

Reputation: 1960

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.

Upvotes: 1

Related Questions