2017-10-13 26 views
1

私はコントローラからデータを取得し、Jqueryダイアログボックスに表示するajaxメソッドを持っています。私の目標は、マウスを使用してデータを強調表示してコピーする代わりに、クリックしてデータを許可するボタンをダイアログボックス内に持つことです。ajaxの成功結果をclipbaordにコピーする方法

アヤックス

function GrabLink(surveyName) { 
    $.ajax({ 
     type: "GET", 
     url: "/Survey/sendLink", 
     data: { test: surveyName }, 
     contentType: "application/json; charset=utf-8", 
     success: function (data) { 

      $('#my-dialog').html(data); 
      $("#my-dialog").dialog("open"); 

      //alert(data); 
      //$("#my-dialog").show(data); 
     } 
    }) 
} 

jQueryのダイアログ

$('#my-dialog').dialog({ 
    autoOpen: false, 
    width: 400, 
    resizable: false, 
    modal: true, 
    buttons: { 
     'Copy': function() 
     { 
      //window.prompt("Copy to clipboard: Ctrl+C, Enter", text); 
      // $(this).dialog('close'); 

     } 

    } 
}); 
+0

の選択なし[クリップボードを見てください。 js](https://clipboardjs.com/)。 –

+0

私の解決策の答えはあなたの問題を解決していますか? –

+1

はい、有効な回答としてマークしました – cedPound

答えて

1

あなたはjavascriptでクリップボードにコピーするためにexecCommandを使用することができます。一時的に入力を作成し、内部のデータを入れて、それを削除:コードデータをコピーし、以下の

function clipboard(){ 
    var mydata = document.createElement("input"); 
    document.body.appendChild(mydata); 
    mydata.setAttribute("id", "mydata_id"); 
    document.getElementById("mydata_id").value=Yourdata-success-response; 
    mydata.select(); 
    document.execCommand("copy"); 
    document.body.removeChild(mydata); 
} 
-1

てみたテキスト/データ

<head> 
 
    <script type="text/javascript"> 
 
     function CopyToClipboard() { 
 
      var input = document.getElementById ("toClipboard"); 
 
      var textToClipboard = input.value; 
 
      
 
      var success = true; 
 
      if (window.clipboardData) { // Internet Explorer 
 
       window.clipboardData.setData ("Text", textToClipboard); 
 
      } 
 
      else { 
 
        // create a temporary element for the execCommand method 
 
       var forExecElement = CreateElementForExecCommand (textToClipboard); 
 

 
         /* Select the contents of the element 
 
          (the execCommand for 'copy' method works on the selection) */ 
 
       SelectContent (forExecElement); 
 

 
       var supported = true; 
 

 
        // UniversalXPConnect privilege is required for clipboard access in Firefox 
 
       try { 
 
        if (window.netscape && netscape.security) { 
 
         netscape.security.PrivilegeManager.enablePrivilege ("UniversalXPConnect"); 
 
        } 
 

 
         // Copy the selected content to the clipboard 
 
         // Works in Firefox and in Safari before version 5 
 
        success = document.execCommand ("copy", false, null); 
 
       } 
 
       catch (e) { 
 
        success = false; 
 
       } 
 
       
 
        // remove the temporary element 
 
       document.body.removeChild (forExecElement); 
 
      } 
 

 
      if (success) { 
 
       alert ("The text is on the clipboard, try to paste it!"); 
 
      } 
 
      else { 
 
       alert ("Your browser doesn't allow clipboard access!"); 
 
      } 
 
     } 
 

 
     function CreateElementForExecCommand (textToClipboard) { 
 
      var forExecElement = document.createElement ("div"); 
 
       // place outside the visible area 
 
      forExecElement.style.position = "absolute"; 
 
      forExecElement.style.left = "-10000px"; 
 
      forExecElement.style.top = "-10000px"; 
 
       // write the necessary text into the element and append to the document 
 
      forExecElement.textContent = textToClipboard; 
 
      document.body.appendChild (forExecElement); 
 
       // the contentEditable mode is necessary for the execCommand method in Firefox 
 
      forExecElement.contentEditable = true; 
 

 
      return forExecElement; 
 
     } 
 

 
     function SelectContent (element) { 
 
       // first create a range 
 
      var rangeToSelect = document.createRange(); 
 
      rangeToSelect.selectNodeContents (element); 
 

 
       // select the contents 
 
      var selection = window.getSelection(); 
 
      selection.removeAllRanges(); 
 
      selection.addRange (rangeToSelect); 
 
     } 
 
    </script> 
 
</head> 
 
<body> 
 
    <input id="toClipboard" value="text to clipboard"/> 
 
    <button onclick='CopyToClipboard()'>Copy text to clipboard</button> 
 
</body

関連する問題