JQuery : Load a file in modal window

Question

I am getting a file name on image click like this

<a href="#"  class="aclick" >
   <img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>

Now there pops up a modal window here and i have the page link petroliumjelly.php that i want to open in that modal window .

  <script type="text/javascript" language="javascript">
       $(".aclick").click(function (e) {
        e.preventDefault();
        var id = $(this).attr('id');
        var link = $(this).data("data-link");
        console.log(id);
        console.log(link);
        $('#modal_'+id).modal('show');
        $page = $(this).find('img').attr("data-link"); 
        //$('.modal-body')// load page her 
    });

</script>

How can i load that page in modal window please help .

Just over 20 minutes ago you asked a question and you got answers but you did not reply to a single one see here [Jquery : Access data-link attribute](http://stackoverflow.com/questions/44046599/jquery-access-data-link-attribute) First accept answers — Masivuye Cokile, May 18 '17 at 11:58
You don't accept answers but you keep on asking, no one will waste their time on you if you can't take 5 seconds to accept an answer — Masivuye Cokile, May 18 '17 at 11:59
Possible duplicate of [Jquery : Access data-link attribute](http://stackoverflow.com/questions/44046599/jquery-access-data-link-attribute) — Milan Chheda, May 18 '17 at 11:59
kindly review both questions and then let me know if its same . — Sikander, May 18 '17 at 12:00
@Sikander didn't the answer help solve your problem here : http://stackoverflow.com/questions/43187171/how-to-play-pause-video-on-scroll — Masivuye Cokile, May 18 '17 at 12:01
@MasivuyeCokile thats a different question please review it . — Sikander, May 18 '17 at 12:03
I wanna know why was the answer not accepted in that question? — Masivuye Cokile, May 18 '17 at 12:04
load the data like this $('.modal-body').load(petroliumjelly.php ,function(result){ $('#modal_).modal('show'); }); @Sikander — JYoThI, May 18 '17 at 12:04
when you ask a question, try to accept answers as this will help others in the future. — Junius L, May 18 '17 at 12:56
@Sikander check the answer below, if you get errors let me know — Junius L, May 18 '17 at 13:23
@MasivuyeCokile you were right this guy, doesn't accept answers. — Junius L, May 22 '17 at 22:00

Junius L · Answer 1 · 2017-05-18T13:01:34.390

The .aclick doesn't have an id and data-link, they will return undefined, you need to find the image and get those from the image. To get the data-link use ().data('link') not data('data-link'). To load the file in your modal you'll have to use AJAX or the .load() to laod a file.

<script>
    $(".aclick").click(function (e) {
        e.preventDefault();
        $image = $(this).find('img');
        var id = $($image).attr('id');
        var link = $($image).data("link");
        console.log(id);
        console.log(link);
        $('#modal_'+id).modal('show');

        // using AJAX to fetch the file
        $.get(link, function (response) {
            $('.modal-body').html(response);
        })
    });
</script>

Or use modal.load() to load the file.

<script>
    $(".aclick").click(function (e) {
        e.preventDefault();
        $image = $(this).find('img');
        var id = $($image).attr('id');
        var link = $($image).data("link");
        console.log(id);
        console.log(link);

        // load the file
        $('.modal-body').load(link, function () {
            $('#modal_'+id).modal('show');
        })
    });
</script>

JQuery : Load a file in modal window

1 Answers1

Linked