I'm new to flask and webdev. I cant seem to find any true helpful resources on how to create a reactive dropdown list.
I have 2 variables in another file from a textfile I've formatted. I want to use them in the webapp. They are [1] first authors and [2] total authors
[1] first authors is a list of authors and it should be the values the dropdown menu will have.
[author1,author2,author3]
[2] total authors is a dictionary where each key is a different first author and the values are the coauthors
author1: [helping authors]
author2: [helping authors]
author3: [helping authors]
I want a dropdown menu that when you choose an author, it will show all coauthors
I've copied some code from here but all I've gotten to show is the dropdown menu that dosen't react
This is entirely a JavaScript thing; I am not really familiar with flask but had to do the same thing few month ago with Django and I couldn't really find a better solution than to implement it using Ajax.
If you aren't familiar with Ajax Here is a great place to get you started.
This response may also help you.
You can also simply use only JavaScript by loading all your data to a template and dealing with your conditions using JavaScript (maybe an event listener 'change' to a form).
Related
Hi I was developing a project in Django. For front-end I was using HTML5 and TypeScript
It looks like this:
My problem is that I have to implement copyAll button functionality,
but when I do that, I'm getting only first 10 results. I do not understand how to get all of that 60 results into clipboard.
I tried different codes but none of them worked, I am very new to Typescript.
Nothing helped, there was a stackoverflow post but that also did not help
because my problem is with pagination.
My last attempt:
() => {
let selectAll = document.getElementById("{{ i.id }}") as HTMLInputElement;
let locationElements=document.getElementsByClassName("mainClass");
for(let i=0;i<locationElements.length;i++){
if(selectAll.checked && ((<HTMLInputElement> locationElements[i]).checked==false)){
}
}
}
Since your records are not show entirely on the first page, you are not able to select them.
Pagination is good for performance optimized, but not good at all if your records are interacted.
There are two approach that I've used before:
1. Get all data in the first time, and hide the data that is not belong to the first page.
You can get all your records in the first page, and hide some records that are not in the first page(but they are still in the dom tree).
Since records are in the dom tree, you can easily select them.
Note: I don't think this is a good way, since users don't know they select the records they haven't seen.
2. Create another button says that select all and give user a hint.
Create a button and give user a hint like: select all xxx records to let user know they are select real all records instead of select all in this page.
You can see an example in GMail.
And more detail here.
I have a database with some tables in it. I want now on my website has the dropdown and the choices are the names of people from a column of the table from my database and every time I click on a name it will show me a corresponding ID also from a column from this table. how I can do that? or maybe a guide where should I find an answer !
many thanks!!!
You have to do that in python(if that's what you are using in the backend).
You can create functions in python that gets the list of name of tables which then you can pass to your front-end code. Similarly, you can setup functions where you get the specific table name from HTML and pass it to python and do all sort of database queries.
If all these sounds confusing to you. I suggest you take a Full stack course on udemy, youtube, etc because it can't really be explained in one simple answer.
I hope it was helpful. Feel free to ask me more
My website has individual pages for members, but I have a select menu used to scroll from one member to the other. I have the select menu coded in the html on every page, but I need a better solution since my membership is growing.
I need to be able to create that same select menu in a separate file with the ability, when selected to jump to another member page, have that embedded in the body where I need it so that all I have to do is alter/ update the external file and it'll be done for all the member pages.
I've looked into javascripting it, mysqling it, but can't find (looking on youtube) a code to exactly help me in what I need.
My typical code for the select
//(select.....
//(option value="http:www.website-Profile-blahblah.html.... so on and so forth.
I need to pull this from an external file to use across the board and place it in the body where I need it.
thanks for any help you can offer.
In general this sounds like something you should be using a back end rendering engine for. As far as the select goes, this would be a great place to use a dropdown menu such as the one provided by bootstrap since clicking a select won't actually move you to another page.
If you dont want to use/can't use a back end rendering engine to render the options, I would suggest looking at angular.js which has a great ng-repeat and ng-option feature that would allow you to dynamically build the select/dropdown with as many users as you want.
angular ng-repeat page: https://docs.angularjs.org/api/ng/directive/ngRepeat
bootstrap dropdown: http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp (note the a tags could go directly to the user's page)
From experience in cases like this, it is much easier to have an SQL table to store the links you would like to use. The next thing to do is to have your back-end send you the list of links. With this, you can dynamically create the option tag and append it to your select tag. functions like newOptionTag.setAttribute('value', 'url'),document.createElement('option') and selectElement.appendChild(newOptionTag) should help you on your way
If you really want to use a seperate file, you could store the membernames and links in a json file. On document load get the file, parse it, then use the object to build the options.
The w3schools website (though frowned upon by some) has a json tutorial and an example that is already halfway there.
EDIT: I see it actually uses mysql to build the json file...
I'm going to try and put this in the simplest terms and hopefully someone can help me. I'm new to MVC and i'm trying to learn the ropes.
I have an dropdown that is populated with tenant objects.
I want a user to be able to select a tenant in the drop down, and have that tenant added to a list (Enumerable of Tenant objects) and displayed below the dropdown in a section called "Added Tenants" while also removing the selected tenant from the dropdown.
I don't want these tenants added to the database until later because this is a form creating a lease, and i want them to finish filling out the rest of the lease and create it all at once.
I'm hoping someone can help me or at least point me in the right direction. Yes i have done searches but haven't found anything yet that will help me or that i understood.
Edit: The list can be of object, just an id, or even a select list. The end game is to use that list to add them to the collection which is a 1 to many relationship. That list will also be used to populate partial views with the tenant information, kind of like how the tags work in stack overflow.
While it's not clear what the "list" is that you want added to (i.e. a UL or a form select list), but this solution is going to be done in javascript, not ASP.
Try doing a few searches on SO. Such as:
jQuery moving MultiSelect values to another MultiSelect
Hi there,
I'm looking at using dhtmlxgantt as a way of building up an itinerary i.e. you add items at specific days throughout a period (most likely 2 weeks)... However, there are quite a few extra variables that I need to store along with the standard info of dates etc. There are a series of 4 dropdowns which populate the next one via AJAX.
I know I can add custom controls into the lightbox but these will not work via AJAX when the previous dropdown is changed. I was hoping that I'd be able to make a fully custom lightbox which then passes everything back to dhtmlxGantt but I can't seem to find away...
It looks like it's possible in the scheduler product (http://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) can we do the same with Gantt?
Thanks in advance,
Adam.
You can just redefine gantt.showLightbox method and show your form from there. And then use public API to save changes - gantt.addTask, gantt.updateTask, gantt.deleteTask
Here is a crude example:
http://docs.dhtmlx.com/gantt/snippet/5e134aa1