Automatically display popup after ajax call
I have a time counter script and at the end of this script I want to run the code via ajax and its result should appear in a popup. here is my code
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();
}
};
I checked in the console. I am getting the result in console.log(returndataaa)
. I want to make a div with id proddisplay inside a popup to display data, but I cannot figure out how I should automatically display the popup in this script and display the result in it
source to share
I suggest you use Just add an element like the one below: jquery-ui dialog
.
<div id="dialog" title="Basic dialog">
And I suggest you use case switch
instead if
in this script and use and to load when the operation is performed : $.when
.done
dialog
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 body
else
$(".ui-dialog-content").append("<p>Something went wrong</p>")
});
source to share
Try the jQuery ui dialog:
$(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>
Also you could minify your existing code and get rid of those if ... else. Make a global object like this:
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'
};
Update the success block as follows:
success: function(returndataaa){
$('#proddisplay').load(pages[returndataaa[2]]);
$("#proddisplay").dialog("open");
}
source to share
To display the result in a popup, first initialize the dialog as.
$("#proddisplay").dialog({
autoOpen: false,
modal: true,
title: "Details",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
Then on success ajax
success: function(returndataaa){
$('#proddisplay').load('reply1.php'); // change the page name accordingly
$("#proddisplay").dialog("open");
}
See this one for details .
source to share