1

这就是我要的。
我创建了一个页面来显示一些部门。使用 $('.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();
        });
    }
4

2 回答 2

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. ']';
于 2013-05-30T17:34:21.447 回答
0

主页中的代码。 

    <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" />';
于 2013-06-01T05:32:09.770 回答