CODEWITHSUNDEEP
javascriptjqueryajaxmodal-dialog
Faisal Ashfaq
Faisal Ashfaq

Reputation: 2678

Modal box doesn't seem to work

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

<!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>

Upvotes: 1

Views: 106

Answers (2)

Ziggy
Ziggy

Reputation: 22395

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.

Upvotes: 1

Felix
Felix

Reputation: 38112

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.

Upvotes: 1

Related Questions