Question

这就是我想要的。
我创建了一个显示某些部门的页面。使用$（'。getDetails'）。click（），每个部门的雇主将列出他们的一些细节。点击雇主名称时，也会显示雇主的迷你档案。这是我用来列出雇主的代码

$('.getDetails').click(function(e) {
    var department = $('.getDepartment').val();
    var month = $('.month').val();
    $.ajax({
        data: 'dept='+department+'&month='+month,
        type: "POST",
        url: "<?=(site_url('admin/employer/getAttendanceDetails.php'))?>",
        context: document.body
    }).done(function( html ) {
        $('.attendance_display').html( html );
    });
});

页面 getAttendanceDetails.php 我想要一个使用此代码的灯箱

<input type="button" id="show-profile-btn" class="btn btn-primary" value="Show User Profile">
<div id="show-profile" class="">
    <div class="profile-inner">
    Show this div as lightbox
    </div>
</div>

灯箱正在主页面中工作，但它在使用ajax调用的页面中不起作用任何人都可以帮我找到解决这个问题的方法吗？

更新

这是jquery函数

    if( $.fn.dialog ) {
        $("#show-profile-btn").bind("click", function (event) {
            $("#show-profile").dialog("option", {
                modal: false
            }).dialog("open");
            event.preventDefault();
        });
        $("#show-profile-btn").bind("click", function (event) {
            $("#show-profile").dialog("option", {
                modal: true
            }).dialog("open");
            event.preventDefault();
        });
        $("#show-profile-btn").bind("click", function (event) {
            $("#show-profile").dialog("option", {
                modal: true
            }).dialog("open");
            event.preventDefault();
        });
    }

Answer 1

试试这个例子。

这是您的主页：

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <script type="text/javascript">
            $(document).ready(function() {

                $('.getDetails').click(function(e) {
                    var department = $('.getDepartment').val();
                    var month = $('.month').val();
                    $.ajax({
                        data: 'dept='+department+'&month='+month,
                        type: 'POST',
                        url: 'getAttendanceDetails.php',
                        context: document.body,
                        success: function(data) {
                            //alert(data);
                            $('.attendance_display').html( data );
                            $('.attendance_display').dialog( 'open' );
                        } //END success fn
                    }); //END ajax call
                }); //END getDetails.click() fn

            $( ".attendance_display" ).dialog({
                autoOpen: false,
                height: 250,
                width: 350,
                modal: true,
                title: 'The Ax Response:',
                buttons: {
                    'I know': function() {
                        $( this ).dialog( "close" );
                        alert('How nice for you');
                    },
                    'Close now': function() {
                        $( this ).dialog( "close" );
                    }
                }
            }); //END attendance_display dlg init

            }); //END $(document).ready()

        </script>
    </head>
<body>

    Inside the yellow div are two hidden input fields,<br>
    but they could be anything at all, from visible<br>
    input fields to dropdown (select) controls, to<br>
    something else....<br>
    <br>
    <div class="getDetails" style="width:300px; background:yellow;">
        CLICK ANYWHERE IN THIS DIV TO SEE RESPONSE:<br>
        <br>
        <input type="hidden" class="getDepartment" value="Physics">
        <input type="hidden" class="month" value="October">
    </div>

    <div class="attendance_display"></div>

</body>
</html>

这是你的getAttendanceDetails.php AJAX响应者：

<?php

$dept = $_POST['dept'];
$mon = $_POST['month'];

echo 'You were enrolled in the [' .$dept. '] department in the month of [' .$mon. ']';

Answer 2

主页中的代码。

    <script type="text/javascript">
        $(document).ready(function() {
            $('.getDetails').click(function(e) {
                var department = $('.getDepartment').val();
                var month = $('.month').val();
                $.ajax({
                    data: 'dept='+department+'&month='+month,
                    type: 'POST',
                    url: 'getAttendanceDetails.php',
                    context: document.body,
                    success: function(data) {
                        //alert(data);
                        $('.attendance_show').html( data );
                    //    $('.attendance_display').dialog( 'open' );
                    } //END success fn
                }); //END ajax call
            }); //END getDetails.click() fn

        $( ".attendance_display" ).dialog({
            autoOpen: false,
            height: 250,
            width: 350,
            modal: true,
            title: 'The Ax Response:',
            buttons: {
                'I know': function() {
                    $( this ).dialog( "close" );
                    alert('How nice for you');
                },
                'Close now': function() {
                    $( this ).dialog( "close" );
                }
            }
        }); //END attendance_display dlg init

        }); //END $(document).ready()

    </script>
</head>

Inside the yellow div are two hidden input fields,<br>
but they could be anything at all, from visible<br>
input fields to dropdown (select) controls, to<br>
something else....<br>
<br>
<div class="getDetails" style="width:300px; background:yellow;">
    CLICK ANYWHERE IN THIS DIV TO SEE RESPONSE:<br>
    <br>
    <input type="hidden" class="getDepartment" value="Physics">
    <input type="hidden" class="month" value="October">
</div>

<div class="attendance_show"></div>

要调用的页面代码。

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script>
$(document).ready(function() {
    $('.ClickmeNow').click(function(e){
        $('.attendance_display').dialog( 'open' );
    });
            $( ".attendance_display" ).dialog({
                autoOpen: false,
                height: 250,
                width: 350,
                modal: true,
                title: 'The Ax Response:',
                buttons: {
                    'I know': function() {
                        $( this ).dialog( "close" );
                        alert('How nice for you');
                    },
                    'Close now': function() {
                        $( this ).dialog( "close" );
                    }
                }
            }); //END attendance_display dlg init
});

</script>
<style>
.ClickmeNow {
color:#063;
}
</style>
<table> 
<?php for( $i = 1;$i < 5; $i++ ): ?>
    <tr> 
        <td> Name <?=$i?> </td> 
        <td> Detail 1 </td>
        <td> Detail 2 </td>
        <td> Detail 3 </td>
        <td> <a class="ClickmeNow" alt="Page2Load"> View </a></td>
    </tr>
<?php endfor; ?>
</table>
    <div class="attendance_display"></div>

<?php

$dept = $_POST['dept'];
$mon = $_POST['month'];

echo 'You were enrolled in the [' .$dept. '] department in the month of [' .$mon. ']'; 
echo '<input type="button" class="clickMe" value="Dialog Box" />';

如何使用lightbox等jquery函数在使用ajax调用的页面上工作

2 个答案: