Fatal编程技术网
  • javascript/
  • Javascript 重定向到具有从AJAX检索的ID的操作

Javascript 重定向到具有从AJAX检索的ID的操作

javascript ajax

Javascript 重定向到具有从AJAX检索的ID的操作,javascript,ajax,Javascript,Ajax,目前有一个应用程序使用AJAX和FullCalendar 我希望用户能够单击此日历上的项目，此时会出现一个对话框，其中有一个按钮显示“查看详细信息”。然后，这会将用户带到该特定事件页面 我让对话框正常工作，但对于如何从AJAX调用中获取ID并将其放入Javascript函数以重定向到该操作，我感到非常困惑 我想我知道如何让它进入那个动作，但我不知道如何从AJAX调用中获取ID 这是我的完整日历，有效： <script> $(document).ready(function

目前有一个应用程序使用AJAX和FullCalendar

我希望用户能够单击此日历上的项目，此时会出现一个对话框，其中有一个按钮显示“查看详细信息”。然后，这会将用户带到该特定事件页面

我让对话框正常工作，但对于如何从AJAX调用中获取ID并将其放入Javascript函数以重定向到该操作，我感到非常困惑

我想我知道如何让它进入那个动作，但我不知道如何从AJAX调用中获取ID

这是我的完整日历，有效：

 <script>
    $(document).ready(function () {
        var events = [];

        $.ajax({
            type: "GET",
            url: "/Appointments/GetEvents",
            success: function (data) {
                $.each(data, function (i, v) {
                    events.push({
                        details: v.DetailsOfAppointment,
                        date: moment(v.DateOfAppointment),
                        room: v.RoomType,
                        confirmed: v.Confirmed,
                        colour: v.ThemeColour,
                        church: v.Church.Name,
                        parishAdminName: v.Admins.AdministratorName,
                        parishAdminUser: v.Admins.AdminUsername,
                        parishAdminId: v.Admins.AdministratorId,
                        fee: v.Fee,
                        id: v.AppointmentId

                    });

                })
                 GenerateCalender(events);   
            },
            error: function (error) {
                alert("failed");
                console.log(error);
            }
        })

        function GenerateCalender(events) {
            $('#calendar').fullCalendar({
                contentHeight: 500,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek'
                },
                defaultView: 'agendaWeek',
                timeFormat: 'HH:mm',
                eventLimit: true,
                eventColor: events.ThemeColour,
                events: events,
                aspectRatio: 2.2,
                minTime: "09:00:00",
                maxTime: "17:00:00",
                eventRender: function (event, element) {
                    if (event.fee == null) {
                        if (event.confirmed == false) {
                            element.css('background-color', '#FF0000');
                            element.css('border-color', '#FF0000');
                        }
                        else {
                            element.css('background-color', '#008000');
                            element.css('border-color', '#008000');
                        }
                    }
                    else
                    {
                        element.css('background-color', '#0000FF');
                        element.css('border-color', '#0000FF');

                    }
                },
                eventClick: function (calEvent, jsEvent, view) {
                    $('#myModal #details').text(calEvent.details);
                    var $details = $('<div/>');

                    if (calEvent.fee != null) {
                        $details.append($('<p/>').html('<b>Date of Ceremony : </b>' + calEvent.date.format("DD-MMM-YYYY HH:mm a")));
                    }
                    else {
                        $details.append($('<p/>').html('<b>Date of Appointment : </b>' + calEvent.date.format("DD-MMM-YYYY HH:mm a")));
                    }
                    if (calEvent.end != null) {
                        $details.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
                    }
                    $details.append($('<p/>').html('<b>Details : </b>' + calEvent.details));
                    $details.append($('<p/>').html('<b>Church Name : </b>' + calEvent.church));
                    if (calEvent.fee == null) {
                        if (calEvent.room != null) {
                            $details.append($('<p/>').html('<b>Room : </b>' + calEvent.room));
                        }
                        else {
                            $details.append($('<p/>').html('<b>Room Not Confirmed'));
                        }
                    }
                    $details.append($('<p/>').html('<b>Parish Admin : </b>' + calEvent.parishAdminName));
                    if (calEvent.confirmed == true)
                    {
                        $details.append($('<p/>').html('<b>Status : Confirmed </b>'));
                    }
                    else
                    {
                        $details.append($('<p/>').html('<b>Status : Not Confirmed </b>'));
                    }
                    $('#myModal #pDetails').empty().html($details);

                    $('#myModal').modal();
                },

                eventDrop: function (event) {
                    var data = {
                        AppointmentID: event.id,
                    };
                }

            })
        }

    })

    $('#viewDetails').click(function (id) {
        window.location.href = '/Appointments/Details/' + id;
    }
</script>


$（文档）.ready（函数（）{
var事件=[]；
$.ajax({
键入：“获取”，
url:“/appoints/GetEvents”，
成功：功能（数据）{
$。每个（数据、功能（i、v）{
事件。推({
详情：v.预约详情，
日期：时刻（v.申请日期），
房间：v.RoomType，
证实的，证实的，
颜色：v.ThemeColor，
教堂：v.church.Name，
parishadmin名称：v.Admins.AdministratorName，
parishadmin用户名：v.Admins.AdminUsername，
parishAdminId:v.Admins.AdministratorId，
费用：v.费用，
id:v.任命id
});
})
生成贷方（事件）；
},
错误：函数（错误）{
警报（“失败”）；
console.log（错误）；
}
})
功能生成贷方（事件）{
$（“#日历”）.fullCalendar({
身高：500，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek”
},
defaultView:'agendaWeek'，
时间格式：“HH:mm”，
eventLimit：对，
eventColor:events.ThemeColor，
事件：事件，
方面：2.2，
minTime：“09:00:00”，
maxTime:“17:00:00”，
eventRender:函数（事件，元素）{
如果（event.fee==null）{
如果（event.confirmed==false）{
css（'background-color'，'#FF0000'）；
css（'border-color'，'#FF0000'）；
}
否则{
css（'background-color'，'#008000'）；
css（'border-color'，'#008000'）；
}
}
其他的
{
css（'background-color'，'#0000FF'）；
css（'border-color'，'#0000FF'）；
}
},
eventClick:函数（calEvent、jsEvent、view）{
$（“#myModal#details”）.text（calEvent.details）；
变量$details=$（''）；
如果（calEvent.fee！=null）{
$details.append（$（'
'）.html（'仪式日期：'+calEvent.Date.format（“DD-MMM-YYYY HH:mm a”））；
}
否则{
$details.append（$（'
'）.html（'约会日期：'+calEvent.Date.format（“DD-MMM-YYYY HH:mm a”））；
}
如果（calEvent.end！=null）{
$details.append（$（'
'）.html（'End:'+calEvent.End.format（“DD-MMM-YYYY HH:mm a”））；
}
$details.append（$（'
'）.html（'details:'+calEvent.details））；
$details.append（$（'
'）.html（'Church Name:'+calEvent.Church））；
如果（calEvent.fee==null）{
if（calEvent.room！=null）{
$details.append（$（'
'）.html（'Room:'+calEvent.Room））；
}
否则{
$details.append（$（“
”）.html（‘房间未确认’）；
}
}
$details.append（$（'
'）.html（'Parish Admin:'+calEvent.parishAdminName））；
如果（calEvent.confirm==true）
{
$details.append（$（'
'）.html（'状态：已确认'）；
}
其他的
{
$details.append（$（'
'）.html（'状态：未确认'）；
}
$（'#myModal#pDetails'）.empty（）.html（$details）；
$（'#myModal'）.modal（）；
},
eventDrop:函数（事件）{
风险值数据={
任命id:event.id，
};
}
})
}
})
$（“#查看详细信息”）。单击（函数（id）{
window.location.href='/appoints/Details/'+id；
}
我知道事情很简单，但我真的无法思考

编辑如果有帮助，这是我的按钮

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><span id="eventTitle"></span></h4>
            </div>
            <div class="modal-body">
                <p id="pDetails"></p>
                <button id="viewDetails" class="btn btn-default" style="margin-right:5px;">
                    View Details
                </button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


&时代；


查看详细信息
接近
不必将重定向设置为javascript操作，您可以将#viewDetails链接的HREF指向您想要的页面吗？如果它当前是一个按钮，您可以将其设置为一个类似按钮的链接

例如，在构建并显示模式的脚本末尾，您可以尝试类似于t的方法 
$('#myModal #pDetails').empty().html($details);

$('#viewDetails').attr("href", '/Appointments/Details/' + calEvent.id);

$('#myModal').modal();

<div class="modal-body">
    <p id="pDetails"></p>
    <a href="" id="viewDetails" class="btn btn-default" style="margin-right:5px;">
        View Details
    </a>
</div>