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)的结果我想在弹出框中创建一个带有id proddisplay的div来显示数据，但是我无法理解我应该如何在这个内部自动显示弹出框脚本并在其中显示结果

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 和完成dialog加载时 .done 加载php：

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>

此外，您可以减少现有代码并删除那些......如果...创建一个全局对象如下：

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帖子。

ajax调用

4 个答案: