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();
});
Related
I'm having some difficulty envisioning a potential solution to a dilemma I'm facing, and I need some creative inspiration.
Essentially, I'm struggling to picture a good way to validate a form that can be thoughts of as having multiple nested forms. The challenge is that these nested forms are only rendered when a line item in the main form is clicked, causing a modal to open, at which time the rendering, model binding, etc. takes place, and the nested form can be validated.
The goal is to know whether or not there are validation errors down inside any of the main form's line items without having to open/render a modal for the item to find out. I'd also like to make sure that there's no duplication of validation logic, and that things are drawing from a single common set of validations rules that can be shared/accessed everywhere needed.
Ideally, I'd like to abstract out the validation logic such that it can be used by any ng-model bound element, but can also be used independent of rendering a form.
If anyone knows of any plug-ins that work well with AngularJs and sound well suited, please let me know.
Clarification
Though I'm open to checking out any plug-ins that might help, that's not really what I'm after. My main objective to is to find a way to validate my nested item data without opening/rendering the item's modal.
I would use something that ensures that the user fills in these forms in a predefined format in the first place.
I use something called inputmask in my angularJs applications.
You can use a regex to define the format you want the inputs to be in.
You can also make sure that all the fields in the modal are in the right format before letting the user close the modal(This validation logic can come from a shared or common component).
Another option would be to make the modals hidden and not removed from the DOM so that the bindings remain even when the modal is no longer visible. You can add a red asterisk or something against the line which opens the modal to indicate errors in that modal's form.
I have a page that will cause an error if a user tries to click too many buttons at one time (for the impatient user) and therefore need to DISable any button (all defined by a JS onclick function) on the page until it is refreshed (with new data sent via the server using Java.) What is the best method to do this, and is there a way to do it with jQuery?
You would have to find all types of buttons using something like this..
$('input[type="submit"], button')
and loop through the returned array and do .attr('disabled','disabled'); on the item in each iteration.
How about simply calling this when you want to disable the buttons:
jQuery('input[type="button"]').attr('disabled', 'disabled');
That will disable all inputs of type button on the page. Of course, as soon as you reload/replace the page contents, the new buttons will not be disabled. You can also just disable all inputs if that's easier.
Fiddle: http://jsfiddle.net/duffmaster33/xDMux/
The single best solution is to use the BlockUI plugin for jQuery. It accomplished everything I needed and more. http://www.malsup.com/jquery/block/
A little web design dilemma: I have a form with a lot of options, mainly radio buttons but not only.
I want the form to open up gradually, meaning at the beginning only two radio buttons are visible, and after the user picks one, more options appear under the chosen radio button. If the user then switches the pick, the page updates and shows the options under the new pick.
This happens on several levels, say 4 or 5 levels, and at the end there is a submit button that submits only certain inputs according to the branches the user chose. Also some of the branches have identical components even though the initial choice was different.
These are the options I could think of:
Build the complete form in the html body and use jquery to hide and show them according to the choices of the user. This means I have to write sections that repeat themselves twice.
Write nothing in the body, and append new elements when the user makes certain choices. This means the JavaScript is more complicated, because I have to make sure nothing appends twice.
Write an HTML skeleton of the form, and use append to fill it. Then use jquery to show and hide elements. This has none of the disadvantages but seems a bit unaesthetic.
Which one should I pick? Any better ideas?
It really comes down to your knowledge of javascript. The cleanest way would be to append to form using javascript. This way you can avoid having duplicates in your form.
If you are not that familiar with javascript and don't know how to append the form, then I would use javascript to show/hide the different parts of the form.
I think using javascript to append would be the correct way, but I don't see anything really wrong with using javascript to just hide parts of the form.
Probably going to use http://wiki.jqueryui.com/w/page/12137997/Menu
or JStree (http://www.jstree.com/) which I found out about from here http://wiki.jqueryui.com/w/page/12138128/Tree
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.
I'm building shopping mall website using Yahoo solution. My products have multiple options which are dependent on previous options. The problem is that in Yahoo, I have to locate options in the order form to appear in checkout page. Nested form doesn't work, of course. Here is one sample page:
http://parseven.com/sample-1.html
Can anybody help me please?
Your question is not very clear, but if I understand you correctly what you need is instead of using document.formname.subcategory.options[0] use document.getElementsByName("subcategory")[0].options[0].
document.getElementsByName("subcategory") will return you an array of all element on the page with the name="subcategory", from there you select the first one [0]. After that you can access all of its options.
I would suggest giving your dropdown an id instead of the name. Then you can use document.getElementById("unique-dropdown-id") and that will return you a reference to the select element, instead of array.
Adding more information based on new comments:
In order to make your new example (http://parseven.com/java_ex.html) work without form, remove opening and closing form tags from the page all together. Search for "document.formname.subcategory" and replace it with "document.getElementsByName("subcategory")[0]" and everything will work exactly the same way is it works now.
Since you need to submit your information to Yahoo, you have to keep form tag around, but you can't nest one form tag inside the other. Just leave the Yahoo's form tag intact and remove you other form tag.