Hi,
I'm kind of new to AJAX, but heard this might be the way to go for what I wanna do.
I wan't to create a link, and when a user presses the link it's creating another text box underneath with some text in.
so ofcourse there'll be multiple link and everytime they press on a ling a text should appear in that box according to what link they press.
is there any good tutorial on that?
or does anyone know how to do it?
I hope you understand what I meen?
Thank you
If I understand correctly you are basically wanting the link to "show" a text box with some text in it.
You could set up your page with the links and text boxes in place and put your text boxes to display none:
<input type="text" id="myTextBox" value="my textbox text" style="display: none;">Then, use javascript to "show" the "hidden" text box when user clicks the link:
<a href="#showLink" onclick="document.getElementById('myTextBox').style.display = block;return false;>My Link</a>Together:
<a href="#" onclick="document.getElementById('foo').style.display = 'block';return false;">foo bar</a>
<input type="text" id="foo" style="display: none;" value="bar">Hi Thx,
I'm trying your example, but it's not showing a link to start with.
it's just showing a blank page, do you know if I should do anything else?
This is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script type="text/javascript">
<a href="#" onclick="document.getElementById('foo').style.display = 'block';return false;">foo bar</a>
<input type="text" id="foo" style="display: none;" value="bar">
</script>
</body>
</html>remove line 13 and 17.
No need for the code I suggested to be placed inside of the script tags.
thank's that works,
Although, how do I display just plain text instead of an input field?
sorry for the probably rather dumb question ;)
but thank's
Change the input to a div:
<a href="#" onclick="document.getElementById('foo').style.display = 'block';return false;">foo bar</a>
<div id="foo" style="display: none;">bar</div>OK great, that works, thank's
If I create another link and do the same, and clic on the second link the first one stays displayed, is there a way to hide the first link text if I press the second link.
just hide the id"foo" if foo2 is pressed for example?
Thank's
Any chance you could figure out how to implement jquery?
Basically, you download a javascript file and reference/include that file in your html file.
This will open up a whole lot of possibilities with ease for you.
hmm, well, I haven't really used jquery before, but I can try.
What file do I download?
and I guess that is the file with the jquery that I need to implement right?
have I understood it correctly? ;)
Thx
Open this (http://code.jquery.com/jquery-1.5.min.js) in your browser and copy the contents into a file (jquery_1.5.js) on your website.
Another way to say that is: create a file on your website, called jquery_1.5.js and then copy the contents of this page into that file: http://code.jquery.com/jquery-1.5.min.js
I would put your jquery_1.5.js file into an include or js folder.
Then, in between the <head> and </head> tag of your webpage, include this line:
<script src="/include/jquery_1.5.js" type="text/javascript"></script>
Once this is done, give me the website and I'll check it out to see if it is ok.
Ok, so now I think i've tried that, but it still looks the same, this is the link:
http://www.globeaid.dk/wp-content/themes/default/foo.htm
the code in the html file now looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="/jquery/jquery_1.5.js" type="text/javascript"></script>
</head>
<body>
<a href="#" onclick="document.getElementById('foo').style.display = 'block';return false;">foo bar</a>
<div id="foo" style="display: none;">bar</div>
<br><br>
<a href="#" onclick="document.getElementById('foo2').style.display = 'block';return false;">foo bar2</a>
<div id="foo2" style="display: none;">nummer 2"</div>
</body>
</html>And there's a whole lot of code in the jquery_1.5.js file.
But do you know what could be wrong?
Adding that will not change anything at this point. Just get us ready to change it. Taking it a step at a time.
So, you have the <script> tag with src="/jquery/jquery_1.5.js" but apparently on your website you do not have a "jquery" folder in the root directory. This is why we go one step at a time. Nothing wrong with that, just works better.
So, move the /jquery/jquery_1.5.js to your root or change the src to "/wp-content/themes/default/jquery/jquery_1.5.js"
I'd recommend moving the folder to the root if possible.
After you get that squared away add a class to each div: class="displayDiv"
so, a link would look like this now:
<div id="foo2" class="displayDiv" style="display: none;">nummer 2"</div>Each div will get the same class. Do not create a different name for each class.
Ok great :)
One step at a time is good ;)
I've chosen to just change the src to "/wp-content/themes/default/jquery/jquery_1.5.js"
because the whole site is done around a wordpress theme and this is where the files that we have created is located, all the root files are made by wordpress, so I don't wanna mess that up :)
What's the next step?
Thx
ok the div class is done:
<div id="foo2" class="displayDiv" style="display: none;">nummer 2"</div>Great! Now we can have some fun. Jquery is fantastic!!
before the </head> tag add this (notice it is the closing head tag, not the opening):
<script type="text/javascript">
$(document).ready(function() {
$(".displayLink").click(function() {
$(".displayDiv").css("display","none");
})
})
</script>Then, add the class="displayLink" to each of your links:
<a href="#" class="displayLink" onclick="document.getElementById('foo2').style.display = 'block';return false;">foo bar2</a>oh, and there is more to go, but maybe you'll start seeing it now and be able to give it a go on your own. I'll be back tomorrow to see how it's going.
Ok, i'm also going to bed now, so i'll also be bac tomorrow, but thank's for your help today, I hope we can get it to work.
but tal to you again tomorrow :)
You have done well at getting that all implemented! I hope you can understand a little of what is going on in the code. I've put a "finalized" page together for you and will include it below. Hopefully you can tell what is going on so you can modify it for your specific needs. However, note that I took out document.ready function. You may want to leave that (at least it's shell) in your page. Basically plain script in there (raw javascript or jquery that is not in it's own function) will run, but will run AFTER the page has finished loading. For your current scenario you do not need it, but you may quickly extend into that.
Of course, this code below is more generic (hopefully to help others down the road more). You'll need to modify it to fit what we have done on your page already (for example, how you call the jquery file), or just take what you need below and paste into what you already have.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function showThis(divID) {
$(".displayDiv").css("display","none");
$(divID).css("display","block");
}
</script>
</head>
<body>
<a href="#" class="displayLink" onclick="showThis('#foo');return false;">foo bar</a>
<div id="foo" class="displayDiv" style="display: none;">bar</div>
<br><br>
<a href="#" class="displayLink" onclick="showThis('#foo2');return false;">foo bar2</a>
<div id="foo2" class="displayDiv" style="display: none;">nummer 2"</div>
</body>
</html>Basically, what is happening is when the link is clicked, we call the showThis function and pass the id of the div that has what we want to display. The function then hides everything that has the displayDiv class, then shows the div with the id passed to it.
Ok than's alot, that works,
Later I'll try to implement it on the page I want, and play around with it abit, to see if I can figure out what it's all about :) but thank's alot :)
Use the following in a javascript function.
document.getElementById('id-of-div').innerHTML = 'Code for new text box here';
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.