Dynamically add objects to list from dropdown - javascript

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

Related

reactive dropdown

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).

SelectField to create dropdown menu

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

BigCommerce: How to create custom filter?

I want to allow for checkbox-filtering, such that when a particular checkbox is 'checked', the page will only show the items corresponding to that checkbox property.
Example) I want only products that are 'new', so I check the box for new products.
How can I create this kind of a filter in BigCommerce? I have tried the url-api filter, granted I didnt expect it to do much, but I have at least tried it.
I am hoping for some way to 'hide' all other products if they dont fall under that checkbox's property.
You can write some javascript to do this for you, but the main thing you'd need here is to somehow differentiate between product types.
Example: what designates a product as 'new' vs 'old'?
I would be happy to help you write this script to react to the users interaction with checkboxes, but we need some HTMl here for the products themselves in order to have our javascript recognize them.
Can you update your question with some HTML examples of the products or items you want to hide/show based on user interaction with a checkbox selector?

Save sort order to hidden field with sortable jQuery plugin

I am using this plugin (http://farhadi.ir/projects/html5sortable/) to create a feature for a website where a user can add form fields on the fly.
The idea is that they will give the form a name (title), and then add a series for form fields. These form fields need to be drag and drop sortable (thus the plugin) so the user can rearrange the order.
Once they are satisfied with the order, they will click the "Create Form" button, and the data to create the form will be submitted.
The data itself will be stored in three tables. Table 1: Forms, Table 2: Fields, and Table 3: Forms_Has_fields. The Forms_Has_fields table will includes a sort_order column, which tells the system in what order to display the fields.
That's where this question is important: when a field is re-sorted using the drag and drop feature, I need a way to save the sort order in an or some other form control so I can parse it with PHP and create the fields properly.
If this was in PHP, I would just keep everything in an associative array: ($fieldname => $sortorder), but that doesn't seem like it's an option in javascript. Ideally, I could keep this in an array in Javascript, and then when sumit was clicked, dump that array as a JSON to an field, and POST it to PHP. But if that's possible, I don't know how to do it.
If there is another (more elegant) way to handle this, I am open to suggestions.
Turns out, I was making it more complicated than it needed to be. I am giving you the points because you answered my question; however I did find a more elegant way of doing it. The is, in fact, the order and array already. There is no reason to create a separate array to manage what is being saved in what order because the does it already. All you have to do is itterate through it with .each().
And, best of all, I didn't have to use global variables

Sort and retrieve data with drop down menus in php

I have two drop down menus on my webpage. One is a course list and the other is a student list. What I want to do is, when a selection is made in the course menu it will update the student menu to only list students in that course.
All the course and student data is saved in a MySQL database. The SQL statements to retrieve the results I want are not a problem. I have those figured out. The problem is that I don't know how to get one drop down menu to update the other without the use of a submit button. Is there a way to have the course menu call a php function when it changes, and that will update the student menu?
I've looked through several similar questions, but a lot of them end up resetting the first menu when the second is updated. I need to print both the selected course and student on the page at the end.
Is this something that can be done with PHP, or would Javascript be more preferable? If someone could point em in the right direction, that would be much appreciated.
Is there a way to have the course menu call a php function when it changes, and that will update the student menu?
Yes. The buzz-word for this is AJAX.
You will end up using both JavaScript and PHP to do this. The actual implementation is quite involved, so I will list the basic steps for you.
(JavaScript) Bind the change event for the course drop down menu.
(JavaScript) When that event is fired, capture the selected course and fire an XMLHttpRequest off to your server along with the selected course.
(PHP) Capture the selected course, and run the SQL statement to fetch your students.
(PHP) Convert the student list to a text format (JSON, XML, delimited-text, etc.) to send back to the browser (using echo, print, etc).
(JavaScript) Populate the student drop down menu.
The general approach to this is to use jQuery to add a hook to your drop-down selector and trigger an AJAX load on another section of the page, populating that with data retrieved either as an HTML fragment (easy) or JSON data that's turned into one (harder).
A really quick and dirty version is to grab a portion of a page and re-populate the current document with it using $.load():
$('#select1').on('change', function() {
$('#select2').load('select.php #select2', 'select1=' + $(this).val())
})
That's the rough idea: When your first selection box changes, load the select.php page, or whatever you're using, and add on the parameter select=N where N is the selected value. It then rips out the #select2 section and replaces it.

Categories

Resources