Change aspects of page with PHP

I'm trying to make my PHP code update parts of my HTML when executed, and I'm not really sure how to do it without relying heavily on javascript and hidding divs etc.

It works in a way that when the user clicks the "tick" or "cross", it updates a database and hides a div whilst showing another. This DB is queried on page load, and a voting bar is loaded with the current total ticks and crosses. There is then a % width set on those bars depending on how many votes each side has.

I've currently got:

<div id="voting">
<a href="#" onClick="updatelikes();">
<img src="/images/tick.png" width="250px" />
</a>
<a href="#" onClick="updatedislikes();">
<img src="/images/cross.png" width="250px" />
</a>
</div>
<div id="votingoff" style="display:none;">
<img src="/images/tick.png" width="250px" />
<img src="/images/cross.png" width="250px" />
</div>

and

function updatelikes() {
    $.get("updatelikes.php");
    voting = document.getElementById('voting');
    voting.style.display="none";
    votingoff = document.getElementById('votingoff');
    votingoff.style.display="";
    return false;
}
function开发者_运维百科 updatedislikes() {
    $.get("updatedislikes.php");
    voting = document.getElementById('voting');
    voting.style.display="none";
    votingoff = document.getElementById('votingoff');
    votingoff.style.display="";
    return false;
}

This works in that it removes one from display, and shows the other one. However, I feel this code is a bit clunky, and I'd like for the "voting bar" to have its width changed and have the values updated. Since the HTML code is generated at page load by the PHP script, I don't know how to update it when "updatelikes.php" or "updatedislikes.php" is loaded, since I feel I would have to have another div that is hidden, then added to it, then show it, and hide the other. I think this could be a clunky, and maybe even slow on some user computers.

Any input is much appreciated, as I'm just totally lost now!

I see you are already using JQuery to access "updatelikes.php" and "updatedislikes.php". You can easily have a value returned to your javascript functions from your php pages:

$.get('updatedislike.php', function (response) {
    //Logic in here
});

So in the Like/Dislike you could get the total votes from the database and return it to your javascript function, and then the "response" argument will have whatever you returned from your php function. After the value is returned you can simply re-call whatever you call at page load (in case you return/do exactly what you do when the page is loaded at first).

Here you can find how to return values from your php files to your jquery/javascript functions.

Good luck!

Hanlet