Ajax request doesn't work second time, why?

Question

My PHP files run motors, Forward.php makes them go one direction and Backward.php in the opposite. For some reason when I open the page and I for example press the up button it works fine, the motors run forward. Then it all goes wrong. If I press forward again nothing happens for about 10 seconds then suddenly the motors go all weird and start jittering.

If I open the index.html and press forward, then I refresh the page and press forward again that works fine...but if I refresh the page and then press the down button the motors go all weird again and do not work properly.

However if I run the motor codes from the terminal they work fine in any order no matter how many times I run them. I know the motor codes are fine and I do not think this is an issue with the pi but the website...If i run the motors from the terminal AFTER the website messes it all up then even in the terminal they stop running properly..

The php file uses system: (" python /var/www/html/Forward.py) and this has been tested on its own in the terminal and it works fine.

any help would be greatly appreciated

here is my code:

<html>
<head>

<title>RC car Control Website</title>
<link href="Website.css" rel="stylesheet">
</head>

<body>

<header>Website Controlled RC Car</header>

<button type="button" id="up"> <img src="images/up" width="50" height="50">        </button><br>

<button type="button" id="down"> <img src="images/down" width="50"     height="50"/></button><br>

<button type="button" id="right"> <img src="images/right" width="50" height="50"/></button><br>

<button type="button" id="left"> <img src="images/left" width="50" height="50"/></button><br>

<script type ="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type ="text/javascript">
$(document).ready(function () {

    var xhr;
        $("#up").mousedown(function() {
    $.ajax ({
                method: "GET",
                url: "http://192.168.1.94/Forward.php",
 });
 });

     $("#up").mouseup(function() {  
    $.ajax ({
            method: "GET",
                url: "http://192.168.1.94/MotorStop.php",});
                });    
});
</script>

<script type ="text/javascript"         src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type ="text/javascript">
 $(document).ready(function () {

    var xhr;
        $("#down").mousedown(function() {
    $.ajax ({
                method: "GET",
                url: "http://192.168.1.94/Backward.php",
     });
     });

     $("#up").mouseup(function() {  
    $.ajax ({
                method: "GET",
                url: "http://192.168.1.94/MotorStop.php",});
                });    
 });
</script>

</body>

</html>

Oh, yeh im kinda new to the whole thing, forgot to remove it when I was told previously. — Ahsin, Apr 13 '16 at 21:24
your last method should be ` $("#down").mouseup` instead of ` $("#up").mouseup` — Abdul Rehman, Apr 13 '16 at 21:29
ajax is asynchronous call. So when you press the up or down the code behind gets call. and if its singleton page it won't stop right away because it needs to complete its load time. You have to wait before the ajax call returns to do the second operation. Maybe what yuo need is a synchronous call. But that's not preferred — Abdul Rehman, Apr 13 '16 at 21:37
while the mouse is held down over the up button it runs, when i let go it stops which means it ran the MotorStop.php file which makes all the GPIO pins in use INPUT pins so they stop working...that means it has done what it needs to do and therefore its finished.. — Ahsin, Apr 13 '16 at 21:43
This isn't an answer to your problem, but try making a single function with the ajax code, and instead of replicating a block of ajax code three or more times, just have one block of code, and pass a different url to it ("MotorStop.php", "Backward.php", "Forward.php", etc.) It doesn't make your code work better, but it sure will look better and help you organize and streamline your code. — TARKUS, Apr 13 '16 at 22:15
You say that `MotorStop.php` switches the GPIO pins to **inputs** and it only works one time? Seems like a *really* good place to start looking to me. How can an input pin drive a motor? — andrew, Apr 13 '16 at 22:20
It uses GPIO.cleanup() to turn all used GPIO pins to inputs, which means they are not outputting anything (so all motors stop). what should happen is when another button is clicked the script runs and turns them back into outputs...if i run it in the terminal (first forward, then stop, then backward) it runs fine. I don think the issue is in the gpio pins, i think its the ajax requests. — Ahsin, Apr 13 '16 at 22:56

score 0 · Answer 1 · edited Apr 13 '16 at 22:14

0

i think that the mouseup function, you can not repeated, you need to have only one mouseup function

$("#up").mouseup(function() {  
    $.ajax ({
                method: "GET",
                url: "http://192.168.1.94/MotorStop.php"
            });
});

edited Apr 13 '16 at 22:14

andrew

9,313
7
30
61

answered Apr 13 '16 at 22:04

Evinton Antonio Cordoba Mosque

34
3

I dont understand, are you saying you can only have one mouseup function on the whole page? – Ahsin Apr 13 '16 at 22:33
not, I am saying: you can only to have for the buttom element with (id) "up" one mouseup function. – Evinton Antonio Cordoba Mosque Apr 14 '16 at 00:56
This was a mistake, in my code on my raspberry pi it doesn't have it. but it still does not work. – Ahsin Apr 14 '16 at 21:38

Ajax request doesn't work second time, why?

1 Answers1