Jquery 获取完成后立即打印div_Jquery_Ajax_Html

Jquery 获取完成后立即打印div

jquery ajax html

Jquery 获取完成后立即打印div,jquery,ajax,html,Jquery,Ajax,Html,问题：我所要做的就是使用用户id从数据库中获取用户的信息，然后将这些信息打印到pdf文件或硬拷贝上尝试解决方案：我创建了一个方法PrintData（id），如下面的代码所示，它接受用户id作为参数，然后使用ajax从数据库中获取与它相关的所有信息。然后将所有信息放入一个div。i使用print方法打印该div。不幸的是，PrintElem（）方法打印div以前的内容（而不是我们从与该id相关的服务器获取的当前内容）。我可以通过在div中添加另一个print按钮来实现这一点，但我希望在Print

问题：我所要做的就是使用用户id从数据库中获取用户的信息，然后将这些信息打印到pdf文件或硬拷贝上

尝试解决方案：我创建了一个方法

PrintData（id）

，如下面的代码所示，它接受用户id作为参数，然后使用ajax从数据库中获取与它相关的所有信息。然后将所有信息放入一个div。i使用print方法打印该div。不幸的是，

PrintElem（）

方法打印div以前的内容（而不是我们从与该id相关的服务器获取的当前内容）。我可以通过在div中添加另一个print按钮来实现这一点，但我希望在

PrintData（）

方法将这些信息设置到该div后尽快打印这些信息。下面是我尝试实现的示例代码。如果你有更多的信息，请随时问我

function PrintData(id){
    var Data= "task=showuserdetail&id="+id;
    $.ajax({
        url:"taskprocess.php" ,
        data:Data,
        cache:false,
        dataType:'json',
        type:'POST',
        success: function(output){
            if(output[0] !=0){
                $('#viewDetail').show();     //main Div name
                $('#userID_Retrieve').html(id);
                $('#name').html(output[0]);
                $('#userName').html(output[1])
                $('#accountType').html(output[2]);
                $('#accountGroup').html(output[4]);
                $('#creationDate').html(output[6]);
                $('#streetAddress').html(output[7]);
                $('#state').html(output[8]);
                $('#city').html(output[9]);
                $('#birthDate').html(output[10]);
                $('#phoneNumber').html(output[11]);
            }
        },
        error:function (a, b , c){
            alert(a+" "+" "+c);
        }
    });
    PrintElem('#userDetail');
    return false;
}

其他方法

function PrintElem(elem)
{
    Popup($(elem).html());
}

function Popup(data) 
{
    var mywindow = window.open('', 'my div', 'height=400,width=600');
    mywindow.document.write('<html><head><title>Your details</title>');        
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');
    mywindow.print();
    mywindow.close();
    return true;
}

函数PrintElem（elem）
{
弹出（$（elem.html（））；
}
功能弹出窗口（数据）
{
var mywindow=window.open（“”，'my div'，'height=400，width=600'）；
mywindow.document.write（“您的详细信息”）；
mywindow.document.write（“”）；
mywindow.document.write（数据）；
mywindow.document.write（“”）；
mywindow.print（）；
mywindow.close（）；
返回true；
}

对于您的提问，我可能是错的，因为您的问题不是100%清楚……但是，我相信问题在于您对$.ajax异步调用的误解

我相信你正在寻找以下情况发生

发出web请求

收到响应后，更新div

使用新的div内容调用PrintElem

然而，在您当前的代码中，当无法保证第2步已经完成时，您会执行第3步。这意味着您实际上是在更新PrintElem之前调用它

长话短说-确保您对PrintElem的调用在$.ajax success中，以便它只在更新div后调用PrintElem

$.ajax({
    url:"taskprocess.php" ,
    data:Data,
    cache:false,
    dataType:'json',
    type:'POST',
    success: function(output){
        if(output[0] !=0){
            $('#viewDetail').show();     //main Div name
            $('#userID_Retrieve').html(id);
            $('#name').html(output[0]);
            $('#userName').html(output[1])
            $('#accountType').html(output[2]);
            $('#accountGroup').html(output[4]);
            $('#creationDate').html(output[6]);
            $('#streetAddress').html(output[7]);
            $('#state').html(output[8]);
            $('#city').html(output[9]);
            $('#birthDate').html(output[10]);
            $('#phoneNumber').html(output[11]);

            // now we can call this
            PrintElem('#userDetail');

        }
    },
    error:function (a, b , c){
        alert(a+" "+" "+c);
    }
});

我也试过了，但不幸的是它导致了我的浏览器崩溃：（你能提供这次崩溃的详细信息吗？实际上打印功能打印的是div以前的数据，而不是新更新的数据。当我再次尝试获取新用户的数据时，它打印的是当前数据。崩溃消息如下