Can't post the form from modal popup if using jquery timepicker

Question

I'm creating event calendar using daypilot lite. I'm following this tutorial to create the application in ASP.NET MVC 5.

When I clicked the calendar, for example 30/04/2015 02:00 PM - 30/04/2015 03:00 PM, the popup form will show up. In popup form, I'm using jquery datepicker and jquery timepicker on start and end field. Here is the picture & code to describe what I've done:

enter image description here

Index.cshtml:

@Html.DayPilotCalendar("dp", new DayPilotCalendarConfig
{
    BackendUrl = Url.Action("Backend", "Calendar"),
    BusinessBeginsHour = 8,
    BusinessEndsHour = 19,
    ViewType = ViewType.Day,
    TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
    TimeRangeSelectedJavaScript = "create(start, end)",
    EventClickHandling = EventClickHandlingType.JavaScript,
    EventClickJavaScript = "edit(e)",
    EventMoveHandling = EventMoveHandlingType.Notify,
    EventResizeHandling = EventResizeHandlingType.Notify,
    EventDeleteHandling = EventDeleteHandlingType.CallBack
})

<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>

Create.cshtml:

@model Calendar.ViewModels.CreateEventViewModel

<link href="@Url.Content("~/Content/jquery-ui.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/jquery-2.1.3.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.11.4.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/jquery.timepicker.css")" />
<script src="@Url.Content("~/Scripts/jquery.timepicker.min.js")"></script>

@using (Html.BeginForm())
{
    <fieldset>
        <legend>Event Details:</legend>
        <table>
            <tr>
                <td>
                    <label for="name">Event Name</label>
                </td>
                <td>
                    @Html.EditorFor(model => model.name, new { htmlAttributes = new { @class = "ui-widget-content ui-corner-all" } })
                    @Html.ValidationMessageFor(model => model.name, "", new { @class = "" })
                </td>
            </tr>
            <tr>
                <td>
                    <label for="startdate">Start</label>
                </td>
                <td>
                    @Html.EditorFor(model => model.startdate, new { htmlAttributes = new { @class = "ui-widget-content ui-corner-all datepicker", @readonly = "readonly" } })
                    @Html.EditorFor(model => model.starttime, new { htmlAttributes = new { @class = "ui-widget-content ui-corner-all timepicker" } })
                    @Html.ValidationMessageFor(model => model.startdate, "", new { @class = "" })
                </td>
            </tr>
            <tr>
                <td>
                    <label for="enddate">End</label>
                </td>
                <td>
                    @Html.EditorFor(model => model.enddate, new { htmlAttributes = new { @class = "ui-widget-content ui-corner-all datepicker", @readonly = "readonly" } })
                    @Html.EditorFor(model => model.endtime, new { htmlAttributes = new { @class = "ui-widget-content ui-corner-all timepicker" } })
                    @Html.ValidationMessageFor(model => model.enddate, "", new { @class = "" })
                </td>
            </tr>
        </table>
    </fieldset>
    <br />
    <div style="text-align: right">
        <button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary">Save</button>
        <a href="javascript:close()">Cancel</a>
    </div>
}

<script>
    $(function () {
        $(".datepicker").datepicker({
            dateFormat: "dd/mm/yy"
        });
        $(".timepicker").timepicker({
            "forceRoundTime": true,
            "timeFormat": "h:i A"
        });

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

    function close(result) {
        if (parent && parent.DayPilot && parent.DayPilot.ModalStatic) {
            parent.DayPilot.ModalStatic.close(result);
        }
    }
</script>

CreateEventViewModel.cs

public class CreateEventViewModel
{
    [Required]
    [StringLength(50)]
    public string name { get; set; }

    [DataType(DataType.DateTime)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
    public DateTime startdate { get; set; }

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:HH:mm}")]
    public DateTime starttime { get; set; }

    [DataType(DataType.DateTime)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
    public DateTime enddate { get; set; }

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:HH:mm}")]
    public DateTime endtime { get; set; }
}

If I clicked Save button it always get focus to starttime textbox. I've debugged using F12 Developer Tools there is no error or post action. The problem solved if I'm not using jquery timepicker.

What am I doing wrong?

score 0 · Answer 1 · answered Apr 30 '15 at 05:23

i think is the DataFormatString in your class, modify it like this:

public class CreateEventViewModel
{
    [Required]
    [StringLength(50)]
    public string name { get; set; }

    [DataType(DataType.DateTime)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
    public DateTime startdate { get; set; }

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:t}")]
    public DateTime starttime { get; set; }

    [DataType(DataType.DateTime)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
    public DateTime enddate { get; set; }

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:t}")]
    public DateTime endtime { get; set; }
}

i just changed the {0:HH:mm} hour format to {0:t} on starttime and endtime

The `DataFormatString` has nothing to do with it. And the `ApplyFormatInEditMode` can be removed. Those properties are only respected by the `@Html.EditorFor()` method when rendering the browsers HTML5 datepicker or timepicker (the sole purpose is to add the `type="date"` or `type="time"` attribute which is not necessary if using the plugins) — , Apr 30 '15 at 05:43

score 0 · Answer 2 · answered Apr 30 '15 at 12:14

My guess is that there is an error inside the submit event handler:

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

The error prevents "return false;" from being called which means the form is posted directly instead of using the $.post() call. The browser JS console is usually cleared on POST and that's why you don't see any error.

The actual problem might be that f.serialize() doesn't serialize the value from jQuery date/time pickers properly.

Try wrapping the code with try { ... } catch (e) { ... } to see the error:

 $("form").submit(function () {
     try {
         var f = $("form");
         if (f.valid()) {
             $.post(f.action, f.serialize(), function (result) {
                 close(eval(result));
             });
         }
         return false;
     }
     catch(e) {
         alert("Error while processing the form: " + e);
     }
});

Thanks for the answer, as explained by @StephenMuecke, the attribute should be `type="time"` for time field — Willy, May 01 '15 at 14:17

Can't post the form from modal popup if using jquery timepicker

2 Answers2