Question

I have managed to write a jquery to do the following:

• Upon selecting a new item in a Multiple Select, the jquery would load a div item with a particular url and retrieve an Input widget to place it there.

First attach a onChange event to the select widget:

$(document).ready(function () {
  $("#id_deals").change(deal_edit_func);
});

Now send the selected value to the url

function deal_edit_func(e) {
  var item = $('#deal_status')
  var selected = $(e.target).val();
  item.load(
    "/deal_status/" + selected,
    null
  );
  return false;
}

Within the view:

def _deal_status_view(request, deal_id):
    ids = deal_id.split(',')
    deal_status = DealStatus.objects.all()
    variables = RequestContext(request, {'deal_statuses': deal_status, 'ids': ids})
    return render_to_response('_deal_status.html', variables)

_deal_status.html:

<input type="text" value="{{deal_status}}" name="deal_status">

As long as only one item is selected, one input is returned and loaded into the div tag.
That works very nicely.

Now I need to extend this solution to, whenever more than one item are selected multiple inputs shall be returned, instead of just one like above. But this is where I got stuck. How on earth would I achieve this? the html would always be fixed…

Any help would be appreciated,

Answer 1

You can serialize your response to other format (eg xml,json) which can easily be parsed by jquery or javascript. Therefore your view will return multiple serialized objects then your javascript will process the returned objects.