Question

我有一个使用bootstrap和jquery的页面。基本上提供了一个会议参加者表，并允许主持人办理登机手续。如果主持人尚未注册（即不在数据库中），主持人也可以添加新的与会者。

我有一个名为Attend的现有工作按钮，它有一个onclick事件，并调用php函数来更新数据库。这有效：

<script>
// This is the function that is called when the Arrive button is clicked
$(function() 
    {
        $('button#attendedButton').on('click', function (e) {
            var idFromRow = $(this).data('id');
            // Change the color of the button
            $(this).css('background-color', '#428bca')
            // Disable the button
            $(this).prop('disabled', true)
            // Change the button text
            $(this).text('Arrived')
            // Change the cell next this button and mark it as Atten
            $(this).closest('td').prev().text('Attended')
            idFromRow = idFromRow + '&action=setAttended'

            // for testing we can alert the variables 
            //alert(idFromRow)
            // Call the php function to update the database

            $.ajax({type: "GET", url:"CheckInFunctions.php", data: idFromRow})
            })
    }
)
</script>

现在我添加了一个模态弹出窗口，询问联系信息，然后点击该按钮就有了这个功能

<script>
// This is the function that is called when the Add button is clicked
$(function() 
    {
        $('button#addAttendeeSubmit').on('click', function (e) {

            fname = document.getElementById ("newAttendeefname").value
            lname = document.getElementById ("newAttendeelname").value
            email = document.getElementById ("newAttendeeemail").value
            note = document.getElementById ("newAttendeeNote").value
            phone = '111-555-1212'
            //phone = document.getElementById ("newAttendeefname").value

            newInfo = 'fname='+fname+'&lname='+lname+'&email='+email+'&phone='+phone+'&note='+note+'&action=addAttendee'
            // for testing we can alert the variables 
            alert(newInfo)
            // console.log('here we are in add submit')
            // Call the php function to update the database
            //$.ajax({type: "GET", url:"CheckInFunctions.php", data: newInfo})
            })
    }
)
</script>

奇怪 - 现在当我加载页面时（甚至在任何弹出窗口出现之前）页面加载挂起 - 如果我注释掉.ajax调用（因为它在提取中）页面加载，我可以得到模态弹出窗口，填写信息并查看警报。

我打破了什么？

Answer 1

答案是我的ajax正在与之交谈的实际服务器间歇性地下降 - 因此结果很奇怪。有时ajax调用会成功，有时它会挂起或失败。

在我的jquery中添加.ajax会导致页面加载挂起

1 个答案: