zClip - Copy only visible text - javascript

Hey hopefully this is an easy solution:
On click of the button I want to be able to copy only the text that is visible within the id="description". what am I doing wrong?
HTML:
<p id="description"> Test <span style="display:none">test2</span></p>
<button type="button" id="copy-description">Click Me!</button>
jQuery:
<script type="text/javascript" src="js/jquery.zclip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#copy-description').zclip({
path:'js/ZeroClipboard.swf',
copy:$('p#description').text()
});
// The link with ID "copy-description" will copy
// the text of the paragraph with ID "description"
$('a#copy-dynamic').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('input#dynamic').val();}
});
// The link with ID "copy-dynamic" will copy the current value
// of a dynamically changing input with the ID "dynamic"
});
</script>

It needs to be in a parent tag like a p tag and then call the span visible within that tag.
HTML:
<p id="description">
<span id=""> Test </span>
<span style="display:none; visibility:hidden;">test2</span>
</p>
jQuery:
$('#copy-description').zclip({
path:'js/ZeroClipboard.swf',
copy:$('#description span:visible').text()
});

Related

How can I change the text of an element without affecting its child element?

I have the following div and want to change the text that says "Don't have an account?" to something else.
I've tried $('a#createAccount').text'some text) or .html('some text');
Same with $('.create p'), but it removes the <a>.
<div class="create">
<p>
Don't have an account?<a id="createAccount" tabindex="1" href="https://somewebsite.com">Sign up now</a>
</p>
</div>
change only the text leaving the <a> unchanged
You can select the anchor tag, put it in a variable, overwrite the content of your paragraph and then append the anchor tag back to it.
let anchor = $('a#createAccount');
let paragraph = $('.create p')
paragraph.text("New text ");
paragraph.append(anchor);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create">
<p>
Don't have an account?<a id="createAccount" tabindex="1" href="/b3c3aa0d-d4db-459d-8bf6-ed1538d45256/B2C_1_sign_up_sign_in_persona...">Sign up now</a>
</p>
</div>
Per How do I select text nodes with jQuery?, you can leverage chained functions to filter your matched elements to the text nodes within a parent element, then set their data attribute to the text that you want:
$(document).ready(function() {
$(".create p").contents().filter(function() {
return this.nodeType === 3; //Node.TEXT_NODE
}).each(function() {
if ($(this).text().trim() !== "") this.data = 'some text'; // ensure that stray blank text nodes aren't caught up in this change
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create">
<p>
Don't have an account?<a id="createAccount" tabindex="1" href="/b3c3aa0d-d4db-459d-8bf6-ed1538d45256/B2C_1_sign_up_sign_in_persona...">Sign up now</a>
</p>
</div>
var link = $("#createAccount");
$(".create p").html("some text ").append(link);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create">
<p>
Don't have an account?<a id="createAccount" tabindex="1" href="/b3c3aa0d-d4db-459d-8bf6-ed1538d45256/B2C_1_sign_up_sign_in_persona...">Sign up now</a>
</p>
</div>
I will answer my own question. There are ways to achieve this with JavaScript, but that would not be best practice and there is an easier way that does not involve JavaScript.
Given that this is an implementation of Azure B2C using a custom policy, this text is best handled in the policy using localization.
For example:
<LocalizedResources Id="api.signuporsignin.en">
<LocalizedStrings>
<LocalizedString ElementType="UxElement" StringId="createaccount_one_link">Sign up now</LocalizedString>
<LocalizedString ElementType="UxElement" StringId="createaccount_intro">Don't have an account?</LocalizedString>
</LocalizedStrings>
</LocalizedResources>
Try using document.write and update what you need
document.write("<p>
Don't have an account?<a id="createAccount" tabindex="1" href="/b3c3aa0d-d4db-459d-8bf6-ed1538d45256/B2C_1_sign_up_sign_in_persona...">Sign up now</a>
</p>");
Do you have to use jQuery to do this? If not and you can just use plain old javascript, why not try document.getElementById('createAccount').innerHTML = 'some text';
So after understanding what you were asking, I was able to accomplish this with the below:
<p id="MP"> Some text to replace My link </p>
<br><br> <input type="button" value="Change" onclick="Change()"/>
<script type="text/javascript">
function Change() { var Markup = document.getElementById('MP').innerHTML; var POS = Markup.indexOf('<a'); Markup = Markup.substring(POS); Markup = 'Some new text ' + Markup; document.getElementById('MP').innerHTML = Markup; }
</script>

Get html after manipulating the html content using Jquery

In my js function, I want to change the attribute of certain elements inside a div, then I need to pass the html content of that div to another function. However, the html I obtained by using html() method is not changed. How can I get the html after the change? The code is shown below:
function copyDiv() {
//set the content of the textarea
$('#text_field').val("test");
//get the content of the textarea, the content is changed
alert($('#text_field').val());
//get the html content and set it to the new div
//However, this html is not changed
$('#newDiv').html( $('#myDiv').html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<label for="text_field">text: </label>
<textarea class="form-control" id="text_field"></textarea>
</div>
<div id='newDiv'>
</div>
<button type="button" onclick="copyDiv();">test</button>
I've modified your code to copy the value of the textarea to the new textarea after the HTML is duplicated, since this value isn't part of the DOM (and won't come along automatically).
I also removed the ID attribute from the textarea, since you can't have multiple elements on one page with the same ID, which your code was resulting in.
function copyDiv() {
$formControl = $('#myDiv .form-control');
//set the content of the textarea
$formControl.val("test");
//get the content of the textarea, the content is changed
alert($formControl.val());
//get the html content and set it to the new div
$('#newDiv').html( $('#myDiv').html());
$('#newDiv .form-control').val( $formControl.val() );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<label for="text_field">text: </label>
<textarea class="form-control" name="text_field"></textarea>
</div>
<div id='newDiv'>
</div>
<button type="button" onclick="copyDiv();">test</button>
Use jQuery.clone() instead of .html().
Replace this
$('#newDiv').html( $('#myDiv').html());
to be this
$('#newDiv').html( $('#myDiv').clone());
You can try the following code,in case you want to set the content inside the text area you should use this code $('#text_field').text("test"); and set the inner text of the text area.
In case you want to change the value attribute you can use this code $('#text_field').attr("value","test");.The rest of the code is the same.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Tring Reset</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<label for="text_field">text: </label>
<textarea class="form-control" id="text_field"></textarea>
</div>
<div id='newDiv'>
</div>
<button type="button" onclick="copyDiv();">test</button>
<script>
function copyDiv() {
//set the content of the textarea
$('#text_field').text("test");
//to set the value attribute of th text area
$('#text_field').attr("value","test");
//get the content of the textarea, the content is changed
alert($('#text_field').text());
//get the html content and set it to the new div
//However, this html is not changed
$('#newDiv').html( $('#myDiv').html());
}
</script>
</body>
</html>

How to change a string within a div that your selector is in with JQuery?

How do you change the name of text within a div that your selector is inside of? In other words, I'd like to click on a button and change the text of the text above the button (within the same div).
For example, in my html, there is a button and a title above it. Once the button is clicked, I'd like the title above it to change to the id of the button.
This problem is similar to this question, but I'm having difficulty changing the text within the div that the selector is in.
Below is my attempt to grab the id of the button, and change the text within the div container.
Javascript (my attempt) (codepen here):
$('.btn.btn-default').on('click', function() {
var desired_name = $(this).attr('id')
$('#title').find($(this)).html(desired_name);
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="title">Temporary Button Title That Should be 'true_name1'</p>
<button class="btn btn-default" id="true_name1">NAME</button>
</div>
<div>
<p id="title">Temporary Button Title That Should be 'true_name1'</p>
<button class="btn btn-default" id="true_name2">NAME</button>
</div>
Have you tried $(this).siblings("p")
This will select the <p> above the button
Have you tried jquery .prev()
https://api.jquery.com/prev/
$('.btn.btn-default').on('click', function() {
var desired_name = $(this).attr('id')
$(this).prev().html(desired_name);
});
You can use the jQuery method siblings() to select the <p> element inside your <div> container.
However I recommend using a class as a unique selector inside your container.
$('.btn.btn-default').on('click', function() {
$(this).siblings(".desired-name").text($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p class="desired-name">Temporary Button Title That Should be 'true_name1'</p>
<button class="btn btn-default" id="true_name1">NAME</button>
</div>
<div>
<p class="desired-name">Temporary Button Title That Should be 'true_name1'</p>
<button class="btn btn-default" id="true_name2">NAME</button>
</div>
Change the ID's to classes for starters. Then target them like this:
$('.btn.btn-default').on('click', function() {
var desired_name = $(this).attr('id');
$(this).prev(".title").text(desired_name);
});

Toggle buttons to show a content and hide the others

Not sure if my title states clearly, sorry about that. Let's say I have 2 buttons, each with jQuery toggle() to show/hide its own content. It works like when I click Button 1, Paragraph 1 shows (I make it hidden on page load.) And so does Button 2 and Paragraph 2.
However, I really want to hide the current paragraph when clicking on the other buttons so that I can show only 1 paragraph at a time. For example, when I click Button 1 , Paragraph 1 shows. Then when click it again, the paragraph hides. But if I click the other button (says, Button 2), I want Paragraph 1 to hide while Paragraph 2 is showing. Is it possible to do so?
Please look at my pen here: Codepen
Thank you.
Try this:
$(document).ready(function(){
$("#p1").hide();
$("#p2").hide();
$("#btn1").click(function(){
$("#p1").toggle();
$("#p2").hide();
});
$("#btn2").click(function(){
$("#p2").toggle();
$("#p1").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<p id="p1">This is a paragraph 1.</p>
<p id="p2">This is a paragraph 2.</p>
Have modified your html and js to be little simpler. Here is how it is..
HTML
<button id="btn1" class="btn" data-toggle="#p1">Button 1</button>
<button id="btn2" class="btn" data-toggle="#p2">Button 2</button>
<p id="p1">This is a paragraph 1.</p>
<p id="p2">This is a paragraph 2.</p>
Add an attribute data-toggle to toggle particular paragraph and add its id as value for this attribute.
Add class to each button so that we can have only one event written for all the button.
JS
$(document).ready(function(){
$("#p1").hide();
$("#p2").hide();
//attaching event to .btn class
$(".btn").click(function(){
var targetElement=$(this).data('toggle'); //get its data-toggle value
$('p').hide();//hide all p tags
$(targetElement).show(); //show only targeted p tag
});
});
UPDATED PEN
If you want something extensible, you can use a data attribute to identify the paginated paragraphs.
$(function() {
var $pages = $("p");
$pages.hide();
$("button").click(function() {
$pages.hide();
$('#' + $(this).data("target")).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-target="p1">Button 1</button>
<button data-target="p2">Button 2</button>
<p id="p1">This is a paragraph 1.</p>
<p id="p2">This is a paragraph 2.</p>
yes it is possible to hide other paragraphs and show specific paragraphs. Change your jquery code to following :
$(document).ready(function(){
$("#p1").hide();
$("#p2").hide();
$("#btn1").click(function(){
$("#p2").hide();
$("#p1").toggle();
});
$("#btn2").click(function(){
$("#p1").hide();
$("#p2").toggle();
});
});
OR
you can even simplify the code by adding attribute to button tag :
HTML :
<button id="btn1" class="btn" data-ref="p1">Button 1</button>
<button id="btn2" class="btn" data-ref="p2">Button 2</button>
<p id="p1">This is a paragraph 1.</p>
<p id="p2">This is a paragraph 2.</p>
jQuery :
$(document).ready(function(){
$("p").hide();
$('button').click(function() {
var id = $(this).attr('data-ref');
$('p').hide();
$('body').find('#'+id).show();
});
});

HREF to DIV value

I have this code:
text
and a DIV which is hidden
<div class="element" id="test"> x </div>
Is there a possibility to href to this id="test" ? I mean, I want to click "text" and open div with id="test"
If you change value to id (value isn't a supported attribute for the div element,) you can show the hidden div by clicking the link:
<div class="element" id="test" style="display:none;"> x </div>
text
You can create anchor links within the document, which cause the browser to scroll to the given element.
You need to use ID's for that:
text
<div id="mydiv"> x </div>
That is, the href of the link needs to point to the ID of the DIV element.
However, if you want the link to show the DIV, do something like this:
text
<div id="mydiv" style="display:none;">This div is hidden by default, but will be visible once the link is clicked ....</div>
<script>
function showDiv()
{
//Code to display the div
}
</script>
text
<div class="element" value="test"> x </div>
Haven't tested but it should work something like this
try this
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(document).ready(function () {
$("a").click(function(){
$("#test").slideDown();
});
});
</script>
</head>
<body>
text
<div id="test" style="display:none">x</div>
</body>
</html>
You can do this using jquery
HTML:
<a href="#test" class="1" > text</a> //ENTER THE ID IN HREF
<div id="test" class="element" value="test"> x </div> // ENTER THE HREF AS DIV ID
Jquery:
$("a").click(function () {
var id_name = this.hash.substr(1); //gets the text after # in href
$("#" + id_name).show(); //it displays the div which has that id
});
P.S: you can use toggle instead of show if you want to hide/show onclick of <a> tag.
$("a").click(function () {
var id_name = this.hash.substr(1);
$("#" + id_name).show();
});
#test {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
text
<div id="test" class="element" value="test">x</div>

Categories

Resources