We Keep Coding

Close all forms with a button in Django

I building a threaded comment system (Reddit-like) in Django 3.0
A comment can have as many replies as possible.
For each comment made, a Reply form is shown below it.
Now, if I don't hide the forms, the page looks very bad, cluttered with textareas.
I need the following:
A 'Reply' button, clicking which the reply form can be displayed/hidden.
Here's what I have tried:
Added a class .replyForm to the forms.
Added a class .hideBtn to the hide Buttons.
Used JQuery:
$(".hideBtn").click(function(){
$(".replyForm").toggle();
});
Now, this works fine, but clicking a reply button opens up all the forms at the same time.
This is expected as the class belonging to each form is the same.
Using Django's template tags I managed to make the id of each form and button unique.
Example: id = "replyForm{{comment.id}}" which renders as replyForm123 if comment.id = 123
But I am not able to use this in any productive way.
I can't access the id outside the for loop (which displays the comments).
I tried adding the JQuery script inside the loop, and created 2 variable, one for the id for the button, and other for the form's id.
But as the loop executes, the variables change accordingly, and finally they store the id's of the last comment only, rendering all the other toggle buttons useless.
I feel that I am complicating things way too much, I am very new to JS and JQuery, and I'am only using them because I couldn't find a pythonic/django-based way for doing this.
Is there a simpler, more elegant way for doing this? Any help is appreciated
Edit 1:
I have found a very simple solution using Bootstrap 4's collapse class, but still want to know the JQuery way of doing this.

Try this:
$(".replyForm").click(function(){
$(this).toggle();
});

JS: How to repeatedly reload page, read element values, then click button

Over the last few days, I've been working on a script that interacts with a particular site. A page on the site has a table of values that is randomized every reload.
I've learned that I can load the page with JQuery's $.get( ) method and then use regex to read the values of the elements, but I can't figure out how to press a button on the page.
I'm not sure how I could select an element then call the normal .click( ) method on it, or if that would even work at all.
Basically, what I want to accomplish is:
Get a new (reloaded) version of the page.
Read values from an element on the page.
Click a button on the page.
Keep repeating previous 3 steps.
How can I make this happen (with or without JQuery)?
EDIT: So it seems this is difficult/impossible to do from another page, but it works if I'm on the page. Knowing that, is there a way that I can repeating reload the page without disrupting the javascript running on it?

If the buttonpush don't trigger an get/post event, u cant do this. If the button does, you have to simulate it by sending the next get or post with the button parameters. This will get you the expected datas, so no need to refresh.

How to detect when browser places saved password?

I'm trying to detect when a browser places a saved username and password into the input fields. I've looked at this post , but I don't have the option to change this functionality, and the other solutions on don't work.
Basically, I have a disabled login button if the fields are empty on load. But when a browser fills in the input, it doesn't enable the button. I'm trying to find how to see if it changes.
I'm using jQuery and JS.
I've tried .change, on .ready, on .load, and all. It seems to happen after the .load event.
Does anyone know a solution to this? I would like to avoid using any sort of timeout.

I think there is no way to detect if the browser has some buil-in feature that pre-populates the fields.
You could solve the problem with the a timer that enable the button, if something is there.
Something like this:
setInterval(function (){
if($("#username").val()!=""){
$("#loginbutton").attr("enabled","enabled");
}
},1000)

The key thing is that the field will be populated without there having being any keypresses in the field.
So if you trap .keypress on the input field to know if a key is any pressed, then if you get to submitting the form and find there were no keypresses despite a value being there - then you can be somewhat sure that the browser pre-populated it.
If you want to know before submitting (soon after the page loads), you'd want to run a check on an interval that sees if the value has changed despite no key presses.
As #japrescott pointed out, you might want to check for .focus as well in case the user pastes a value in.

Haven't test this, but couldn't you simply compare the default values of each field to the values of each field after the page is loaded (or .2 seconds after the page is loaded if that's an issue)?

Give a shoot to Jquery .live() function
$('.element').live('load', function(){
enableLogin();
});

Forcing a POST on every checkbox/dropdown change

How can I force any change to a checkbox (inside a form) or to a drop-down menu selection to cause a HTTP POST to be issued by the browser?
Bandwidth is not an issue, page reloading is not an issue and I don't want to go the full AJAX route.
What I really want is an HTTP POST to be done when the user clicks on a checkbox (or selects something from a drop-down menu), etc. without the user having to click 'Submit' after its change.
Maybe it should be done with some JavaScript on the client-side? (I couldn't succesfully Google anything)

Use Javascript. Add onchange="document.getElementById('myFormId').submit()" to the elements, or do this programatically. myFormId must be replaced by the HTML id of the form element.

You could use the JavaScript onchange event to then call the submit() function on the form.

if you have a form already set up just put a class to the element you want to use as trigger and then
for select
$(".classname").change(function(){
$("#formid").submit();
});
for checkbox/radio
$(".classname").click(function(){
$("#formid").submit();
});

AFIK it can't be done without client-side scripting. The easiest way would be to trigger the submit event for every form change. With jQuery it's done with the following code:
<script type="text/javascript">
$(function() {
$("input[type=checkbox],input[type=radio],select").change(
function(evt)){evt.target.form.submit();}
);
});
</script>
If you don't use jQuery, you'll have to write some boilerplate event handling code. See this introduction for more info on JavaScript event handling.

Modal Windows using jQuery

I'm working on a web app where in I need to add some values inputted by the user.
When the user clicks on the Add button he sees a form and these values then show up on the page. Now to implement this I can do two things
Use a modal window
Make a form inside the page itself(in a div) and toggle its visibility by the Add button.
If I go with the former solution is it necessary to use Ajax or I can add elements on the main page directly itself? Are there any jQuery plugins to accomplish the same?

As Diodeus mentioned, you don't need Ajax.
In answer to your other question about the plugins, have a look at jQuery UI Dialog for the dialog. Generating the form is pretty trivial. There's no need for a plugin there

You don't need to use Ajax to accomplish this. The difference in the two methods is simply whether you use an inline block of code that is hidden and displayed later, or whether you use an absolutely-positioned block of code doing exactly the same thing.
In most cases there is a single form that envelops the entire page. The rest is a matter of a CSS and positioning.