A brief question about JavaScript or AJAX

Question

I have been finding ways around this for a long time but think it's time I addressed it. If I have a page that has a dropdown menu, is there anyway I can select a value which will subsequently load other values further down.

Can this be done without a page reload?

I will give you an example. Say I was making some tools for an admin panel, but first of all they needed to select a member to work with. They would select the member and then below, the fields about that member would be populated based on what was selected in the first menu.

As I have already asked, can this be done without a page reload?

Thanks for reading.

Answer 1

Yes it can be done without AJAX. When the page is rendered pass all the collections that will be used by the dropdown lists as JSON objects into the HTML:

var collection = [{ id: 1, name: 'John' }, { id: 2, name: 'Smith' }];
...

Then register for the change event of the first drop down and based on the selected value go and fetch the data from the other collections. Of course if you have lots of data this might not be practical as your pages will become very large and in this case AJAX woulld be more appropriate.

Answer 2

Yes. Ajax is mainly used for that i.e. (without a page reload)

You have to use following step to achive

1. Create a link and call a javascript fuction on it's onchange function
2. In the javascript function you have to call Ajax request.
3. update the div in your ajax response.

Answer 3

Answer YES it can be done.

Firstly you'll need an event, in this case you need to take action on the onChange event for the selectBox. So when an item changes you run a function.

Now you have 2 choices. You can do this using AJAX or NOT, it really depends on the complexity / security of your application.

In the following I refer to

1. Users : those using the application
2. Hidden Client Side Data : Data sent to the client during page load, but not visible to all users, however using view source, or downloading JS files, the Data is not secured.

Method 1 - NO AJAX

Basics: You send all the possible display options down initially when the page is first loaded, but display only the sections relevant to the user during selectbox onchange events.

Recommended when: No security condiderations if hidden client side data is detected (or won't be detected, or you simply trust your audience to use the app in the intended manner). Lastly when your total view permutations are low.

Method 2 - AJAX

Basics: You send down initially only the page skeleton, when the user changes the value of the select box, you then do an AJAX request to the server - grab the new view info thats relevant to that user, send it back down to a script which will inject that user data into the DOM.

Recommended when: You have a public site, or a site where security is a consideration. Where you have lots of view permutations or want more customizations per user than in scenario 1.

As you see both methods do not require a repost - method 1 ships everything upfront, method 2 uses AJAX to fill in data when required. Both methods are valid depending on your requirement.