ajax调用后自动显示弹出框

Question

我有一个计时脚本，在这个脚本的最后我希望通过 ajax 运行一个代码，它的结果应该出现在弹出框中。 这是我的代码

var ticker = function() {
  counter--;
  var t = (counter / 60) | 0; // it is round off
  digits.eq(0).text(t);
  t = ((counter % 60) / 10) | 0;
  digits.eq(2).text(t);
  t = (counter % 60) % 10;
  digits.eq(3).text(t);
  if (!counter) {
    clearInterval(timer);
   // alert('Time out !');


        $.ajax({
            type:'post',
             url:'timewalkaway.php',
             dataType: 'json',
            data:{txt:txtbox,hidden:hiddenTxt},
            cache:false,
            success: function(returndataaa){

                console.log(returndataaa)


                if (returndataaa[2] == 'No deal') 
                //$('#proddisplay').text("Sorry! We both tried hard, but could not reach a deal. You can buy on our last offer deal.");
                $('#proddisplay').load('reply1.php');

                if (returndataaa[2] == 'priority_one') 
                //$('#proddisplay').text("You made us an offer we cannot refuse. Click Buy Now We do not offer this price to everyone");
                $('#proddisplay').load('reply2.php');

                if (returndataaa[2] == 'priority_two') 
                //$('#proddisplay').text("This offer is slightly low, we can give this product if you pay us through Cash On delivery!!");  
                $('#proddisplay').load('reply3.php');

                if (returndataaa[2] == 'priority_two1') 
                //$('#proddisplay').text("This offer is slightly low, we can give this product if you pay us through Cash On delivery!!");  
                $(proddisplay).load('reply3.php');


                if (returndataaa[2] == 'priority_three1') 
                //$('#proddisplay').text("Hey! this is a low offer, we can accept this offer if you agree to write a review for this product");
                $('#proddisplay').load('reply4.php');

                if (returndataaa[2] == 'priority_three2') 
                //$('#proddisplay').text("Hey! this is a low offer we can accept this offer if you can share about us on facebook using the link after checkout, we wil give the amt after the checkout.");
                $('#proddisplay').load('reply5.php');

                if (returndataaa[2] == 'priority_four1') 
                //$('#proddisplay').text("A low offer indeed! If you write us a product review and give us cash on delivery we can take this offer");
                $('#proddisplay').load('reply6.php');

                if (returndataaa[2] == 'priority_four2') 
                //$('#proddisplay').text("A low offer indeed! If you share this on facebook and give cash on delivery we can take this offer"); 
                $('#proddisplay').load('reply7.php');

            }

        });

   resetView();
  }
}; 

我检查了控制台我在console.log(returndataaa) 中得到了结果在里面显示结果

Answer 1

您可以将函数传递给load()，该函数在加载完成时被调用。然后你可以显示你的弹出窗口。

$('#proddisplay').load('reply1.php', function( response, status, xhr ) {
  // Create and show your pop-up here.
  console.log(returndataaa);
});

Answer 2

我建议你使用 jquery-ui dialog. 只需添加如下元素：

<div id="dialog" title="Basic dialog">

我建议您在这种情况下使用switch 大小写而不是if 并使用$.when 和.done 在php 加载完成后加载dialog：

var isloadSuccess=true; //Just to display proper load data in dialog
$.when(
$.ajax({
         type:'post',
         url:'timewalkaway.php',
         dataType: 'json',
         data:{txt:txtbox,hidden:hiddenTxt},
         cache:false,
         success: function(returndataaa){
                switch(returndataa[2])
                { 
                     case 'No deal':
                          $('#proddisplay').load('reply1.php');
                          break;
                     case 'priority_one':
                          $('#proddisplay').load('reply2.php');
                           break;
                     case 'priority_two':
                          $('#proddisplay').load('reply3.php');
                          break;
                     case 'priority_two1':
                          $('#proddisplay').load('reply3.php');
                          break;
                     case 'priority_three1':
                          $('#proddisplay').load('reply4.php');
                          break;
                     case 'priority_three2':
                          $('#proddisplay').load('reply5.php');
                          break;
                     case 'priority_four1':
                          $('#proddisplay').load('reply6.php');
                          break;
                     case 'priority_four2':
                          $('#proddisplay').load('reply7.php');
                          break;
                     default:
                          isloadSuccess=false;
                          break;
                 }
          }
})).done(function(){
    $( "#dialog" ).dialog( "open" ); //Keep it open and in case load is unsuccess then display error message
    $(".ui-dialog-content").empty();

    if(isloadSuccess) //check php has been loaded, it will be false only in default case when php hasn't been loaded
          $(".ui-dialog-content").append($('#proddisplay'));//append it to dialog's body
    else
          $(".ui-dialog-content").append("<p>Something went wrong</p>")
});

Answer 3

试试 jQuery ui 对话框：

$(function() {
  $("#proddisplay").dialog({
    autoOpen: false
  });
  alert('Showing popup in next 2 seconds...');
  setTimeout(function() {
    $("#proddisplay").dialog("open");
  }, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="proddisplay" title="Product dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

您还可以减少现有代码并删除那些 if...else。如下制作一个全局对象：

var pages = {
  'No deal' : 'reply1.php',
  'priority_one' : 'reply2.php',
  'priority_two' : 'reply3.php',
  'priority_two1' : 'reply3.php',
  'priority_three1' : 'reply4.php',
  'priority_four1' : 'reply6.php',
  'priority_four2' : 'reply7.php'
};

更新成功块如下：

success: function(returndataaa){
    $('#proddisplay').load(pages[returndataaa[2]]);
    $("#proddisplay").dialog("open");
}

Answer 4

要在弹出窗口中显示结果，首先，将对话窗口初始化为。

$("#proddisplay").dialog({
    autoOpen: false,
    modal: true,
    title: "Details",
    buttons: {
        Close: function () {
            $(this).dialog('close');
        }
    }
});

然后在ajax成功，

success: function(returndataaa){
    $('#proddisplay').load('reply1.php'); // change the page name accordingly
    $("#proddisplay").dialog("open");
}

请参阅this 帖子了解更多详情。