Newbie to jQuery and get function - javascript

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

Related

How to create dynamic div and add data into it from different elements in other xhtml?

In below code I want to add the div dynamically under div tag with id="includedContent". And also load data using number of ids.So instead of having a hardcoded Id(123) to load method i want to make it accept Array of ids and displqay the data in the dynamically created tag???
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function vikas(){
var i=0;
$(function(){
$("#includedContent").load("b.xhtml #123");
});
}
</script>
</head>
<body>
<button type="button" style="width:80px; height:40px;" onclick="vikas()">Click</button>
<div id="includedContent" >vikas<img click="vikas()" src="www.google.com" alt=""></img><br/></div>
</body>
This looks like a perfect case for using a templating engine like MustacheJS http://mustache.github.io/
It allows you to create a template into a variable and then "throw" a JSON-Object onto a new instance of an mustacheJS and it will replace some placeholders you are defining in the template (they'll look like this:{{variable}}). You can find easy follow examples on their website.
I hope i could help.

How to find active tag formats using jQuery?

I have a situation with sample code as follows:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<p>
<h1>The header</h1>
<div>
matter ia always matter matter ia <strong>bold matter</strong> matter matter <em>italics matter</em>matter ia <em><strong>bold italics matter</strong></em>lways matter
</div>
</p>
</body>
</html>
I am just trying to retrieve the specific tags like body->p->div->em->strong when I click on "bold italics matter" using jQuery. Is there any standard method to retrieve as per the click event?
If you wan to get the tag name of the element which is clicked, then you can use:
$('*').click(function(e) {
e.stopPropagation();
console.log($(this).prop('tagName'));
});
Fiddle Demo
I'm not completely sure about what you are trying to accomplish. If you are trying to retrieve the tag itself that the text is contained in, i would recommend that you put a <span> tag in around the the text in question and do an onclick="function()" or simply put the onclick right on the <strong> tag.
As far the the JQuery/Javascript goes, if you want to retrieve the content, it looks like
var foo = document.getElementById.innerHTMl("id");
However, this requires you to have an id in your tags which is probably the best, if not
'standard' method of retrieving the content that is within the tag.
After reading your comments, i am editing this post:
The best way to get the parent elements is to use the JQUery .parent() function. I'd imagine that you would just recursively state something like this:
var foo = $("nameofelement").parent();
I hope this is more of what your looking for.
Thanks for contributing everybody. At last I made it myself with the following code.
$(document.body).click(function(e){
var Tags=[], Target=e.target, stat_msg="";
Tags.push(Target.tagName);
while($(Target).parent().get(0).tagName!=="BODY")
{
Tags.push($(Target).parent().get(0).tagName);
Target=$(Target).parent();
}
Tags.push("BODY");
for(i=Tags.length;i>0;i--)
stat_msg=stat_msg+Tags[i-1]+" ";
alert(stat_msg);
});

How to .append text to a div using jQuery?

I'm trying to append a piece of text to a div using jQuery. I try to do this using the following code:
<html><head></head><body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sendButton").click(function(){
$("#conversation").append("<P>This is a message");
});
});
</script>
<div class="conversation"><p>some message</div>
<form><input type="button" id="sendButton" value="Send Message"></form>
</body></html>
Seeing the multitude of tutorials on the subject it seems to be such a simple thing to do, but I can't seem to figure out what I'm doing wrong here. Any help would be greatly appreciated.
You need to use class selector, As #conversation referes to element with id conversation
$(".conversation").append("<P>aergerag");
Fiddle DEMO
EDIT
You should look at this To Close or Not To Close Tags in HTML5 and a good question Closing tags in HTML5
replace # with . in your selector (conversation is a CLASS)
$(".conversation").append("<P>aergerag");
I am not any good at jQuery but from one of my projects I had to simply target the div with html as:
var someData = "This is a message";
$("#conversation").html(someData);
If some contents exists before this, then you can retrieve them, concatenate, and write it back into the target div.

Using jquery to write information from other parts of the document

<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());
});

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('');
});

Categories