Question

I have a web form in SPARK which allow the editing of a Facility class that contains Rooms. When editing the Facility all the Rooms are listed for editing too. The form works fine for editing, but I would like to include a button “Add Room” that adds a new blank room below the existing ones. Any idea how this is accomplished?

Currently I am doing this in my SPARK page:

[All the Facility editing stuff...]
<p>Room</p>
 <div class="small">Enter the rooms associated with this facility.</div>
  <div class="add">
    <div id="room">
      <AddFacilityRoom each="var roomModel in Model.FacilityRooms" RoomModel="roomModel" Index="roomModelIndex" />
    </div>
    <a id="addRoom" class="add" href="events/room/add.mvc">Add a room</a>
  </div>

AddFacilityRoom contains the html elements for editing a room.

I would like add.mvc to create a new empty Room class and inject a new identical (but empty) control below the existing ones. Currently, though it opens a new page when the “Add a Room” button is clicked.

Answer 1

Ok, I figured this out. I was missing the JQuery knowledge to understand this. The function below:

$('#addRoom').click(function () {
    var a = $(this);
    a.addClass('loading');
    $.ajax({
        url: a.attr('href'),
        cache: false,
        success: function (html) {
            $('#room').append(html);
            a.removeClass('loading');
        }
    });
    return false;
});

Plus, the following HTML:

<div id="room">
 <a id="addRoom" class="add" href="events/room/add.mvc">Add a room</a>
</div>

Does the trick.