I’ve had several users ask about using Impromptu with ajax to pull in content. I myself far more pull in json to build my content for Impromptu. So I figured I’d kill two birds with one stone by creating an example of using Ajax to pull in JSON content, then build a select statement with that data. Here is the example JSON (nothing tricky here):


[
	{ name: 'foo 1', value: 1 },
	{ name: 'foo 2', value: 2 },
	{ name: 'foo 3', value: 3 },
	{ name: 'foo 4', value: 4 },
	{ name: 'foo 5', value: 5 },
	{ name: 'foo 6', value: 6 },
	{ name: 'foo 7', value: 7 },
	{ name: 'foo 8', value: 8 },
	{ name: 'foo 9', value: 9 },
	{ name: 'foo 10', value: 10 },
	{ name: 'foo 11', value: 11 },
	{ name: 'foo 12', value: 12 }
]

This should be fairly explanatory, name will be the visible text for each select option, and value will of course be that option’s value. To do this we first need to use jQuery’s $.getJSON() method to pull in the JSON, then within that callback we’ll build our string and call the $.prompt. Here is what it looks like:


$.getJSON('demoajax.js',function(json){

	var str = 'Test with a select populated by json data:<br />'+
		'<select name="myfield" id="myfield">';

	$.each(json,function(i,obj){
		str += '<option value="'+ obj.value +'">'+ obj.name +'</option>';
	});
	str += '</select>';

	$.prompt(str,{
		callback: function(v,m,f){ //just print out the selection
			$.prompt('You chose value '+ f.myfield);
		}
	});
});

Thats all there is to it. Here is the full working example. Don’t forget if you want to do real fun JSON parsing to check out my jsonSQL tool to write sql-like statements to parse your JSON to make combo drop downs more fun!

Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Reddit
  • StumbleUpon
  • Technorati
  • Twitter

Related posts:

  1. New Impromptu and Demo
  2. Impromptu: An Ajax Form Framework
  3. jQuery iFramer gets JSON Support
  4. Handling PHP Form Arrays with jQuery
  5. Key Value Pairs of Form Values with jQuery