Open Kendo Prompt Customized dialog on button click

I have tried to piece together bits of info from google searches, but I can't find a clear answer to why the Kendo Prompt only works once when a page is refreshed. Here is a simple script which is based on one of the samples provided by Telerik, but I modified it to allow the prompt to be triggered by a button click. It appears that after the click, the prompt div is no longer accessible, but I don't understand why. Anybody know the answer?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>

<div id="prompt"></div>
<div><button class="k-button" onclick="onClk()">Click Here</button></div>
<script>
  function onClk() {
      $("#prompt").kendoPrompt({
      content: "Prompt text",
     value: "Default input text",
    messages:{
      okText: "OK"
    }
    }).data("kendoPrompt").result.done(function(data){
        console.log("User accepted with text: " + data);
    })
    .fail(function(data){
        console.log("User rejected with text: " + data);
    });
   }
</script>
</body>
</html>

Solution

That is because you are using customized prompts targetted to a container rather than normal alert and prompt dialogs, and after opening it for the first time, once you click on ok or cancel the container div #prompt is removed from the document along with the dialog, and when you click the button again to open it, it simply does not find the element to bind kendopromptso it throws the error at the point when it calls .data(). ideally, if you want to use it in this way you should create the container div before calling the function inside your javascript and append it to the body, change your code to match the below code in the demo. just match your javascript and try to use meaningful names for the functions.

Hope it helps

function myPrompt() {
  $("#prompt").kendoPrompt({
      content: "Prompt text",
      value: "Default input text",
      messages: {
        okText: "OK"
      }
    }).data("kendoPrompt").result.done(function(data) {
      console.log("User accepted with text: " + data);
    })
    .fail(function(data) {
      console.log("User rejected with text: " + data);
    });
}

$(document).ready(function() {
  $(".k-button").on('click', function() {
    if ($("#prompt").length < 1) {
      var div = document.createElement('div');
      div.setAttribute('id', 'prompt');
      $('body').append(div);
    }
    myPrompt();
  });
})

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css" />

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>

<body>

  <div id="prompt"></div>
  <div>
    <button class="k-button">Click Here</button>
  </div>