Question
Ok so I am trying to open abc.html file ( placed in same directory ) in modal box.
This is the code but it doesn't seem to work. Please help
https://stackoverflow.com/questions/22150463
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
$("a#someId").on("click", function(){
$.post("abc.html", function(data){
$("#myModalDiv").html(data).fadeIn();
});
});
});
</script>
</head>
<body>
<a id="someId" href="">This is a link to abc.html</a>
<div id="myModalDiv">
</div>
</body>
</html>
No correct solution
OTHER TIPS
Try to use e.preventDefault() here to prevent default action of your anchor:
$(document).ready(function () {
$("#someId").on("click", function (e) {
e.preventDefault();
$.post("abc.html", function (data) {
$("#myModalDiv").html(data).fadeIn();
});
});
});
Also, because id is unique, you just need to use #someId instead of a#someId.
Here is a fiddle of your working code.
$(document).ready(function(e){
$("a#someId").on("click", function(e) {
e.preventDefault();
$.ajax({
url: '/echo/html/',
type: 'post',
data: {
html: "<p>Hey</p>"
},
success: function(data){
$("#myModalDiv").html(data).fadeIn();
}
});
});
});
As far as I can tell, you've got it mostly right. As you can see, clicking on the link fires an ajax request, which populates your div. The same code is given above in Felix' answer, but you said this doesn't work for you. This leads me to wonder exactly what "doesn't work".
Does the response (data) appear in the div? If so, are you concerned about the "fadeIn" effect? Or the modal box?
z.
