I have setup clipboardjs successfully. Now I am adding a framework to it for design purpose.
It is all working fine only when I add a new class to the button called "small button" than it will not work anymore. Before I used a button it will work very well.
I think there is an simple answer but I think I have the wrong look on the issue.
This is the not working example:
< script >
var clipboard = new Clipboard('.small button');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
}); < /script>
<div class="result">
<label>E-Mail Code:</label>
<p>
<textarea id="emailcode">
<?=$image;?>
</textarea>
</p>
<p>
<button class="small button" data-clipboard-action="copy" data-clipboard-target="#emailcode">
Copy to clipboard
</button>
</p>
<label>Digistore24 Code:</label>
<p>
<textarea id="ds24code">
<?=$ds24;?>
</textarea>
</p>
<p>
<button class="small button" data-clipboard-action="copy" data-clipboard-target="#ds24code">
Copy to clipboard
</button>
</p>
</div>
This is the working example:
< script >
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
}); < /script>
<div class="result">
<label>E-Mail Code:</label>
<p>
<textarea id="emailcode">
<?=$image;?>
</textarea>
</p>
<p>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#emailcode">
Copy to clipboard
</button>
</p>
<label>Digistore24 Code:</label>
<p>
<textarea id="ds24code">
<?=$ds24;?>
</textarea>
</p>
<p>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#ds24code">
Copy to clipboard
</button>
</p>
</div>
The argument passed when initializing the clipboard library is a CSS selector, so the code you have
new Clipboard('.small button')
will find button tags within tags of small class. What you want is probably
new Clipboard('.small.button')
which will find tags having both small and button classes.
Add a double class to your button as posted down below. First you post "btn" and then with a space the relevant css from the framework.
<button class="btn small button" data-clipboard-action="copy"
data-clipboard-target="#ds24code">
Related
Hey the task i try to achieve is to activate and deactivate a button depending on, if there is text in a textarea or not.
Here the code I'm trying to get going.
var button = document.getElementById("button_01");
var textarea = document.getElementById("textarea_01");
$(button).prop('disabled', true);
textarea.addEventListener('keyup', function() {
button.disabled = !this.value;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div_01">
<h1>String Editor</h1>
<textarea id="textarea_01" rows="5" placeholder="Paste your string here"></textarea>
</div>
<div id="div_02">
<h1>Options</h1>
<button id="button_01" type="button" value="submit">
Modify
</button>
</div>
and here a fiddle: Fiddle
What I'm really not understanding here is, why the button which I disabled in the js part is still active
I'm an absolute html/js/web developement newbie, so please give some explanation.
Thanks in advance
The jsFiddle doesn't work because there's no jQuery CDN link.
You can find an updated version, witch includes the jQuery CDN here.
You're using jQuery to disable the button on page-load.
I'll recommend using HTML for that:
<button id="button_01" type="button" value="submit" disabled>
Then, your code appears to work just fine because there's no jQuery needed anymore:
var button = document.getElementById("button_01");
var textarea = document.getElementById("textarea_01");
textarea.addEventListener('input', function() {
button.disabled = !this.value;
});
<div id="div_01">
<h1>String Editor</h1>
<textarea id="textarea_01" rows="5" placeholder="Paste your string here"></textarea>
</div>
<div id="div_02">
<h1>Options</h1>
<button id="button_01" type="button" value="submit" disabled>
Modify
</button>
</div>
Note;
Changed event from keyup to input so things like right-click and paste will trigger the event. (Thx to #freedomn-m)
Try like this.
var button = document.getElementById("button_01");
var textarea = document.getElementById("textarea_01");
button.disabled = true;
textarea.addEventListener('keyup', function() {
button.disabled = !this.value;
});
<div id="div_01">
<h1>String Editor</h1>
<textarea id="textarea_01" rows="5" placeholder="Paste your string here"></textarea>
</div>
<div id="div_02">
<h1>Options</h1>
<button id="button_01" type="button" value="submit">
Modify
</button>
</div>
How to clear textarea field onclick? the problem is I am using AJAX. it won't reload the page. can anyone help me to solve this problem.
<div class="write_comment" style="">
<textarea type="text" id="form_task_comment" name="form_task_comment" value="" placeholder="Write your comment here..."></textarea>
<div class="buttons" style="float:right">
<button id="btn_comment_submit" class="btn btn-default btn hoverable btn-sm btn_comment_submit" style="margin:0rem;" type="submit">Add Comment</button>
</div>
</div>
Try this. Click on button to clear Textarea
$('.clearText').click(function(){
$("#form_task_comment").val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="clearText">Click Here To Clear Textarea</button>
<br>
<textarea id="form_task_comment">This is textarea</textarea>
In case you do not want to use jQuery. And the other posts above do not mention how to reset your textarea ON send. When you bind onclick, it would clear the text BEFORE sending. Therefore you need to use form onsubmit
var textArea = document.getElementById("form_task_comment")
var form = document.getElementById("form-name")
form.addEventListener("submit", function(event) {
textArea.value = "";
event.preventDefault();
}, false)
<div class="write_comment" style="">
<form id="form-name" >
<textarea type="text" id="form_task_comment" name="form_task_comment" value="" placeholder="Write your comment here..."></textarea>
<div class="buttons" style="float:right">
<button id="btn_comment_submit" class="btn btn-default btn hoverable btn-sm btn_comment_submit" style="margin:0rem;" type="submit">Add Comment</button>
</div>
</form>
</div>
Simply just replace textarea.value with nothing when button is clicked??
html code:
<input type="button" value="Clear Text" onclick="eraseText();"></input>
Javascript:
function eraseText()
{
document.getElementById("form_task_comment").value = "";
}
You can simply clear the value of text area using .val() like this
$("#form_task_comment").val('');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="form_task_comment">This is textarea</textarea>
Add this line of code wherever you want to clear the text area
What should i do if i need to replace the "test test" message with custom one using JavaScript?
<div class="outputmsg_container" style="" id="output_messages"><
button class="btn btn-icon close icon-cross" onclick="GlideUI.get().clearOutputMessages(this); return false;">
<span class="sr-only">Close Messages"</span>
</button>
<div class="outputmsg_div">
<div class="outputmsg outputmsg_error notification notification-error"><img class="outputmsg_image" src="images/outputmsg_error_24.gifx" alt="">
<span class="outputmsg_text">test test</span>
</div>
</div>
</div>
Use innerHTML to change the HTML inside an element.
<label for="newhtml">HTML (or text) to be inserted inside div:</label>
<br/>
<input type="text" id="newhtml"/>
<br/>
<input type="button" id="change" value="Insert" onClick="change()"/>
<br/>
<span id="container"></span>
<script>
function change(){
document.getElementById("container").innerHTML = document.getElementById("newhtml").value;
}
</script>
Here is an example to do this with jquery.
$('.outputmsg_text').html("YOUR CUSTOM TEXT")
Here's an example JSFiddle (REQUIRE JQUERY)
<button id="change">Change Text</button>
<div id="div">
Some text
</div>
<script>
$("#change").click(function(){
var name = prompt("What text shoud it be?");
if(name){
$("#div").html(name);
}
});
</script>
In the markup, i have several divs with same id and inside those divs there are paragraphs and buttons. Now when a button is clicked, i want to get the value of a corresponding paragraph tag under the same div as that particular button. How can i do this with jQuery? The markup is as followed:
<div class="col-sm-5 narrow">
<p id="title">Jhon123</p>
<p id="text">This is the status of jhon</p>
<p>posted at 12:30pm GMT6+</p>
<form class="form-inline">
<input type="text" class="form-control" id="reply" placeholder="Type and enter to reply">
<button type="button" class="btn btn-default" id="repost">Re-Tweet</button>
</form>
</div>
When the button with the id #repost is clicked, i want to access the html inside the p tag with the id #text. I tried something like this:
$('#retweet').click(function(e){
e.stopPropagation();
var text = $(this).parent("div").closest('#text');
alert("some retweet button has been pressed which has the text:"+text);
});
You can use the jQuery .closest() function to get the containing <div> and then find the <p> tag you want inside it:
$('#repost').on('click', function () {
var text = $(this).closest('div[class^=col]').find('#text').html();
console.log(text);
});
The div[class^=col] selector means "find the closest div tag with a class starting with col". This allows you to use the other bootstrap column classes as well and have it still work.
$('#repost').click(function(){
console.log($(this).closest('div').find('#text').html());
});
See demo http://jsbin.com/wojupoyosa/1/edit?html,js,console,output
and as comments suggest you IDs should be unique per page so you should use a class or something else instead.
$( "#text" ).text() will give you the value inside P tag. So your code will look something like:
$('#repost').click(function(){
$( "#text" ).text() // save it to wherever you want
});
As a side note it is generally frowned upon to have css id's that are not unique - shared identifiers should use a class.
If you change all your ids into classes as shown in the demo below, then the following code should work fine. Also, you do not need the form element.
$('.repost').click(function(){
var text = $(this).closest('div').find('.text').text();
alert("some retweet button has been pressed which has the text: " + text);
});
$(function() {
$('.repost').click(function(){
var text = $(this).closest('div').find('.text').text();
alert("some retweet button has been pressed which has the text: " + text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-5 narrow">
<p class="title">Jhon123</p>
<p class="text">This is the status of jhon</p>
<p>posted at 12:30pm GMT6+</p>
<form class="form-inline">
<input type="text" class="form-control reply" placeholder="Type and enter to reply">
<button type="button" class="btn btn-default repost">Re-Tweet</button>
</form>
</div>
<div class="col-sm-5 narrow">
<p class="title">Mary123</p>
<p class="text">This is the status of mary</p>
<p>posted at 12:35pm GMT6+</p>
<form class="form-inline">
<input type="text" class="form-control reply" placeholder="Type and enter to reply">
<button type="button" class="btn btn-default repost">Re-Tweet</button>
</form>
</div>
I have a 'div' that copies the text and I can paste it somewhere else.
<div id="div1">
<div>
Positive Comments:
<br/>
<textarea id="txtArea" rows="3" name="txtCommentPositive#CurrentRow#">
#reReplaceCommentpositive
</textarea>
</div>
<div>
Negative Comments:
<br/>
<textarea rows="3" name="txtCommentNegative#CurrentRow#">
#reReplaceCommentnegative#
</textarea>
</div>
<input type="button" id="btn" value="copy" onclick="copyText()" />
</div>
It works when it has one result since its getting the first div1, but when it has two or more results even if i click on the 'copy' it will copy the first text.
How can I get it that it will copy each div separately?
This is my javascript:
function copyText() {
var copyDivText = document.getElementById('div1').innerText;
var returnVal = window.clipboardData.setData('Text', copyDivText);
alert(returnVal);
document.getElementById('div2').innerText = window.clipboardData.getData('Text');
}
After re-reading your question countless times, suddenly it clicked: it seems like you want to use the code from div1 as a 'pattern' that you can re-use.
However your javascript has currently just one div-id hard-coded.
I didn't know what to make of div2 (from your function) so I changed that (as example) to a textarea (with id clipboardText) that will show you the text-content that was just copied to the clipboard.
For simplicity (staying in-line of what seems to be your current code-logic/style) I suggest that the button is a direct child of the div that it needs to get the innerText from. If this is the case (and we continue to use inline-script), you'd pass this (that refers to the button that was clicked) to the function. In the function you'd then simply get the innerText of the button's parentNode:
Javascript:
function copyText(t) {
var copyDivText = t.parentNode.innerText;
var returnVal = window.clipboardData.setData('Text', copyDivText);
alert(returnVal);
document.getElementById('clipboardText').value = window.clipboardData.getData('Text');
}
HTML Body (note I added another 'pattern' with id div2, since that seemed inline with what I guess you are doing):
<textarea id="clipboardText"></textarea>
<hr>
<div id="div1">
<div>
Positive Comments:
<br/>
<textarea id="txtArea" rows="3" name="txtCommentPositive#CurrentRow#">
#reReplaceCommentpositive
</textarea>
</div>
<div>
Negative Comments:
<br/>
<textarea rows="3" name="txtCommentNegative#CurrentRow#">
#reReplaceCommentnegative#
</textarea>
</div>
<input type="button" id="btn" value="copy" onclick="copyText(this);" />
</div>
<div id="div2">
<div>
Positive Comments:
<br/>
<textarea id="txtArea" rows="3" name="txtCommentPositive#CurrentRow#">
#reReplaceCommentpositive
</textarea>
</div>
<div>
Negative Comments:
<br/>
<textarea rows="3" name="txtCommentNegative#CurrentRow#">
#reReplaceCommentnegative#
</textarea>
</div>
<input type="button" id="btn" value="copy" onclick="copyText(this);" />
</div>
Hope this is what you intended with your question.
PS: if this is what you intended, note that a lot of people consider inline-scripts bad and when you dynamically attach your function you do not have to pass this anymore (since then this can be called directly inside your function).