MVC 4 Creating resizable listbox

Question

I have the following partial view to create a list box:

@model App.ValueObjects.DummyVo
@using App.Client.Mvc.Helpers.HtmlHelpers

@Html.ListBoxFor(model => model.SelectedContractIds, new MultiSelectList(ViewBag.Contracts, "Id", "ContractNo"), new { @class="ui-resizable ui-resizable-helper" })

That partial view is called dynamically using an AJAX command.

In the main view, I have the following div:

<div id="contractList">
</div>

This is used to contain the dynamically created list box.

And then, I have also applied the following javascript into the main view:

$(document).ready(function () {
   $('#contractList').resizable();
}

The 'Resizable' is from JQuery-ui-1.9.2.js. The problem is:

• The 'resizable' behavior of the div only works when the DIV has nothing in it, i.e. when the AJAX command has been called to create the list box, the 'resizable' does not work anymore.

Please give some advice on how to handle this, thanks! (Other alternatives are welcomed as well)

Answer 1

one solution could be in the ajax success call back after adding the content to the target div, re-call the resizeable like

 success:function(data){
   $('#contractList').resizable();
  }