search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Popup don't go away after Create

Asked by Hennie
3 years ago.

After I create my event, my popup don't go away, and my event is not displayed in my calendar.
I then need to go out of the calendar view to a different page and then go back to my calendar view to see my item.

What can I do to automatic refresh the calendar after create to make my calendar event display?

Answer posted by Dan Letecky [DayPilot]
3 years ago.

You can find a working example of the "new event" modal dialog in the following tutorial:

http://code.daypilot.org/59860/asp-net-mvc-5-event-calendar

The calendar is configured to display the modal dialog as soon as the user selected a time range:

@Html.DayPilotCalendar("dp", new DayPilotCalendarConfig
{
    BackendUrl = Url.Action("Backend", "Calendar"),
    ViewType = ViewType.Week,
    TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
    TimeRangeSelectedJavaScript = "create(start, end)"
})
JavaScript
<script type="text/javascript">

    function create(start, end) {
        var m = new DayPilot.Modal();
        m.closed = function () {
            if (this.result == "OK") {
                dp.commandCallBack('refresh');
            }
            dp.clearSelection();
        };
        m.showUrl('@Url.Action("Create", "Event")?start=' + start + '&end=' + end);
    }

</script>
Modal dialog MVC view (Views/Event/Create.cshtml):
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head runat="server">
   	<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.11.2.min.js")"></script>
    <link href="@Url.Content("~/Media/layout.css")" rel="stylesheet" type="text/css" />
   	<style>
   	p, body, td { font-family: Tahoma, Arial, Sans-Serif; font-size: 10pt; }
   	</style>
    <title></title>
</head>
<body style="padding:10px">
    <form id="f" method="post" action="@Url.Action("New")">
    
    <h1>New Event</h1>    
    
    <div>Text</div>
    <div>@Html.TextBox("Text")</div>
    
    <div>Start</div>
    <div>@Html.TextBox("Start")</div>

    <div>End</div>
    <div>@Html.TextBox("End")</div>


        <div class="space">
            <input type="submit" value="Save" id="ButtonSave"/>
            <a href="javascript:close()">Cancel</a>
        </div>
    <div class="space">&nbsp;</div>
    </form>
    
    <script type="text/javascript">
        function close(result) {
            if (parent && parent.DayPilot && parent.DayPilot.ModalStatic) {
                parent.DayPilot.ModalStatic.close(result);
            }
        }

        $("#f").submit(function () {
            var f = $("#f");
            $.post(f.action, f.serialize(), function (result) {
                close(eval(result));
            });
            return false;
        });

        $(document).ready(function () {
            $("#Text").focus();
        });
    
    </script>    
</body>
</html>

Note that the form submission is intercepted using jQuery and submitted using a special AJAX call. The modal dialog is closed using this following call:

parent.DayPilot.ModalStatic.close(result);

This passes control back to the main view - it fires the .closed event handler which updates the calendar using .commandCallBack():

// ...
m.closed = function () {
  if (this.result == "OK") {
      dp.commandCallBack('refresh');
  }
  dp.clearSelection();
};
// ...

The events are then refreshed using the OnCommand method on the server side:

protected override void OnCommand(CommandArgs e)
{
  switch (e.Command)
  {
      case "refresh":
          Update();
          break;
  }
}

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.