图标更改取决于数据库设置

Question

for weeks now I´m trying to setup my new homepage that runs on my LAN on a raspberry pi running Raspbian.

What I want to do is save the state of some RC Switches in a database and show the actual states on my website. I´ve already set up my database, what I want now is, that icons get updated by the status of the RC switches in the databse. For example I have an icon "lightbulb_off" and "lightbulb_on". If database says light 1 is off, "lightbulb_off" shall show up.

I am at a point where everything works, but I have to reload the page everytime I clicked on an icon, what switches the RC Switch and updates the database, to see the new icon. I want the icon to change without reloading the page. I tried a lot to combine jscript and PHP using AJAX, but I don´t get it.

Here is my code:

<img id="LampTV" src=<?php Lampe($qLTV, $queryLTV); ?> onclick="Lampe('http://192.168.1.66/index.html?schalte&9'), updateStateLampeTV()">

So src= Lampe() reads the database for the actual state. After clicking the RC Switch switches and the database gets updated.

Now, how can I change the icon without reloading the page again? I guess it won´t work with PHP but I don´t know how to achieve it using AJAX.

Thanks for yout help!!

Update:

Now I created this function:

function icon(){$(document).ready(function(){$.ajax({url: 'PHP/icon_state.php',type:post',data: {'Lampe($qLTV, $queryLTV)'},success: function(data,status)

It shall run a function in my php file which echos a path to the correct iconfile. Doesn´t wotk this way :(

Answer 1

You need to use Ajax. As I see in the comments, you tried to do something.

So, you have an id for your image, what is great. We can bind a click function to it. Pass the data what you want in the data section as an object, (or query string or array), and in the success function of ajax, update the source of your original image object.

    $('#LampTV').click(function() {
        var qLTV = 'Some data what you need to pass';
        var queryLTV = 'Some other data, what you want'
        var LampTVObj = $(this);
        $.ajax({
            type: "POST",
            url: 'PHP/icon_state.php',
            data: {
                qLTV: qLTV,
                queryLTV: queryLTV
            }, success: function(data) {
                //In your php you need to echo the URL of the status image
                //like this 
                //echo 'http://example.com/images/online.png';
                $(LampTVObj).attr('src', data);
            }
        });
    });