Base solution for your next web application

Activities of "nlshcc98765"

Ok, so I got this to work using the same solution found here: [https://forum.aspnetboilerplate.com/viewtopic.php?f=5&t=2342&start=10])

I have to place it at the end of the file, not in the init.

(function ($) {
    app.modals.EditPunchModal = function () {

        var _punchesService = abp.services.app.punch;

        var _modalManager;
        var _$punchForm = null;
        var punchdatetime = null;

        this.init = function (modalManager) {
            _modalManager = modalManager;

            _$punchForm = _modalManager.getModal().find('form[name=PunchForm]');
            _$punchForm.validate();                  
           
            this.save = function () {
                if (!_$punchForm.valid()) {
                    return;
                }
                
                var punch = _$punchForm.serializeFormToObject();

                _modalManager.setBusy(true);       

                _punchesService.updatePunch({
                    punch: punch
                }).done(function () {
                    abp.notify.info(app.localize('SavedSuccessfully'));
                    _modalManager.close();
                    abp.event.trigger('app.editPunchModalSaved');
                }).always(function () {
                    _modalManager.setBusy(false);
                });

            };
        };
    };

   $('#datepicker').datetimepicker();
})(jQuery);
Answer

Yes. Looking for a working model.

Does the format need to be that due to JSON/AJAX ? Or can I use a different format such as m/d/yyyy h:ii tt

I tried both (your format and mine) and also adding the data-link-format to the link field with no luck. Is there an example out there somewhere that works I could review?

I'm wondering if this method will use binding to push the new value back to Model.Punch.punchDateTime or will I need to use some retrieval logic in the _EditPunchModal.js after var punch = _$punchForm.serializeFormToObject(); ?

Answer

If you don't mind me asking, how are you retrieving the value from the DateTime picker? Can you share the HTML on the modal and the JS file?

Thank you for all your patience and assistance.

I was able to get this to work exactly as I like with your guidance. I thought I had tried this exact approach before but for whatever reason it worked this time.

Thank you again.

The HTML is in the original post. Here it is again for reference. THANK YOU for your help.

If you feel I should be using a different Drop Down List Class/component please let me know what would be better.

When I put the label before the Drop Down List It is not properly styled AND causes the Drop Down List to be misaligned with the other items on the row. See attached image.

<div class="col-sm-3">
                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                    <select id="punchaction" name="punchaction" class="selectpicker show-menu-arrow punchaction">
                        <option value="1">@L("IN")</option>
                        <option value="2">@L("OUT")</option>
                    </select>
                    <label>@L("punchaction")</label>
                </div>
            </div>

Thank you, that works.

Next question for this: Visual layout. I'm having trouble getting 2 things to display correctly:

  1. Label: The label "Punch Action" is below the control and not styled properly.
  2. Select: has box around it. I was able to remove the box around the Advanced DateTime Select box (also in this image) and would like for the Punch Action Select to ONLY have the text and the drop-down arrow off to the right.

Thank you for the quick support for these issues.

See Attached image for reference.

Thank you for the quick reply. I just found it odd the "View" modal was allowing users to modify data. I also created a "Close" only modal (in addition to the cancelAndSave) for the Read Only "View" Modal and applied the Readonly tag and Class attributes. I'm also looking for 2 other examples for a standard dropdown list implementation and Date AND Time picker both within the modal. I'll post a separate thread for these.

Showing 1 to 8 of 8 entries