JavaScript to PHP

Dear List -

I have a program that [hopefully] will use Ajax to move a variable from JavaScript to PHP. When it runs, it hangs with an error [Firebug]. When I force it to continue, it does give results. I would like the following: 1] don't hang and 2] not be forced to use document.write.

This is a chess program [jq_test.php]. When the user dbl-clicks on a squar, the coordinate of the square should be in the $_POST variable:

CODE:

Code:

<?php $results = array(array("Br", "Bn", "Bb", "Bq", "Bk", "Bb", "Bn", "Br"),array("Bp", "Bp", "Bp", "Bp", "Bp", "Bp", "Bp", "Bp"), array("", "", "", "", "", "", "", ""),array("", "", "", "", "", "", "", ""),array("", "", "", "", "", "", "", ""), array("", "", "", "", "", "", "", ""),array("Wp", "Wp", "Wp", "Wp", "Wp", "Wp", "Wp", "Wp"), array("Wr", "Wn", "Wb", "Wq", "Wk", "Wb", "Wn", "Wr")); ?> snip... <head> <title>Jquery Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" href="jq.css" rel="stylesheet" /> <link type="text/css" href="jquery-ui-1.8.9.custom.css" rel="stylesheet" /> </head> <body> <div id="main"> <fieldset id="main_fieldset"> <table cellspacing="100"> <tbody > <tr> <td class="b1">8</td><td class="d1" id="a8"><?php echo $results[0][0];?> </td><td class="a1" id="b8" ><?php echo $results[0][1];?> </td><td class="d1" id="c8"> <?php echo $results[0][2];?> </td><td class="a1" id="d8"> <?php echo $results[0][3];?> </td><td class="d1" id="e8"><?php echo $results[0][4];?> </td><td class="a1" id="f8"> <?php echo $results[0][5];?> </td> <td class="d1" id="g8"> <?php echo $results[0][6];?> </td><td class="a1" id="h8"> <?php echo $results[0][7];?> </td> </tr> snip... <script type="text/javascript" src="jquery-1.5.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js" ></script> snip... <script type="text/javascript"> $(document).ready(function(){ $('.a1').dblclick(function() { $(this).css("background-color","blue"); move_from = $(this).attr("id"); $.ajax({ type: "POST", url: "jq_test.php", data:({move_from: this.getAttribute('id')}), dataType: "html", async:false, success: function(msg){ document.write(msg); } }).responseText; }); }); </script> snip... <?php echo <<<HTML <form method="post" action="jq_test.php"> Move From<input type="text" name="move_from"> </input><br /><br /> Move To <input type="text" name="move_to"></input><br /><br /> <input type="submit" value="Enter Move"></input> </form> HTML; ?>

Thanks in Advance

1. PUT YOUR CODE IN A CODE BLOCK.

2. why are you using document.write in the first place? you are using Jquery, just use .html()

3. what are you trying to accomplish with your post data? Youve already made a variable to catch the id it's moving from, but you are reiterating it in the actual data....

Code:

<script type="text/javascript"> $(document).ready(function(){ $('.a1').dblclick(function() { $(this).css("background-color","blue"); move_from = $(this).attr("id"); $.ajax({ type: "POST", url: "jq_test.php", data:move_from, dataType: "html", async:false, success: function(msg){ $("#idorclassofelementyouneedtotarget").html(msg); } }).responseText; }); }); </script>

Thanks.

Sorry for the delay.

Using this:

<script type="text/javascript">
$(document).ready(function(){
$('.a1').dblclick(function() {
$(this).css("background-color","blue");
move_from = $(this).attr("id");
$.ajax({
type: "POST",
url: "jq_test.php",
data:({move_from: $(this).attr("id")}),
dataType: "html",
async:false,
success: function(msg){
('.a1').html(msg);
}
}).responseText;

});
});
</script>

I receive the error: "a1".html is not a function.

Using this:

<script type="text/javascript">
$(document).ready(function(){
$('.a1').dblclick(function() {
$(this).css("background-color","blue");
move_from = $(this).attr("id");
$.ajax({
type: "POST",
url: "jq_test.php",
data:({move_from: $(this).attr("id")}),
dataType: "html",
async:false,
success: function(msg){
('.a1').html(msg);
}
}).responseText;

});
});
</script>

I receive the correct answers, but the program goes into an infinite loop after displaying the results.

Help and advice, please.

thats because you deleted part of the selector. it shoudl be :

Code:

<script type="text/javascript"> $(document).ready(function(){ $('.a1').dblclick(function() { $(this).css("background-color","blue"); move_from = $(this).attr("id"); $.ajax({ type: "POST", url: "jq_test.php", data:move_from, dataType: "html", async:false, success: function(msg){ $(".a1").html(msg); } }).responseText; }); }); </script>

** remember to wrap your code in code blocks by clicking on the black hash mark.***

and you keep chaning the code to this for some reason and it doesnt make sense.

Code:

data{move_from: $(this).attr("id")}),

Thsnks.

How do I "remember to wrap your code in code blocks by clicking on the black hash mark."?

Using your suggested code, the result appears in all the squares with the id of b.

What is desired is to have the result in the $_POST variable w/o any output to the screen. If we have to start w/ screen output to fine tune the code, OK. The output should appear only once on the screen and not in any of the squares.

Thanks again.

Dan -

Any more ideas? I'm really stuck on this and I'd like to be able to finish.

Thanks ever so much

To all users of this list -

Does anyone have any ideas how too solve the problem?

Thanks ever so much.