hi good morning all i want to make a click counter so when they click it it doesn’t re-load the page so i guess ajax comes to play here
below is the php code
if (isset($_POST['action']) && $_POST['action'] == 'update_play')
{
if (!isset($_SESSION['played_item_'.$id])) {
$query = "UPDATE " . $DBPrefix . "auccounter set play_counter = play_counter + 1 WHERE auction_id = :auction_id";
$params = array();
$params[] = array(':auction_id', $id, 'int');
$params[] = array(':play_counter', $id, 'int');
$db->query($query, $params);
}
$_SESSION['played_item_'.$id] = true;
header('location: track_audio.php?id=' . $id);
exit();
}
and heres the html code
<div class="sm2-inline-element sm2-button-element">
<div class="sm2-button-bd">
<a href="#play" class="sm2-inline-button sm2-icon-play-pause">Play / pause</a> </div>
</div>
ur help need greatly to complete the code thank you very much
donboe
November 22, 2018, 8:21pm
2
@ skyhighweb Can you show the complete html incl. form
thats the html form below, its a form to for a play button
<div class="sm2-bar-ui compact col-sm-3">
<div class="bd sm2-main-controls">
<div class="sm2-inline-texture"></div>
<div class="sm2-inline-gradient"></div>
<!-- this part is the play button start -->
<div class="sm2-inline-element sm2-button-element">
<div class="sm2-button-bd">
<a href="#play" class="sm2-inline-button sm2-icon-play-pause">Play / pause</a> </div>
</div>
<!-- this part is the play button start -->
<div class="sm2-inline-element sm2-inline-status">
<div class="sm2-playlist">
<div class="sm2-playlist-target">
<!-- playlist <ul> + <li> markup will be injected here -->
<!-- if you want default / non-JS content, you can put that here. -->
<noscript><p>JavaScript is required.</p></noscript>
</div>
</div>
<div class="sm2-progress">
<div class="sm2-row">
<div class="sm2-inline-time">0:00</div>
<div class="sm2-progress-bd">
<div class="sm2-progress-track">
<div class="sm2-progress-bar"></div>
<div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
</div>
</div>
<div class="sm2-inline-duration">0:00</div>
</div>
</div>
</div>
<div class="sm2-inline-element sm2-button-element sm2-volume">
<div class="sm2-button-bd">
<span class="sm2-inline-button sm2-volume-control volume-shade"></span>
<a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a> </div>
</div>
</div>
<div class="bd sm2-playlist-drawer sm2-element">
<div class="sm2-inline-texture">
<div class="sm2-box-shadow"></div>
</div>
<!-- playlist content is mirrored here -->
<div class="sm2-playlist-wrapper">
<ul class="sm2-playlist-bd">
<li><a href="{SONG_URL}"></a></li>
</ul>
</div>
</div>
</div>
sorry for late reply
m3g4p0p
November 23, 2018, 4:05pm
4
Indeed; you can send an XMLHttpRequest to the server and append the relevant data as FormData . Here’s a quick example:
var playButton = document.getElementById('play-button')
playButton.addEventListener('click', function (event) {
var xhr = new XMLHttpRequest()
var data = new FormData()
data.append('action', 'update_play')
xhr.open('POST', 'action.php')
xhr.send(data)
event.preventDefault()
})
Check out the above links for details!
hi thanks for the code, but am not too familiar on how to run it all 2gether, have chk the link still not sure
m3g4p0p
November 23, 2018, 4:19pm
6
You just include it at the bottom of your page:
<html>
<head>...</head>
<body>
...
<script>/* script goes here*/</script>
</body>
</html>
Also you’d have to give your button an ID or identifying class to select it (such play-botton in my example) and adjust the URL of your PHP script.
m3g4p0p:
play-botton
hi so i did that
<script>
var playButton = document.getElementById('play-button')
playButton.addEventListener('click', function (event) {
var xhr = new XMLHttpRequest()
var data = new FormData()
data.append('action', 'update_play')
xhr.open('POST', xhr.open('POST', '{SITEURL}track_video.php')
event.preventDefault()
})
</script>
html code
<div class="sm2-inline-element sm2-button-element">
<div class="sm2-button-bd">
<a id="play-button" href="#play" class="sm2-inline-button sm2-icon-play-pause">Play / pause</a>
</div>
</div>
php code
if (isset($_POST['action']) && $_POST['action'] == 'update_play')
{
if (!isset($_SESSION['played_item_'.$id])) {
$query = "UPDATE " . $DBPrefix . "auccounter set play_counter = play_counter + 1 WHERE auction_id = :auction_id";
$params = array();
$params[] = array(':auction_id', $id, 'int');
$params[] = array(':play_counter', $id, 'int');
$db->query($query, $params);
}
$_SESSION['played_item_'.$id] = true;
header('location: track_audio.php?id=' . $id);
exit();
}
nothing is happening
m3g4p0p
November 23, 2018, 8:47pm
9
You missed that part
xhr.send(data)
so the request never gets actually sent.
hi so it suppose look this way ?
<script>
var playButton = document.getElementById('play-button')
playButton.addEventListener('click', function (event) {
var xhr = new XMLHttpRequest()
var data = new FormData()
data.append('action', 'update_play')
xhr.open('POST', xhr.open('POST', '{SITEURL}track_audio.php')
xhr.send(data)
event.preventDefault()
})
</script>
right
hi added that still no changes
m3g4p0p
November 29, 2018, 4:55pm
14
Hey, sorry for the late reply… in case you’re still working on this, there are 2 errors in this line
xhr.open('POST', xhr.open('POST', '{SITEURL}track_audio.php')
You forgot a closing parenthesis, and the second argument should be a string to the URL where you have another xhr.open() call (see here for details); so it should probably look like this (can’t tell with those template expressions though):
xhr.open('POST', '{SITEURL}track_audio.php')
BTW in case nothing seems to be happening you can always check the console for errors.
system
March 2, 2019, 2:11am
16
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.