The question seems to be basic but I would ask.
Is there a standard way to retain focus on the same field (where user was, before refresh) after page refresh in MVC3.
for simplicity purpose, I will take a simple scenario. scenario is like
I have three controls on a page.
a textbox ---Name
a dropdown ---Country)
another dropdown---City (which loads cities from server based on the country selected in field 2 and this causes the page to refresh)
What I want,
the focus to be on Country field, after page refresh.
I hope, the question makes sense.
To achieve what you want, just use jQuery's .focus function (http://api.jquery.com/focus/).
You may want to consider loading your dropdown dynamically through jQuery or jQuery UI so that you don't get the page refresh.
Related
My current setup looks like this(from here, mostly):
This is the result of my home view. What I intend on doing is keep those 2 sidebars in place and refresh only the content part.
My question: What is the obvious solution to this in django?
From what I read so far it seems to be using Ajax to see what exactly the user clicks on the sidebars and return only a part of the HTML which would be the div where all the content is. (or return a JSON and refresh that div depending on the JSON values?)
I need to avoid refreshing the entire page, it seems useless. I could forget about Ajax and just run on separate views but I would have to pass every time a context variable to populate the sidebars depending on the user and this seems to be an overkill.
Even more specific: On the push of a button on the navbar now that is a href- links to another page. In order to make it refresh only part of the page what should the button trigger? Should it trigger a jquery function or is there a better option?
If your concern is only about left sidebar calculations, then you can go with caching
Django allows to cache part of page - sidebar is ideal item for caching. If sidebar is different for users (I see at least playlists menu item), then it's also possible to implement fragment caching per user, check Vary on headers part of documentation.
Using ajax will complicate your development process - generate html/json encode/render it on user side, etc, etc. And now almost no one uses django in this way. If you want pure single page application, then I suggest you to take a look at some javascript framework like Angular, Vue or React + Django API backend.
I have a bit of a unique challenge today. I have a client that wants to be able to search for multiple items based on inserts into a cfgrid. Suppose we have the following web form:
A Country selection dropdown
A State Selection dependent AJAX dropdown
A city Selection dependent AJAX dropdown
An ADD Button
----------------------------------------------------
A CFGRID that will populate a row with selections when the user clicks the add button
----------------------------------------------------
And finally, a CLEAR button, and a GO button on the bottom.
The resulting page will then query the database and get some statistics about the cities selected. So, suppose an individual picks USA > Arizona > Scottsdale and USA > Arizona > Flagstaff. The grid below the options will 'save' each selection and reset to their default options, waiting for a user to pick additional options or click on 'GO'.
The resulting page will then generate columns that list some statistics about the communities and highlight the 'best of' between each selected community.
Each time a user selects the ADD button (assuming three criteria are selected) I want the information to be added into a CFGRID that displays the options selected. Then, After the user selects at least one country/city/state option, have all of the data in the CFGRID get passed to another page that does a query from the data selected. In theory, the user could pick as many communities as they want, assuming they are willing to let the database sludge through enough data to get what they want and wait through a 'loading' screen to get it.
I'm having these challenges, in no particular order:
- I have an HTML grid that I must use per client spec (No Java or Flash, must be HTML)
- I have no idea how to get the selected options into the CFGRID. I assume there is some JavaScript I can write that uses some sort of AddRow function to add data into the grid with the add button but cannot seem to find how to it on the interwebs
- After we conquer the above challenge, how do I pass the data from the grid into the results page? I thought about passing one big string or a structure, but I'm not sure how to do that through the URL or posting, nor how to get the data out of the grid. I wonder if I am better off coding some sort of string that gets passed from the options page to the results page with a get method instead of dealing with the stuff in the CFGRID and have the CFGRID serve only as a 'dummy' display container.
- Finally, after the pass is complete, I would need to loop through through the structure and perform a CFQUERY or CFSTOREDPROC on each row of data, then get the statistics I need to display on the results page. I assume this would depend on how I am getting the data from the options selection page to the results page.
THANK YOU ALL!
CFGRID is great to start, but it can be b*tch to customize and extend... Have you tried editable CFGRID with bind? See how far off it is from what you want first. If it turns out to be very far, then you might want to go for a jqGrid and code up some jQuery.
To start, read Using HTML grids and make the cfgrid editable.
http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec22c24-7a01.html#WSc3ff6d0ea77859461172e0811cbec22c24-72e0
Once you got that working, look at these provided JS functions that you can use with CFGRID
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WS0ef8c004658c1089-6262c847120f1a3b244-8000.html
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSd160b5fdf5100e8f-4439fdac128193edfd6-7f5f.html
If you still demand a bit more, you might need to dig into the underlying ExtJS component. At that point I would rather use jqGrid
I found out that the best way to handle this was by using a SerializeJSON call and a Deserialize JSON call back and forth. By using JavaScript notation we are able to pass a complex JavaScript object (array) between one page and another. This has the value add of not having to worry about sessions timing out and making URLs clickable from one solution to the next.
I am buiding a UI screen for editing the details of an Ecommerce Order. The model for my view (OrderModel) has everything I need (in properties that are also ViewModels), but the UI isn't designed to be able to edit all of it at once.
For example, one part of the UI is for customer data..another for order details, and another for tracking information, each having their own "Save" buttons.
I realize that I could use one giant form and use hidden form fields to populate the non-editable fields, making each "Save" button post all the data, but that smells bad.
I'd like to segment the editable chunks into smaller ViewModels that are posted and validated individually while retaining the strong typing but I'm unsure of how to achieve this in MVC3. Will I need partial views that are called from the primary view?
FYI, I'm using ASP.NET MVC 3 with Razor syntax and client side FluentValidation.
Partial Views are a good solution. You can pass different ViewModels to each partial view. But if only sections of the overall view are updated at a time I would not do a post back on the whole page. Instead I would use Ajax calls using JQuery/Javascript to update the individual information back to the controller. I would also look into something like Knockout.js to handle the data binding on the page.
I have a Form to create a new model object and persist it. That form is displayed in a lightbox or popup.
Some fields are dropdownlist showing related info that lives in another table (other model object related to the main model).
What I need to achieve is without leaving the creation form, create a new item of the related type and update the DropDownList in order to continue filling fields and finaly submit the form.
I have done this in winforms but not really sure which is the best approach in MVC 3:
Trigger another popup with a small form?
Use some kind of editable dropdownlist?
Place a small hidden form right next/after the DDL to allow entering the info to create an item in DDL (and to DB also)?
What do you thing is the best option?
Thanks!
There is no editable dropdown list in HTML. There are some toolkits that simulate it, but in general these are clumbsy and really complex. It's a lot easier to stick with basic controls.
You would proably do best to have a small + sign next to the field, and then popup an editing field that inserts the element into the combobox and sends it to the controller via ajax to add to the database.
An alternative to a second pop up is having a toggle add button. When toggled, then show a small area where you can enter the name. Using ajax, save the name, and then refresh your dropdown. This works well if you only have a few attributes to fill in.
ASP.NET MVC noob here
I was writing a quiz application where a user can select her preferences (e.g. difficulty, number of question etc.), and once she hit a submit button - she got a new page with questions.
The preferences are represented as a "Preferences" object, and the questions are IEnumerable of Question.
This all worked well.
Now I decide both parts should be in the same page - and I don't know how to accomplish that:
Should I have a new model class that is a composition of these two parts?
And also - How will I make the "questions" part appear only after the user completed filling up her preferences and clicked a button?
Should I use AJAX?
I also read a little about partial views and RenderSection.. But I really couldn't understand which approach is the most appropriate for my scenario.
So how should I draw two parts of a page, where the second is only displayed after the first is submitted?
Thanks.
How familiar are you with AJAX? If I had to guess I would think a good way to do what you want to do is to have an AJAX call which is linked to an action when the user submits their preferences. The action can then return a partial view which you can have appear on the page without a reload via AJAX.