I am using VueJS to have a front-end application.
i have made a Vue-Component, that component has 2 dropdown's, the 2nd dropdown depends on the item selected in the first dropdown.
I am using axios to fetch the values that should be shown in the second dropdown.
this i manage to get it working with vueJS, but the main issue is when i load the page.
So when i load the page i want the user to be able what is chosen, so the first dropdown needs to get the value from the DB and the second dropdown also needs to get the value from the DB.
there i think, it goes wrong.
When the first value is set on loading the page, the data list for the dropdown is not fetched or is fechted too late. thus the second dropdown is not set to the value on load of the component, how can i fix this? in any case i don't know what i should do with the issue.
Related
I am using dash, plotly for creating a dashboard.
I have NavItem in that I have dropdown as children. I have 2 functions that returns, options and value for dynamic generation (dropdown is displayed with options).
Now, If I update/add new options and refresh the page, it display only old options.
As suggested in dash site, I am using app.layout = serve_layout (for live updates).
I also tried returning entire children as dropdown but that too didnot work.
what is the right or prefered approach to load a dynamic dropdown on page load itself? (that will resolve the refresh/page reload problem too)
The way I currently implemented navigation in my Polymer 1 application is this:
I use paper-menu and paper-submenu
on iron-select, I will create a route based on the names of the paper-item
for example groups, example, test will be concatinated into a route like: /groups/example/test. User when then be routed there using this.set('route.path', '/groups/example/test')
Also, on page load, to highlight the correct menu items, I parse the URL and selected the correct menu items. So far so good.
The problem here is: suppose I have even further nesting like /groups/example/test/subpage1/subsubpage2. When the user navigates to such a URL, he is forced back to /groups/example/test because the parsing of URL to select the correct items.
The workaround I have currently is: instead of attaching on-iron-select I will setTimeout then attach this handler. This is so that the user does not get forced back to the wrong page, but this feels wrong. Whats the correct way of doing this?
I have a new product page with the url /product/0. When product is saved using a button, I want to show 'Saved Successfully' message and change url to /product/1024 without actually navigating to that page as this would cause GET requests for the product and other data on the page.
I tried the Navigation mixin, however both, the transitionTo and replaceWith actually cause componentWillReceiveProps and I can't figure out a way how to distinguish my case (when all data on the page is already relevant) from navigation between different products, when data has to be reloaded.
So basically I am looking for a way to just change the url with React Router.
In a SPA there's no navigating to another page, the history change could lead to a different route being rendered, but as per your example, the same route will be rendered, so the only thing that did happen is a state change of the props of the Route component.
So you need to check this state with the previous state in componentWillReceiveProps and see if you need to refetch the data.
I have a web page consisting of a dropdown menu. What i want is the contents of other dropdown menus present in the page must change according to what has been selected in the first dropdown box. For example if a dropdown consists of Degree as its element. If i select Degree element then another dropdown must show only degree courses. This must happen automatically without clicking any button. How can i achieve this?
I would make this a comment, but I do not have commenting abilities. You are going to want to use $.post with jquery and ajax to accomplish this: http://api.jquery.com/jQuery.post/ . Ajax with JQuery is not difficult to do.
You will want to use the onchange event of the first drop down to use a jquery ajax $.post call to post to the server, passing the selection from the drop down as a parameter. The page that it post's to should us GET to get the selected attribute from the drop down, and then retrieve ( from the database or where ever) the options that go into the second drop down, based on the parameter. The code should be written out to the page. The jquery ajax call has a way to get the response and let you define a custom function to be run once the post returns. The return should be what you had written out to the page, and then you can just update the second drop down list with the returned data inside this function.
I hope this helps!
I have a html drop down list in my web site. When the user selects a particular item in the list I want it to be shown in all the pages when the user navigates through the site.How Can I do that??
I am using visual studio 2010 and mvc3 views. Currently what happen is when the user selects a particular item,the selected value only stays for the current page, when I go to another page, the default value, which is the very first item in the list is shown.
How can I have persistent dropdown list value??
Thanks.
There are different ways to achieve this. You could store it in Session or Cookies. So for example on the first page create a form containing the DropDown with a submit button. When the user clicks on the submit button the form will post the selected value back to the server and the server could either store it in Session or client side cookie. Then the controller action could redirect to some other action which will be able to retrieve the value. And from now on this value will be available on all subsequent requests.