Jquery Mobile 1.4.5 Popup not working?

问题

I'm trying to use the Popup widget of Jquery Mobile 1.4.5 but I've got some problem when I try to load a external page in a Popup from a sub page. Here's my code:

Index.htm:

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>

    <body>
        <div data-role="page">
            <ul data-role="listview">
                <li><a href="list.php">IMDB</a></li>
                <li><a href="#">Test A</a></li>
                <li><a href="#">Test B</a></li>
            </ul>
        </div><!-- /page -->
    </body>
</html>

list.php:

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>

    <body>
        <div data-role="page">
            <ul data-role="listview">
                <li><a href="#" onClick="loadPopup('imdb.php?imdbnumber=tt0814022');" data-rel="popup" data-position-to="window">Bangkok Dangerous</a>
                <li><a href="#" onClick="loadPopup('imdb.php?imdbnumber=tt1502404');" data-rel="popup" data-position-to="window">Drive Angry</a>
                <li><a href="#" onClick="loadPopup('imdb.php?imdbnumber=tt0448011');" data-rel="popup" data-position-to="window">Knowing</a>
            </ul>
        </div>
    </body>

    <script language="javascript"> 
        function loadPopup(url) {
            $.ajax({
                type: "GET",
                url: url
            }).done(function(data) {
                $.mobile.activePage.append($(data)).trigger("create");
                $("#popup1").popup().popup("open");
            });
        }
    </script>
</html>

imdb.php:

<html>
    <body>
        <div data-role="popup" id="popup1"  style="min-height:300px;width:80%;left:10%;right:10%;" class="ui-content">
            <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Fermer</a>

            <?php
            $imdbnumber = $_GET["imdbnumber"];

            $movie_poster = "http://img.omdbapi.com/?apikey=xxxxxxxx&i=" . $imdbnumber . "&h=300";
            $movie_details = json_decode(file_get_contents("http://www.omdbapi.com/?i=" . $imdbnumber . "&plot=full"));

            echo "<div style='float:left;padding-right:20px;'><img src='" . $movie_poster . "' height=300></img></div>";

            echo "<div><h3><b>" . $movie_details->Title . " (" . $movie_details->Year . ")</b></h3>" . $movie_details->Plot . "</div>";
            ?>      
        </div>

        <script>
            $("[data-role=popup]").enhanceWithin().popup({
                afterclose: function () {
                    $(this).remove();
                }
            }).popup("open");
        </script>
    </body>
</html>

When I load index.htm then click on IMDB link then try to load IMDB info for one of the listed movie, it doesn't work. If I load directly list.php then my Popup is working perfectly.

Something I'm doing wrong?

Thank you!

P.S.: I've tried with Colorbox but I get the same kind of result... :-/

来源：https://stackoverflow.com/questions/28950988/jquery-mobile-1-4-5-popup-not-working

标签

php

jquery-mobile