i have the following site, which makes a callback to a different domain.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title> Example Entry Form </title>
<script src="http://code.jquery.com/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
function getParameters(){
// login
//window.showModalDialog('http://localhost:8080/test/login/check.mvc','','dialogWidth:500px; dialogHeight:350px; resizable:no; unandorned:yes; status:no; ');
//get data
$.getJSON('http://localhost:8080/test/secure/profile/services/export/getuser.mvc?callback=?',function(res){
alert('Your name is '+res.lname);
$('#lastname').val(res.lname);
$('#firstname').val(res.fname);
$('#club').val(res.club);
$('#phone').val(res.phone);
$('#mobile').val(res.mobile);
$('#mail').val(res.email);
$('#street_nr').val(res.streetNr);
$('#zip_city').val(res.zip + " " + res.city);
$('#birthday').val(res.birthday);
})
.error(function(){
alert("Error");
})
.complete(function(){
alert("Complete");
});
alert("Script End!");
}
</script>
</head>
<body >
<h1>Entry Form</h1>
<table>
<tr>
<td style="width:400px;">
<form action="save.php" id="FormName">
<table>
<tr>
<td>Lastname:</td>
<td><input type="text" id="lastname"/></td>
</tr><tr>
<td>Firstname:</td>
<td><input type="text" id="firstname"/></td>
</tr><tr>
<td>Club:</td>
<td><input type="text" id="club"/></td>
</tr><tr>
<td>Mobile:</td>
<td><input type="text" id="mobile"/></td>
</tr><tr>
<td>Telephone:</td>
<td><input type="text" id="phone"/></td>
</tr><tr>
<td>eMail:</td>
<td><input type="text" id="mail"/></td>
</tr><tr>
<td>Street+Nr:</td>
<td><input type="text" id="street_nr"/></td>
</tr><tr>
<td>ZIP+City:</td>
<td><input type="text" id="zip_city"/></td>
</tr><tr>
<td>Birthday:</td>
<td><input type="text" id="birthday"/></td>
</tr><tr>
<td> </td>
<td><button type="submit">Send Form</button>
</tr>
</table>
</form>
</td>
<td valign="top">
<a href="" onclick="getParameters();"><img src="script/pic.png" alt="Get Data"/></a>
</td>
</tr>
</table>
</body>
</html>
The stated script works fine, except for two major problems:
- it only works, when there is an alert(); in the script, which is not in the &.getJSON() function.
- after the last alert(); fires (“End of Script!”) the site is reloading (the browser says: http://code.jquery.com/ -> the jquery script) and after being finished. All data are gone.
Why? And how can I fix this?
Try
onclick="return getParameters();"and replacealertwithreturn false;(or was it true?)Or replace
atag withspan. Or remove it altogether and addonclickto theimg.What happens now is that you initiate the async request and go on doing what would normally be done when clicking the link.