Display popup asking for authentication when clicking on screen component that is not allowed to change

Navigation
1

How to create a mechanism for when the user clicks to try to change a date that is as datepicker and display a popup for authentication or something like that to make this change? If he has permission, he can, otherwise he can not. 

 <script type="text/javascript">
            jQuery(function ($) {
                $.datepicker.regional['pt-BR'] = {
                    closeText: 'Fechar',
                    prevText: '&#x3c;Anterior',
                    nextText: 'Pr&oacute;ximo&#x3e;',
                    currentText: 'Hoje',
                    monthNames: ['Janeiro', 'Fevereiro', 'Mar&ccedil;o', 'Abril', 'Maio', 'Junho',
                    'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                    monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
                    'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                    dayNames: ['Domingo', 'Segunda-feira', 'Ter&ccedil;a-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sabado'],
                    dayNamesShort: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
                    dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
                    weekHeader: 'Sm',
                    dateFormat: 'dd/mm/yy',
                    firstDay: 0,
                    isRTL: false,
                    showMonthAfterYear: false,
                    yearSuffix: ''
                };
                $.datepicker.setDefaults($.datepicker.regional['pt-BR']);
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#txtNovaDtVenc").datepicker(
                    { changeMonth: true, changeYear: true }).attr('readonly', 'readonly');
            });
        </script>

@using (Html.BeginForm("Detalhes", "Faturas", FormMethod.Post, new { target = "_blank" }))
            { 
                <div class="div-detalhes">
                    <label> 
                        @Html.Hidden("NumeroDoc", Model.NumeroDocumento)
                        @Html.DisplayNameFor(model => model.NumeroDocumento) : 
                        @Html.DisplayFor(model => model.NumeroDocumento)
                    </label>
                    <label> 
                        Sacado : 
                        @Html.DisplayFor(model => model.sacado.Nome)
                    </label>
                    <label>
                        @Html.DisplayNameFor(model => model.ValorBoleto) : 
                        @Html.DisplayFor(model => model.ValorBoleto)
                    </label>
                    <label>
                        @Html.DisplayNameFor(model => model.DataVencimento) : 
                        @Html.DisplayFor(model => model.DataVencimento)
                    </label>
                    <label>
                        @Html.DisplayNameFor(model => model.DataDocumento) : 
                        @Html.DisplayFor(model => model.DataDocumento)
                    </label>
                    <label>
                        Nova dt. de vencimento : 
                        @Html.TextBox("txtNovaDtVenc", "", new { @class = "form-control form-control-custom", style="width:100px" })
                    </label>
                    <label>
                        <input class="btn btn-padrao-bv" type="submit" id="btnImprimir" value="Imprimir"/> |
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                   </label>
                </div>

            }
    
asked by anonymous 27.08.2015 / 16:22

1 answer

2

A possible solution I see would be, you bring from your ViewModel a Boolean, and then you could check in the view whether or not the user is logged in and whether you have permission with a simple IF .... 

   <script type="text/javascript">
        $(document).ready(function () {
            $("#txtNovaDtVenc").datepicker(
                { changeMonth: true, changeYear: true
}).attr('readonly', 'readonly');
        });
    </script>

First I suggest that you instead of using the ID use the Class in the Input ... 

$(".DatePicker").datepicker(

Because there you do not need to repeat the code again in other fields, if you can put it in a PartialView even better !!! so you can use the code in all of your Views that have dates that need to be changed.

Then you could create one: 

@Html.Hidden("IsLogado", Model.IsLogado)
@Html.Hidden("PodeAlterar", Model.PodeAlterar)

and then you pick up those values with jquery's .val (). 

var IsLogado = $( "#IsLogado" ).val();
var PodeAlterar = $( "#PodeAlterar" ).val();

you could create a function to check if you can change the date: with if statement checking: 

function PodeAlterarData {

if (!IsLogado) {

     return //código
  // para chamar a pop-up que irá pedir o login do usuário
  //         não se esqueça de setar os valores do input
  //com o usuario logado caso ele faça o log in
   }

if(!PodeAlterar) {

   return
  //exibir uma mensagem de erro dizendo que ele não possui 
  // privilégios de alteração

   }
return true;
}

obs: do not forget to give returns if the if are satisfied because it terminates the function.

and finally: you could do a simple: 

<script type="text/javascript">
    $(document).ready(function () {

        $(".DatePicker").datepicker(
            { changeMonth: true, changeYear: true
}).attr('readonly', 'readonly');

        $(".DatePicker").click(function() { 
         if(!PodAlterar)  { 
         // bloqueia o campo
        }            
});

        $(".DatePicker").dblclick(function() {
          if(!PodAlterar)  { 
         // bloqueia o campo
});
    });
</script>

I suggest you put a scan timeout between one click and another to make sure it does not bug!

    
27.08.2015 / 16:58
Function js does not run in chrome, due to window.event Is it possible to create a dynamic field within an Advanced Custom Field?