I want to create a list of news on my webpage. When mouse click on the content, there will be a url available. For example apple news
Here are my sample codes, my problem is: when I try to add a variable's value into the href, like href="www.search.com?keyword="+var.keyword, it will display apple news
Actually there are a 50 objects in the variable model, so it will having 50 model.link and model.keywords, please help me to change the sample code which works on w3cshools.com "try it youself". I tried 10 times by really don't know the how to fix it, thanks!
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<!-- should end this tag-->
var model=[{"link":"http://www.google.com?keyword=","keyword":"apple" "content":"This is a news"}]
<!-- miss a ";" at the end of line -->
</script>
<script>
$(document).ready(function(){
$("p").html("Click <a href=model.link+model.keyword>this link</a>");
<!--Finally this works: $("p").html("Click <a href='"+model[0].link+model[0].keyword+"'>this link</a>");-->
});
</script>
</head>
<body>
<p>A content</p>
</body>
</html>
Quote properly:
$("p").html("Click this link");
you missed comma in your model variable::
var model=[
{
"link":"http://www.google.com?keyword=",
"keyword":"apple",
"content":"This is a news"
}
];
And since its array of object , you need to access it like model[0].link to get first object from model array, like:
$(document).ready(function(){
$("p").html("Click <a href='"+model[0].link+model[0].keyword+"'>this link</a>");
});
Put the link correctly
$("p").html("Click <a href='"+model.link+model.keyword+"'>this link</a>");
This is what you need:
var model=[ { link:'http://www.google.com?keyword=', keyword: 'apple', content: 'This is a news'} ];
$.each( model, function( key, value ) {
$('p').append('Click this link');
});
You need to loop through the array of objects and get values. You can use $.each to make this easy since you are using jQuery though you can just as easily do this with vanilla Javascript, I would also get in to the practice of wrapping strings in single quotes in Javascript, that way you can add double quotes in a nice readable syntax to HTML strings you will be adding to the DOM.
Note that I did not use quotes for object keywords too.
See fiddle:
http://jsfiddle.net/r8MQ9/1/
Related
This DOES WORK in other scripts I have written, but not here. Why?
Other scripts I have written have been able to display the entire array,
and were able to display 1-2-3 levels deep.
ie Original[0] / Original[0][0]
Am I missing something VERY simple?
Winning answer HERE:
How can I create a two dimensional array in JavaScript?
Works fine?
<html>
<head>
<script>
Original = [
[1,2,3,4,5,6,7,8,9,0],
[0,9,8,7,6,5,4,3,2,1],
[q,w,e,r,t,y,u,i,o,p],
[a,b,c,d,e,f,g,h,i,j],
];
function TestFunction(){
alert(Original);
}
</script>
</head>
<body>
<button onClick = TestFunction()>Test</button>
</body>
</html>
The problem was that you have a bunch of undeclared variables. In an array, strings must be enclosed in quotation marks.
Original = [
[1,2,3,4,5,6,7,8,9,0],
[0,9,8,7,6,5,4,3,2,1],
['q','w','e','r','t','y','u','i','o','p'],
['a','b','c','d','e','f','g','h','i','j'],
];
Here is an updated fiddle
http://jsfiddle.net/4fmtqou2/
You should quote your "q","w","e" ... characters in the array.
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);
});
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
I have a Java Script that stops working when I try to input two values. This is the script that works:
<HEAD> <script type="text/javascript">
function addsuggest(name)
{
document.getElementById("recipients").innerHTML=document.getElementById("recipients").innerHTML+name+".L ";
}
</script> </HEAD>
<a href=javascript:onClick=addsuggest('3') >click here<a/><br>
<span id=recipients style="color:blue;"> </span>
Nothing fancy. It just adds 3.L in blue color to the end of a line.
I want this function to do some other things so I change function addsuggest(name) to function addsuggest(name, id) and onClick=addsuggest('3') toonClick=addsuggest('3', 'John')
These are the symptoms I have:
It won't work. I tried making it a button. Again it won't work.
When I hover over the link it shows javascript:onClick=addsuggest('3' and not the rest. So it's stopped reading it at the comma.
Rest of the page content goes blue as if it's link but not clickable.
This is the simplest thing I've done with Java Script. It's just inputting values and then printing it. So, what's the matter?
You need quotes surrounding the href attribute (and should place them around all other attributes), otherwise the single quotes around the function parameters will break the link:
<HEAD> <script type="text/javascript">
function addsuggest(name, id)
{
document.getElementById("recipients").innerHTML=document.getElementById("recipients").innerHTML+name+id+".L ";
}
</script> </HEAD>
<a href="javascript:onClick=addsuggest('3', 'John');" >click here<a/><br>
<span id="recipients" style="color:blue;"> </span>
...
and for readability:
function addsuggest(name)
{
document.getElementById("recipients").innerHTML += name + ".L";
}
I know this is simple, but I can't wrap my head around it. Currently the following code returns "[object HTMLDivElement],[object HTMLDivElement]" I'd like it to return "div1,div2". Any thoughts? Thanks guys.
<HTML>
<HEAD>
<script type="text/javascript" src="path_to/prototype.js"></script>
<script>
function linkClick ()
{
alert($$('div.basic'));
}
</script>
</HEAD>
<BODY>
<div id="div1" class="basic" onclick="linkClick();"></div>
<div id="div2" class="basic" onclick="linkClick();"></div>
</BODY>
</HTML>
I had the same problem, there is a simple solution :
If varElement is your object containing a [HTMLDivElement] (or other DOM object) simply add '.id'
e.g.
varElement.id
There's an optimization in prototype specifically for this:
$$('div.basic').pluck('id')
If I read your question right, you want a list of div IDs, rather than a string of ids separated by a comma.
var ids = $$('div.basic').collect(function(el) { return el.id; }); //array of ids
alert(ids.join(','));
collect is another name for map, which is allows you to transform the elements one type of collection into another type by applying a "selector" function to each.
alert($$('div.basic').invoke('identify').join(',');
The invoke will call a function by name. The identify function will provide the id. When called on an array it will return an array of their ids. Join turns them into a string with commas in between.