ajax, jquery, and php form load issues

[hansolo669]

I have searched long and hard to find a solution to this problem to no avail.

here is the jquery. on the php side I'm just using a small string to detect headers and such.

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript">
$("body").on("click", "button", function(){

$.ajax({
  type: 'POST',
  url: 'exec.php',
  cache: false,
  beforeSend:function(){
    //loading image
    $('#out').html('<div class="loading"><img src="loader.gif" alt="Loading..." /></div>');
  },
  success:function(data){
    //output the data
    $('#out').empty();
      $('#out').html(data);
  },
  error:function(){
    //failure
    $('#out').html('<p class="error"><strong>Oops!</strong> Try again...</p>');
  }
});
});
</script>
<div class="form">
<button>Play the Game</button>

(i know, i know "you should use $.post instead" I'm useing $.ajax beacuse it gives me a bit clearer idea of what is happening)

the issue I'm having is that while the ajax appears to activate every time, the php only responds the second time.

I.E. click(ajax send. no response), click(ajax send. response), click(ajax send. no response), click(ajax send. response) etc.

any help would be appreciated

 

[jared_kipe]

I have searched long and hard to find a solution to this problem to no avail.

here is the jquery. on the php side I'm just using a small string to detect headers and such.

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript">
$("body").on("click", "button", function(){

$.ajax({
  type: 'POST',
  url: 'exec.php',
  cache: false,
  beforeSend:function(){
    //loading image
    $('#out').html('<div class="loading"><img src="loader.gif" alt="Loading..." /></div>');
  },
  success:function(data){
    //output the data
    $('#out').empty();
      $('#out').html(data);
  },
  error:function(){
    //failure
    $('#out').html('<p class="error"><strong>Oops!</strong> Try again...</p>');
  }
});
});
</script>
<div class="form">
<button>Play the Game</button>

(i know, i know "you should use $.post instead" I'm useing $.ajax beacuse it gives me a bit clearer idea of what is happening)

the issue I'm having is that while the ajax appears to activate every time, the php only responds the second time.

I.E. click(ajax send. no response), click(ajax send. response), click(ajax send. no response), click(ajax send. response) etc.

any help would be appreciated

Example page?

Out of curiosity, why not do something like jQuery('button').click( function); ?

 

[hansolo669]

Example page?

Out of curiosity, why not do something like jQuery('button').click( function); ?

i actually did move to the ('button').click(fucntion); style method after i posted this.

as for example page... that should give you an idea on what im trying to do here.

 

[Eclipse278]

Ugh. I'm not the best at jQuery or javascript, but I don't think you want to have this in the "document ready" part.

move the < script > and < style > parts into < head > first.

then replace
$(document).ready(function() {
$("body").on("click", "button", function(){
with function loadajax(){

erase a }); since you've erased the .ready parenthesis
change the last }); to } since you're not inside an .on( anymore

then change <button>Play the Game</button> to <button onclick="loadajax();">Play the Game</button>

 

[jared_kipe]

Ugh. I'm not the best at jQuery or javascript, but I don't think you want to have this in the "document ready" part.

move the < script > and < style > parts into < head > first.

then replace
$(document).ready(function() {
$("body").on("click", "button", function(){

with function loadajax({

erase a "});" since you've erased the .ready parenthesis

then change <button>Play the Game</button> to <button onclick="loadajax();">Play the Game</button>

No, adding event handlers after the document is ready is a common and modern approach. It lets you cleanly separate your scripts out of your HTML markup (by not having inline onclick="JS" events).

----------

i actually did move to the ('button').click(fucntion); style method after i posted this.

as for example page... that should give you an idea on what im trying to do here.

There are a plethora of errors generated on each press.

Refreshing the page itself (http://roulette.ccegameplay.com/dev/index_beta2.php) causes intermittent timeouts. So replying on a timely ajax call maybe a server problem.

Refreshing the page you are ajax getting has the same problem (http://roulette.ccegameplay.com/dev/exec.php) intermittent time out and lots of errors in console.

 

[hansolo669]

No, adding event handlers after the document is ready is a common and modern approach. It lets you cleanly separate your scripts out of your HTML markup (by not having inline onclick="JS" events).

----------



There are a plethora of errors generated on each press.

Refreshing the page itself (http://roulette.ccegameplay.com/dev/index_beta2.php) causes intermittent timeouts. So replying on a timely ajax call maybe a server problem.

Refreshing the page you are ajax getting has the same problem (http://roulette.ccegameplay.com/dev/exec.php) intermittent time out and lots of errors in console.

the php script I'm running is very simple(create random 5 char string, append that to imgur.com/ get headers, and return the whole thing back).

I had a feeling it would be server related.
for knowledge's sake I'm running the server on a powermac g4 1ghz (the MDD fw800 version)2gb of ram, and i have a 80gb hdd dedicated to web serving. I'm useing osx server 10.4 with all the latest and greatest updates.
I hacked in support for php5 and a newer version of mysql.

thanks to everyone who helped it is very much appreciated, and it looks like a newer/more powerful linux based personal server is in my future.