I have programmed a point system, after successful redeeming I give with isset($succesMsg) a message that it was successful.
Now I want to show a small animation using JavaScript, but it does not work.
My PHP Code
$succesMsg= "<div class='body-overlay' id='body-overlay'></div>
<div class='overlay' style='display: none;'><h1><span>+ {$codeCoins['coins']}</span></h1></div>
My HTML Button is:
<input type="submit" name="code" class="btn btn-primary w-100" value="CODE EINLÖSEN">
My JavaScirpt Code is
<script>
$(document).ready(function(){
$(".overlay").hide();
$(".btn btn-primary w-100").click(function(){
$(".overlay").show();
setTimeout(function() {
$('.overlay').fadeOut();
}, 3000);
});
});
</script>
When I click on redeem I see in the source code that the div fields are set (body-overlay and overlay) but the animation does not work.
If I try without the PHP migration it works, but unfortunately brings me nothing.
I can't find the error, I'm searching all the time.
Two mistakes I can see in your code:
$(".btn btn-primary w-100")Whenever you want to add an any event using multiple classes of single html element. It should be without space also with dot(.).
Explaining: .btn btn-primary w-100
It will look for an nested elements with mentioned classes. Like you have html elements are as
<div class=‘btn’>
<div class=‘btn-primary’ >
<div class=‘w-100’>
</div>
</div>
</div>
Change it to:
.btn.btn-primary.w-100
$succesMsgyou have written a html code in it. Which needs to be loaded first before javascript code.
Do like: keep your html ready in html only and set varibale true or false in php. And you can check that variable in script. If it is true thane .show() or else .hide()
Note: Isset checks whether a variable is set and is not NULL only.