Select with options loaded by ajax

[GoogleCodeExporter]

When i use select type, i must specify a array of options to show and to 
select. If we have some values, it's usefull, but if we have many avalues, it 
would be better getting the values with a ajax calling.

Is possible to get the options calling URL (ajax/json)? I don't find it, and i 
think it could be interesting to develope it.

Original issue reported on code.google.com by aah...@gmail.com on 18 Feb 2011 at 7:07

[GoogleCodeExporter]

I have implemented one solution. I have added 3 params to .editInPlace 
declaration:

    select_ajax:        false, // boolean, indicate if select load data options with ajax
    select_ajax_load:   "", // string: URL to load data with ajax request.
    select_ajax_params: "", // string: id of elements and val or html, separated by commas, to send params in ajax request to get data.

Example:

I have... 

<span id="element1">123</span>
<span id="element2">456</span>
<input type="text" id="element3" value="7"/>

In .editInPlace specifiction:

select_ajax: true,
select_ajax_load: "http://myserver/giveMePoint.do"
select_ajax_params: "element1:html,element2:html,element3:val"

The ajax request returns some String with the value of options, example: 
"option1:1, option2:2, option3:3"

The result:
When select is generating, we make a ajax request to 
"http://myserver/giveMePoint.do", with params: 
'element1=123&element2=456&element3=7'
This request, must return a String of params (ex: 
"option1:1,option2:2,option3:3"), and options are added to the select.

I attach the code modified.

Original comment by aah...@gmail.com on 19 Feb 2011 at 8:23

Attachments:

• jquery.editinplace.js

[GoogleCodeExporter]

Another modification...

I have mantained the params, but changed the select_ajax_params. Now are more 
flexible, the paramas are a list of 'element:name_to_send'

Example:

<span id="param1">123</span>
<span class="param2">456</span>

And the Ajax request, needs two params, the first named "country" and the 
second named "province" and returns a list of options for the select.

The configuration of editInPlace:

        select_ajax: true,
        select_ajax_load: '/getAllOptionsList.s4b',
        select_ajax_params: '#param1:country,.param2:province',

Result: 
The function, gets (val and html values) of each element (#param1 and .param2) 
and send a ajax request.

Original comment by aah...@gmail.com on 20 Feb 2011 at 10:13

Attachments:

• jquery.editinplace.js