【问题标题】:sweetalert2 text input with validation of the text with javascript in R Shinysweetalert2 文本输入,在 R Shiny 中使用 javascript 验证文本
【发布时间】:2018-12-04 17:25:58
【问题描述】:

我正在 R shiny 中从 sweetalert 升级到 sweetalert2,到目前为止,我已经设法让 R shiny 服务器定期响应警报消息中的“确定/取消”按钮,但现在我坚持使用下一种类型,即我曾经在其中执行一些验证的文本输入消息:

  • 使用特殊字符 在将值发送到 R 之前。

Here你可以找到一个实现了sweetalert2的应用。

在新问题中,我试图用包含输入消息的消息替换该应用程序中的 javascript:

myjava <- "shinyjs.swalFromButton = function(params) { 
      var defaultParams = {
    title: null,
    html : null
    };
    params = shinyjs.getParams(params, defaultParams);
    swal({title : params.title, html : params.html,  
    input: 'text',
    showCancelButton : true,
    showConfirmButton : true,
    closeOnConfirm: false,
    confirmButtonColor: '#339FFF',
    allowOutsideClick: false,
    inputValidator: function(value) {
    if(value === '') { return !value && 'You need to write something!'}
    else {
    var val2= true; 
    Shiny.setInputValue('option2', val2, {priority: 'event'}) };
    }
    });
    };"

到目前为止这有效,但我不知道如何添加其他检查以使用特殊字符(文件名中不允许使用) 在我的旧代码中,我有这条线用于 sweetalert (1) 工作:

 var format = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/;
 if(format.test(inputValue)){   
 swal.showInputError('Special characters are not allowed');
 return false;
 }

但是当我构建这个时,它在 sweetalert2 中不起作用:

myjava <- "shinyjs.swalFromButton = function(params) { swalFromButton = function(params) {       var defaultParams = {
    title: null,
    html : null
    };
    params = shinyjs.getParams(params, defaultParams);
    swal({title : params.title, html : params.html,  
    input: 'text',
    showCancelButton : true,
    showConfirmButton : true,
    closeOnConfirm: false,
    confirmButtonColor: '#339FFF',
    allowOutsideClick: false,
  inputValidator: function(value) {
if(value === '') { return !value && 'You need to write something!'}
else {
          var format = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/;
                         if(format.test(value)){   
                           return !value && 'Special characters are not allowed'}
                       else {
                         var val2= true; 
Shiny.setInputValue('option2', value, {priority: 'event'})} 
}
}
});
};

【问题讨论】:

    标签: javascript r shiny sweetalert2


    【解决方案1】:

    正如在另一篇文章中所承诺的,这是一个没有shinyjs的解决方案:

    library(shiny)
    
    js <- "
    Shiny.addCustomMessageHandler('sweet',
      function(message) {
        swal({
          title : message.title, 
          html : message.html, 
          input : 'text', 
          showConfirmButton : true,
          confirmButtonText : 'Confirm',
          confirmButtonColor: '#00cc00',
          showCancelButton : true,
          cancelButtonText : 'Cancel',
          cancelButtonColor : '#339fff',
          allowOutsideClick: true,
          allowEscapeKey: true,
          inputValidator: function(value) {
            if(value === '') { 
              return 'You need to write something!'
            } else {
              var format = /\\`|\\~|\\!|\\@|\\#|\\$|\\%|\\^|\\&|\\*|\\(|\\)|\\+|\\=|\\[|\\{|\\]|\\}|\\||\\\\|\\'|\\<|\\,|\\.|\\>|\\?|\\/|\"|\\;|\\:/g;
              if(format.test(value)){   
                return 'Special characters are not allowed'
              } 
            }
          }
        })
        .then(function(result){
          if(result.dismiss === swal.DismissReason.cancel) {
            swal('failure');
          } else {
          swal('success');
            Shiny.setInputValue('option1', result.value, {priority: 'event'});
          }
        });
      }
    );
    "
    ui <- basicPage(
      tags$head(tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.29.2/sweetalert2.all.min.js"),
                tags$link(rel="stylesheet", type="text/css", href = "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.29.2/sweetalert2.min.css"),
                tags$script(js)
      ),
      actionButton("messageButton", "Click me")
    
    )
    
    server <- function(input, output, session){
      observeEvent(input$messageButton, {
        session$sendCustomMessage(type = "sweet",
                                  message = list(title = paste('<span style ="color:#339FFF;">An alert with an input text'),
                                                 html = "Enter text"))
      })
    
      observe({print(input$option1)})
    }
    
    shinyApp(ui, server)
    

    【讨论】:

    • Stéphane,谢谢分享!我今天试试。您是否也知道如何设置消息的水平位置?我曾经添加一个 tags$head(tags$style(HTML('.sweet-alert {left: 57%;}'))) 但我不知道使用什么类名来定位 sweetalert2 消息跨度>
    • @Mark 我不知道,但看here 可以看到CSS 类以.swal2 开头,而不是.sweet
    • Stephane,我在邮件中遇到了另一个奇怪的问题。如果我发布一个新问题,你能看看吗?或者我们可以以某种方式直接沟通
    • 我不发送成功或失败消息,但是通过我的 shinyjs 方法和您的方法,会触发一条新的 sweetalert2 消息,其中只有标题、html 文本和 ok/cancel 评估,但由于某种原因这第二条消息中的文本最终被打印在错误栏中
    • @Mark 你为什么不打开一个新问题? :-)
    猜你喜欢
    • 2023-04-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-06-09
    • 2023-03-17
    • 1970-01-01
    相关资源
    最近更新 更多