0

I trying control a "status" of 3 buttons using HTML/PHP + Ajax/javascript + Mysql.

I can click on button and:

  1. Button on 'div' tag and go to script java that manager the get to load;
  2. Update bd;
  3. Change the image that is my button (after query on altered bd);

There is my codes:

index.php: on head

<script>
    $(function () {
        $('#button div').click(function () {
            var nameDiv = $(this).attr('id');
            var last = nameDiv.charAt(nameDiv.length - 1)
            $("#" + nameDiv).load("change.php?num=" + last);
        });
    });
</script>

on body:

<div id="button">
    <div id="button1"><?php QueryStateButton(1); ?><br /></div>
    <div id="button2"><?php QueryStateButton(2); ?><br /></div>
    <div id="button3"><?php QueryStateButton(3); ?><br /></div>
</div>

my function:

    function QueryStateButton($num) {
        include 'conection.php';
        $query = 'SELECT * FROM button WHERE id =' . $num;
        $result = mysqli_query($link, $query);
        while ($row = mysqli_fetch_array($result)) {
            $place = $row['place'];
            $status = $row['status'];
        }
        if ($status == 1) {
            echo '<img src="image/on.png"><br />' . $place;
        } else {
            echo '<img src="image/off.png"><br />' . $place;
        }
        mysqli_close($link);
    }

another:

    function changeStatusButton($num) {
        $status = queryStatus($num);
        include 'conection.php';
        if ($status == 0) {
            $query = 'UPDATE button SET status = 1 WHERE id =' . $num;
        } else {
            $query = 'UPDATE button SET status = 0 WHERE id =' . $num;
        }
        $result = mysqli_query($link, $query);
        mysqli_close($link);

        QueryStateButton($num);
    }

Just scope:

    //take the status for button on bd
    function queryStatus($num) {
        ...
    }

change.php

    <?php
        $num = $_GET['num'];
        include 'functions.php';
        $resul = changeStatusButton($num);
    ?>

My problem is this:

I need be able to click image inside div and change the state of this button on bd. Same time I need the return this state via ajax/javascript and change the image on browser "alive".

For example: I click the button on my tablet and my son on PC see the change ON to OFF (or OFF to ON) without need to refresh the page.

How is this possible?

I don't want to use Node.js (because I think a very complex and cannot understood how to do this).

I saw for long_polling and comet strategies, but this is possible using php/html + ajax/javascript + mysql?

7
  • First, Instead of .load() use $.ajax() with cache: false and POST or you'll run into caching issues, since .load() is using GET (which by default will be cached). Second, Ajax needs for you to print/echo something in the page you're calling, or it can't update the front end. Commented Feb 26, 2015 at 19:14
  • Print/echo exactly on change.php ? Possible a exemple for .load() and how to use $.ajax() ? Commented Feb 26, 2015 at 19:18
  • I guess you are already printing from inside the function QueryStateButton (you should fix opening and closing the db twice, though, that's a problem for performance, you only need to open once per request)...so maybe you need to add to this question what is actually happening...what are you getting? Commented Feb 26, 2015 at 19:21
  • Basically the changes status on bd ok. When I click on images the set on bd ok, change de values and ON and OFF ok. But other person in another device is not possible to see without refresh on page... Commented Feb 26, 2015 at 19:25
  • So on the page then you need a javascript timer that fires off a periodic ajax request to load the new status... Commented Feb 26, 2015 at 19:28

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.