[jQuery] Ajax, divs and links
Hello all !
So, I'm doing a site using jquery and what I have is this:
I have 3 main divs. in the last one I have a form that sends the info
to a servlet and this returns some html (links) and put via js in the
second div. Then, when a user clicks in a link on the second div, I
send the id of this link to other servlet and this sends back some
html (links and divs). When a user clicks on a link in the first div,
it should show or hide the correspondent div.
My problem is: the link in the second div doesn't work ... It's like
it's not calling the js. Can anyone help ?
The code is this:
[The Main Page] (of course there is more ... the head and html tags,
etc)
<body onload="moveClock()">
<div id="all">
<div id="header">
<iframe scrolling="no" src="logo.html" width=25% height=15%> </
iframe>
<iframe scrolling="no" src="title.html" width=75% height=15%> </
iframe>
<br />
<iframe scrolling="no" src="subTitle.html" width=100% height=50> </
iframe>
</div>
<div id="content">
<div id="occurrences">
</div>
<div id="occurrenceDescription">
</div>
</div>
<div id="footer">
<table width="100%">
<tr>
<td width="25%" align="center">
<form name="form_clock" style="display: inline; margin: 0;">
<input type="text" name="clock" style="text-align: center;"
disabled="disabled" size="40%">
</form>
</td>
<td width="75%" align="center">
<form name="submitText" style="display: inline; margin: 0;">
<input name="simulationText" value="Texto a ser pesquisado"
onfocus="this.value=''" size="100%">
<input value="Pesquisar" type="button">
</form>
</td>
</tr>
</table>
</div>
</div>
</body>
[/The Main Page]
[The js]
function moveClock() {
actualMoment = new Date()
day = actualMoment.getDate()
//those conditions change the variables to achieve a pattern on the
clock presentation
if (day<10)
day = "0" + day
month = actualMoment.getMonth() + 1
if (month<10)
month = "0" + month
year = actualMoment.getFullYear()
hour = actualMoment.getHours()
if (hour<10)
hour = "0" + hour
minute = actualMoment.getMinutes()
if (minute<10)
minute = "0" + minute
second = actualMoment.getSeconds()
if (second<10)
second = "0" + second
printeableHour = day + " / " + month + " / " + year + ", " +
hour + " : " + minute + " : " + second
document.form_clock.clock.value = printeableHour
setTimeout("moveClock()", 1000)
}
jQuery(function($){
$(document).ready(function(){
$(":button").click( function (event){
var simulationText = ($('input[@name=simulationText]').val());
$.ajax({
type: "post",
url: "./servletSaveOccurrences",
dataType: "html",
data: "simulationText="+simulationText ,
success: function(content){
document.getElementById("occurrences").innerHTML = (content);
// $("#occurrences").html(content);
}
});
});
});
});
jQuery(function($){
$(document).ready(
function (){
$("a").click(function(){
$.ajax({
type: "post",
url: "./servletLoadOccurrences",
dataType: "html",
data: "theOccurrence="+this.id ,
success: function(content){
alert("muito bem !");
}
});
});
});
});
[/The js]
[Div two lookalike links]
<a href=\"javascript:void(0)\" id=\"theID\"> Name Of Link</a><br />
[/Div two lookalike links]
[Div two lookalike links and divs]
<a href=\"#\" id=\"id\" name=\"name\"> Title Link</a><br />
<div class=\"title\" id=\"titleId\" ></div>
[/Div two lookalike links and divs]