Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

asked on

How can I position this JQuery POST in the middle of a JQuery LOOP?

I want to position an AJAX post in the context of a loop. The challenge is grabbing a value that's coming from the previous POST.

How could I pull that off?

Here's what I've got so far:

First off, on the main page, the user clicks on a button and that "gets" the hello.php page:

$(document).ready(function() {
	
	$('.print_forms').click(function() {
		var empID = $(this).data('empid');
		var hID=$(this).data('hid');
		var itemSel=$(this).data('item_sel');
		var cpID=$(this).data('cpid');
		var orderID=$(this).data('orderid');
		var quantity=$(this).data('quantity');
		var primeID=$(this).data('prime_id');
		var laps=$(this).data('laps');
		//alert(empID);
		$.get('hello.php?empID='+empID+'&hID='+hID+'&item_sel='+itemSel+'&cpID='+cpID+'&orderID='+orderID+'&quantity='+quantity+'&primeID='+primeID+'&laps='+laps,
		function(data) {
			$('.centered').show();	
			$('.centered').html(data);
		});
	});
		
});

Open in new window


The "hello.php" page has some minimal HTML that displays a loading graphic. At the bottom of that page is where I'm running into the challenge...

var laps=<?php echo $laps-1;?>;
		for(i=1;  i<=laps; i++)
		{
			setTimeout(function() {
				var out = {
				'empID': <?php echo $empID;?>,
				'hID' : <?php echo $hID;?>,
				'cpID' : <?php echo $cpID;?>,
				'orderID': <?php echo $orderID;?>, 
				'quantity':<?php echo $quantity;?>,
				'PrimeID': <?php echo $bob;?>, 
				'laps':<?php echo $laps-2;?>
				};
				$.post("hello_again.php?PrimeID=", out, function(data) {
					console.log(PrimeID);
					$('#gear_text').html(data);
				});
			},2000);

Open in new window


Can you smell what I'm cooking?

The idea is that I've got a known number of "laps" that I have to complete. Each lap goes out and "GETS" the next round of records based on the previous PrimeID.

THAT's my struggle!

How do I get the most recent PrimeID - the value that's arriving in the context of the "data" returning from my POST?

Any ideas?
ASKER CERTIFIED SOLUTION
Avatar of ste5an
ste5an
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Could you create an array or object to collect the data (inside for loop) and then send this via post method?ie
//for loop starts here{
var sampleData=[1,2,3,4,5];
//for loop starts here}


$.post('/path/to/your/url/here',{'YOUR_INPUT_ARRAY_NAME_HERE': sampleData}.function(response){
        console.log(response);
});

Open in new window

Maybe you should call it synchronous, e.g.:

setTimeout(function() {
    var laps=<?php echo $laps-1;?>;
    var out = {
        'empID': <?php echo $empID;?>,
        'hID' : <?php echo $hID;?>,
        'cpID' : <?php echo $cpID;?>,
        'orderID': <?php echo $orderID;?>,
        'quantity':<?php echo $quantity;?>,
        'PrimeID': <?php echo $bob;?>,
        'laps':<?php echo $laps-2;?>
    };
    for(i=1;  i<=laps; i++)
    {
        $.ajax({
            type: 'POST',
            url: "hello_again.php?PrimeID=",
            data: out,
            success: function(data) {
                console.log(PrimeID);
                $('#gear_text').html(data);
            },
            async:false
        });
    }
}, 2000);

Open in new window

Avatar of Bruce Gust

ASKER

This whole thing is an attempt to remedy a situation where several hundred PDFs are being generated and, I've found that by breaking things down into chunks of 50, there's no problem.

So...

What I've done in the past is initiate the query and then route the process to a page whose sole function is to just give the system a rest. I've got some JQuery on that "dummy page" that captures the last id of the last row that was returned. I then route the process back to the page where the query is only now, I'm starting 50 rows into the process.

I'm trying to make it a little more elegant by bring up a hidden div - much like a "loading graphic" and instead of routing the process user to a different page, everything happens right there within the window. The only thing is, now I don't have that dummy page that has the new id.

Any ideas?
This whole thing is an attempt to remedy a situation where several hundred PDFs are being generated and, I've found that by breaking things down into chunks of 50, there's no problem.
You  need to explain that further.. where and how are they created exactly?
Folks, first of all, thank you so much for weighing in! I'm sorry to be dragging my feet in getting back with you. I was tasked with taking care of another problem today and I'm still putting out that fire, but...

Let me know see if I can't elaborate further on what I'm wanting to do and include some screenshots so y'all have a more comprehensive snapshot of what I'm trying to get done.

First, here's a screenshot of the page that the user interacts with. The part that I've got highlighted is an example of what the user is going to click on to "print" what, in this case, is a bunch of surveys. In this example, there are only 52. But there are times when it will number in the thousands and that's where the solution I'm working on comes to bear. Once you get into several hundred reports that need to be generated, the system has a habit of timing out and throwing an error.

User generated image
When you click on that print icon, you put in motion a function which triggers this SELECT:

$stmt = $this->cn->prepare('SELECT rhID FROM Orders_hraResponseHeaders WHERE orderID = ?');

Here's where it gets potentially problematic. You could have, potentially, several hundred "rhIDs" and for every one of them you're generating a PDF which is several pages. I want to change that SELECT to this:

$stmt = $this->cn->prepare('SELECT Top 50 PrimeID, rhID FROM Orders_hraResponseHeaders WHERE orderID = ? AND PrimeID>? ORDER BY PrimeID');

You smell what I'm cooking? Instead of passing in a mere OrderID, I want to pass PrimeID as another parameter and in that way execute the production of PDFs in chunks.

So, let's say the OrderID is 156 and there are 720 rhIDs associated with that OrderID. The first round would look like this:

SELECT Top 50 PrimeID, rhID FROM Orders_hraResponseHeaders WHERE orderID = 156 AND PrimeID>0

After completing that round of production, let's say the last PrimeID was 4895. So, the second chunk would be:

SELECT Top 50 PrimeID, rhID FROM Orders_hraResponseHeaders WHERE orderID = 156 AND PrimeID>4895

And on and on it would go until there are no more rows that match the SELECT criteria and the work is done.

I've put a little dummy page together to construct my "vision" and here's the way it looks right now...

User generated image
When you click on the "here" link, you're triggering this JQuery:

<script>
$(document).ready(function() {
	
	$('.print_forms').click(function() {
		var empID = $(this).data('empid');
		var hID=$(this).data('hid');
		var itemSel=$(this).data('item_sel');
		var cpID=$(this).data('cpid');
		var orderID=$(this).data('orderid');
		var quantity=$(this).data('quantity');
		var primeID=$(this).data('prime_id');
		var laps=$(this).data('laps');
		//alert(empID);
		$.get('hello.php?empID='+empID+'&hID='+hID+'&item_sel='+itemSel+'&cpID='+cpID+'&orderID='+orderID+'&quantity='+quantity+'&primeID='+primeID+'&laps='+laps,
		function(data) {
			$('.centered').show();	
			$('.centered').html(data);
		});
	});
		
});
</script>

Open in new window


When you do that, you get this little window:

User generated image
That window is the "data" coming from the "hello.php" which looks like this:

<?php
	require_once(WEBROOT.'lib/functions.php');
	require_once(WEBROOT.'xajax/xajax_core/xajax.inc.php');
	require_once(WEBROOT.'lib/class/session.class.php');
	require_once(WEBROOT.'lib/class/app.class.php');
	require_once(WEBROOT.'lib/class/hdap.class.php');
	require_once(WEBROOT.'lib/class/channel.class.php');
    require_once(WEBROOT.'lib/class/admin.class.php');
	require_once('pap.class_print.php');

	// init vars and settings
	$A = new Application($CN);
	$P = new PrintProduction($CN);
    $H = new HelpDesk($CN);
    $C = new Channel($CN);
    $M = new Admin($CN);

	$xajax = new xajax();
    $xajax->configure("javascript URI", 'xajax/');
    $xajax->register(XAJAX_CALLABLE_OBJECT, $A);
    $xajax->register(XAJAX_CALLABLE_OBJECT, $P);
    $xajax->register(XAJAX_CALLABLE_OBJECT, $H);
    $xajax->register(XAJAX_CALLABLE_OBJECT, $C);
    $xajax->register(XAJAX_CALLABLE_OBJECT, $M);
	
?>
<style>
table.print_display tr, td {
	border:1px solid #ccc; 
	border-collapse:separate;
	margin:auto;
}

.embossed {
	width:285px; 
	height:135px; 
	margin:auto; 
	box-shadow:3px 3px 1px #ccc inset; 
	border:1px solid #ccc; 
	border-radius:10pt; 
	margin-top:10px; 
	padding:10px;
}

.gears {
	width:90%;
	margin:auto;
	height:90%;
	margin-top:7px;
	font-family:arial;
	display:none;
}

.gears table tr td {
	border:none;
}

</style>

<div class="embossed">
	<div class="gears">
	<br>
		<table>
			<tr>
				<td><img src="loading_gears.gif"></td>
				<td style="font-size:9pt;" id="gear_text">Do not close this window. The system is currently creating your PDFs!
				<br><br>Stand by!
				</td>
			</tr>
		</table>
	</div>
<?php 

	$empID=$_GET['empID'];
	$hID=$_GET['hID'];
	$item_sel=$_GET['item_sel'];
	$cpID=$_GET['cpID'];
	$orderID=$_GET['orderID'];
	$quantity=$_GET['quantity'];
	$PrimeID=$_GET['primeID'];
	$laps=$_GET['laps'];

	$attempt=new PrintProduction($CN);
	
	//usuallly $cpID is NULL by default. It's set to 0 in the context of the JQuery syntax to avoid it throwing an error. For the sake of the "init_genPSM" method, if it's 0, just leave that parameter blank
	if($cpID==0)
	{
		$bob=$attempt->init_genPSM($empID, $hID, $item_sel, '', $orderID, $quantity, $PrimeID, $laps);
	}
	else
	{
		$bob=$attempt->init_genPSM($empID, $hID, $item_sel, $cpID, $orderID, $quantity, $PrimeID, $laps);
	}
	
	
	if($bob>0)
	{
	?>
	<script>
		$('.gears').show();
		//the first time you hit this page, you're displaying what was triggered by the "print.php" page. That's the first "round" of PDFs. You need to grab a variable that defines whether or not you loop through the next round of code
		var laps=<?php echo $laps-1;?>;
		for(i=1;  i<=laps; i++)
		{
			setTimeout(function() {
				var out = {
				'empID': <?php echo $empID;?>,
				'hID' : <?php echo $hID;?>,
				'cpID' : <?php echo $cpID;?>,
				'orderID': <?php echo $orderID;?>, 
				'quantity':<?php echo $quantity;?>,
				'PrimeID': <?php echo $bob;?>, 
				'laps':<?php echo $laps-2;?>
				};
				$.post("hello_again.php?PrimeID=", out, function(data) {
					console.log(PrimeID);
					$('#gear_text').html(data);
				});
			},2000);
		}
		
	</script>
	<?php
	}
	
?>
</div>
<br><br>

Open in new window


...and that brings us up to the present.

The script that I have on the "hello.php" needs to wait for a couple of seconds and then hit the same SELECT that was hit initially, but with the new PrimeID. And that process needs to continue until its completed at which point, when a NULL value is returned, I'll know to conclude the script and tell my user that all of the PDFs have been generated.

So, having given you a more thorough explanation, I'm hoping that you can see what I'm trying to do and where it is I need a hand.

The thing that has me puzzled is:

Right now, I want to post to "hello_again.php" and do my loop, but how?

How do I run the SELECT with a new PrimeID and how do I do it from the context of my little callout box?

Let me know if you need any more explanation.

Thanks!
Gentlemen!

July! Good grief! I am so sorry for letting this linger as long as it did.

Bottom line: I got if figured out. You can see a demo of what I was finally able to put together at http://brucegust.com/eResume/. If you click on the button to the very right of the first employer listed under "Experience" (Applied Health Analytics), you'll see a section that elaborates on the "JQuery Loop Solution." There's a button that you can click on that demos what I was needing help with.

Thanks again and, once more, sorry for being so tardy in closing this question.