Using jquery to write information from other parts of the document - javascript

<script type="text/javascript" src="jquery.js"></script>
<script>
var printLinks = function () {
var links = $(.info).code;
document.write(links);
};
</script>
<form>
<input type="button" value="printlinks" onclick="printLinks()"></input>
</input>
</form>
I am trying to write to a document all of the text in a certain element type that is a child of an element I query by class $(.info). I know document.write is not the best method for writing to a document. info is the class of the parent element of the <code> tags that contain the links I want to print. I am very new to jQuery so I am probably misusing it. Any help would be appreciated.

Okay, if I understand correctly, you want to grab the content in the element with the class info. If that is correct you want to take the following approach:
<script type="text/javascript">
function printLinks() {
var content = $('.info').html(); // Grab innerHTML of element
$('#idOfTargetElement').html( content ); // write the content here
}
</script>
EDIT:
See this fiddle for clarification:
http://jsfiddle.net/XD5qj/

You can use the html() function of jQuery.
For example:
<script>
$(function(){
var links = $('.info code').html();
$('.output').html(links);
});
</script>
<div class="info"><code>Example code</code></div>
<div class="output"></div>
If you have multiple "< code>" tags, you want to use the handy "each()" function of jQuery:
$('.info code').each(function(){
$('.output').append($(this).html());
});

Related

Changing Text of HTML Button Using Outside JS Variable

In my main HTML file, I create a variable using this script:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
//Creation of answerjson not shown
var choiceOne = answerjson[0].choice;
});
Later in my HTML, I create a button within a div using this code:
<div id= "one"><button class="button" id = "b1"></button></div>
How can I display the value of choiceOne as the label on button b1? I've searched online, but only found answers to this problem when the button is not in a div.
var choiceOne = "Some Text";
// jQuery
$("#b1").text(choiceOne);
// Regular JavaScript
document.getElementById("b2").innerHTML = choiceOne;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one"><button class="button" id="b1"></button></div>
<div id="two"><button class="button" id="b2"></button></div>
Like this:
$('#b1').html(choiceOne);
but you need to do this in
$(document).ready(function() { });
so you are sure all of the DOM is ready and loaded ... not sooner
Access the button from inside your javascript and change the text on it using the following command:
document.getElementById("b1").innerHTML = choiceOne;
This is in regular JS. You can also use JQuery to select the container.

Newbie to jQuery and get function

I am completely new to jQuery. I can't find any good documentation on the get function and was wondering if I could get some help.
I have an HTML page called me.html with just a single div called me. I want to use the following page to get the contents within the div. Even a google in the right direction would help. Thanks so much
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<body>
<form id="form" runat="server">
<div>
<div id="me">
</div>
</div>
</form>
</body>
</html>
you don't need to use get(). This simple script should do it
<script>
var contentsOfMe = $('#me').html();
</script>
get is used for loading data from an url. You seem to be wanting to get the contents of a div
as in $("#me").text()
What about using the great documentation provided at http://api.jquery.com/jQuery.get/
EDIT. If you want to just get the text, use var myText=$('#me').html();, and if the html, use var myHtml=$('#me').html();
You will find the documentation for the function get here : http://api.jquery.com/jQuery.get/
But get is to perform an ajax request get on your server so I don't think that's what you need.
In jquery, most of the time you will "select" an element using jquery selector : $("#id")
This will select $(), this will say you are selecting an element using his id $("#name_of_the_id").
Then, you will have an object which will represent the selected element.
If you want to get all the html inside this element do :
function getHtmlFromElementId(id)
{
var element = $("#" + id);
var html = element.html();
return html;
}
Printing the return of this function will print all html code inside the element selected.
If you are seaching for a good tutorial on jquery, the w3schools' one is really good:
http://www.w3schools.com/jquery/jquery_examples.asp

How do I get HTML button value to pass as a parameter to my javascript?

I have multiple buttons corresponding to multiple text areas to clear. I need to send to have a function to handle all of these buttons and handle each seperately
<html>
<head>
<script src="jquery-1.6.js"></script>
<script type="text/javascript">
function getUniqueButtonValue(value)
{
alert(value);
$("value").hide();
}
</script>
</head>
<body>
<button id=someUinqueId value=something>Clear Selection</button>
</body>
</html>
Setting aside the fact that you're placing a unique id in the value attribute rather than the id attribute... here's a fiddle.
$(document).ready(function(){
$("button").click(function(){
var me = $(this);
// do whatever with me
alert(me.val());
me.hide();
});
});
There seem to be numerous problems with the code you've posted in your question. Firstly, (unless you're using <!DOCTYPE html> as your doctype) you can't have id values starting with a number.
Secondly, the jQuery (I'm assuming it's jQuery and not some other JS library) in your getUniqueButtonValue function is not going to work, because the selector is going to look for a value element, which is unlikely to exist.
I'm assuming that the value attribute of your button is meant to correspond to the id of another element, which you want to hide when the button is clicked.
As you have what appears to be jQuery code in your example, I will give you a jQuery solution to this, as it's far simpler:
$(document).ready(function() {
$("button").click(function() {
alert(this.value);
$("#" + this.value).hide();
});
});
Also, you don't close your body tag, but I'm guessing that's just a mistake in copying and pasting the code into the question.
You can do this:
<button id=123 value=uniqueId545 onclick="javascript:getUniqueButtonValue($(this).val());">Clear Selection</button>
try this
$("#123").click(function(){
getUniqueButtonValue($(this).val());
});
I'm not sure what you are trying to do here. If i guess correctly this is what you want (ids shouldn't begin with a number so I put an 'a' before the 123:
$("#a123").click(function(){
getUniqueButtonValue($("#a123").getAttribute('value');
}
function getUniqueButtonValue(value)
{
alert(value);
$("#"+value).hide();
}
</script>
</head>
<body>
<button id=123 value=uniqueId545>Clear Selection</button>
</html>
You can save yourself a lot of work by trying:
<button class="clearbutton" value="#Foo">Clear Foo</button>
<input type="text" name="foo" id="foo" />
With the following JavaScript:
$('.clearbutton').click(function(e) {
$($(this).val()).val('');
});

How to delete dom element from jquery object

i want to delete a particular class from my object as my requirement is to delete that dom data before displaying content. I have written a sample code but not able to get why that is not working. I jquery's remove is also not working. Please help me to get it solve. Thanks in advance
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// complete html
var test;
test = $('#issue_detail_first_row').html();
var x = $(test).find('#issue_detail_nav').not('.p1');
$('#sett').html(x);
});
</script>
</head>
<body>
<div id="issueDetailContainer">
<div id="issue_detail_first_row">
<div>
<div id="issue_detail_nav">
<div>test</div>
<div id="gett">
<div class="p1">
this content need to be deleted 1
</div>
</div>
<div class="p1">
this content need to be deleted 2
</div>
</div>
</div>
</div>
<br/><br/><br/><br/>
<div id="sett">
</div>
You need to remove the content from the DOM directly.
$("#issue_detail_first_row .p1").remove();
That will select the .p1 elements and remove them from the DOM
you can use remove function on javascript object.
If you want to preprocess it before displaying.
example
var a =$("#issue_detail_first_row").html();
var jhtml =$(a)[0];
$(jhtml).find('.p1').remove();
alert($(jhtml).html());
now use jhtml .
demo
http://jsfiddle.net/WXPab/14/
It seems that you're trying to duplicate a section, but without the .p1 elements.
You could use the clone()[docs] method to clone the section, the remove()[docs] method to remove what you don't want, and then insert its HTML.
$(document).ready(function() {
var test = $('#issue_detail_first_row').clone(); // clone it
test.find('.p1').remove(); // find and remove the class p1 elements
$('#sett').html( test.html() ); // insert the new content
});
Working example: http://jsfiddle.net/YDZ9U/1/
Only thing is that you'll need to go through and update the IDs in the clone, so that they're not duplicated on the page.

Why doesn't this work?

I want to change the value of an element with javascript.
<span id="mixui_title">Angry cow sound?</span>
<script type="text/javascript">
$("#mixui_title").val("very happy cow");
</script>
Use the text method instead:
$("#mixui_title").text("very happy cow");
Try html() function instead :
<span id="mixui_title">Angry cow sound?</span>
<script type="text/javascript">
$("#mixui_title").html("very happy cow");
</script>
2 Things:
1- Usualy, javascript is placed at the top of the page. If you do this in the future, you'll need to need to enclose it in the jQuery equivalent of document.ready:
$(function() {
// do stuff
});
This tells jQuery to run the function as soon as the document is ready.
2- For any value between two opening/closing tags, you need to use the jQuery method .html("enter text to change") while the .val() method is used to change the value of any control with the attribute value="" like inputs:
<input type="submit value="This will be changed with val()" />
The following should work fine. Note its wrapped in $(function() { }); and is using the .html() property and is placed at the top of the page.
<script type="text/javascript">
$(function(){
$("#mixui_title").html("very happy cow");
});
</script>
<span id="mixui_title">Angry cow sound?</span>
It's not enclosed by the
$(document).ready(function(){
//your code goes here
});

Categories