AJAX load within an AJAX load

dam023

New Member
I am using buttons that are being run with JS AJAX loads. Just click on them and the run a javascript function to load the contents of a php file into a div. This is necessary because I can't have a POST form reloading my page every time a button is pushed. I also have these buttons within an html section of a php file that is being AJAX loaded within the main page. I'm doing that because I need the entire page to update itself at a certain point. So to illustrate:Main HTML page: includes JS AJAX request to get entire page (including buttons) and update it every half second ====> this entire page is being retrieved from a php file that includes the buttons. This file has more AJAX requests to let the buttons respond in real time. They get another php file every time a button is pushed =====> other php file runs the back code.My problem is this: My site needs to be very sensitive to the user's clicking buttons, and this layering of AJAX requests is creating quite a bit of lag. Before I had all the buttons and the AJAX requests connected to them all in the main page, and then the timing was fine - no lag. But (as I explained earlier) I need the whole to reload itself constantly as to react when certain variables in the PHP back code equal something specific, so I moved all the buttons into another php file to be AJAX requested by the main page once every quarter second. Even when I request it every 100th of a second there's still a lot of lag.Relevant main page code:\[code\]<script> function wonfunction() { $.get('wonphp.php', function(data){ $('#won').html(data); }); } setInterval(wonfunction, 10); </script> </head> <body> <div id="won"></div> <body> </html>\[/code\]Relevant wonphp.php code (the page code including buttons):\[code\] <script> $('#A').click(function() { $.get('clickA.php', function(data){ $('#clickdiv').html(data); }); }); $('#B').click(function() { $.get('clickB.php', function(data){ $('#clickdiv').html(data); }); }); $('#C').click(function() { $.get('clickC.php', function(data){ $('#clickdiv').html(data); }); }); </script> <div id="clickdiv"></div> <p align="center"><b><font face="Helvetica" color="#000080"><a href="http://stackoverflow.com/questions/7453678/testrand.php">Click here to purchase more claim credits.</a></font></b></p> <p align="center"><img src="http://stackoverflow.com/questions/7453678/images/SetA.jpg" id="A" class="button"> <img src="http://stackoverflow.com/questions/7453678/images/SetB.jpg" id="B" class="button"> <img src="http://stackoverflow.com/questions/7453678/images/SetC.jpg" id="C" class="button">\[/code\]OK thank you very much for your help.
 
Top