django retrieve data from database using ajax and update section

Question

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.

So you have multiple html modules that you want to include on multiple pages right? Like a commit module will be shown on multiple different pages? — Ian Kirkpatrick
– Ian Kirkpatrick, Commented Aug 1, 2017 at 19:44
Thanks a lot for your concern @IanKirkpatrick but what I want is to include them on a single page. See my 1st module may have 12 commits, then my 2nd module may have 24 commits like that. And when the user clicks 1st module, my commit section(which is also on the same page i.e. index.html) will get updated and it will show all the 12 commits, and the user clicks on 2nd module my commit section will show all the 24 commits. — Nikhil Wagh
– Nikhil Wagh, Commented Aug 2, 2017 at 11:21

Ian Kirkpatrick · Accepted Answer · 2017-08-01 20:02:07Z

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.

Collectives™ on Stack Overflow

django retrieve data from database using ajax and update section

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related