Develop Reference

JavaScript code gives no answer to my isset, how do I solve the problem?

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
About $succesMsg
you 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.

why isn't my jquery altering css attributes on button push?

I have an file "dashboard.html" that I am trying to manipulate with jQuery. The contents are such:
<div id="dashboard">
<span id="contracts">
<div id="make-offer">
<button onclick="getDetails()">add</button>
</div>
<div id="offer-type" style="visibility:hidden">
<form action="">
"Offer what for what???"
<button id="add-good" onclick="addGood()">good</button>
<button id="add-service" onclick="addService()">service</button>
</form>
</div>
</span>
</div>
I am trying to hide the "make-offer" div upon clicking the button and show the "offer-type". However, when I run the following js file, the divs do not change their visibility, though my test message is successful.
function getDetails(){
console.log("getting details.");
$("#make-offer").css("visibility:hidden");
$("#offer-type").css("visibility:visible");
}
Can anyone spot what I'm doing wrong? thanks.

You're calling .css() improperly. Two choices:
$("#make-offer").css("visibility", "hidden");
or
$("#make-offer").css({ visibility: "hidden" });
The second way allows you to set more than one property at a time.
When you pass just one parameter, you're asking jQuery to give you the current value of that CSS property.

jQuery does things a little differently
function getDetails(){
console.log("getting details.");
$("#make-offer").css("visibility", "hidden");
$("#offer-type").css("visibility", "visible");
}

Hide DIV and show image on submit

Using jQuery I need to hide a DIV and show an image when the Submit button on a form is clicked.
The relevant part of the HTML is below:
<div class="form-group">
<div id="submitDiv" class="col-md-offset-4 col-md-1">
<button id="Submit" name="Submit" type="submit" class="btn btn-primary">Submit</button>
</div>
<div id="SpinWheelDiv" class="col-md-offset-4 col-md-1">
<img id="SpinWheel" height="20px" src="../img/spin.gif" hidden="">
</div>
</div>
The jQuery script being used is below:
<script type="text/javascript">
$('#formCForm').validator().on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
} else {
$('#SpinWheel').removeAttr('hidden');
$('#submitDiv').attr("hidden","true");
return true;
}
});
</script>
The problem is that when return is set for false this works on both Safari and Chrome. With the return set to true it does not work on Safari anymore. Strangely enough if a put an alert("Hello") before the return Safari does show the alert but fails to hide the div and show the image.
On Chrome everything works as expected.
Maybe I should add that I am using Bootstrap along with Bootstrap Validator
Any ideas please?

Try using:
$('#submitDiv').attr("hidden","hidden");
instead of using
$('#submitDiv').attr("hidden","true");

Simply you can write following code to show an element.
$('#submitDiv').show();
To show or hide best and easy way is to use method .show() and .hide()

e.isDefaultPrevented() by the jQuery API's definition is only true when you e.preventDefault();
I'm not sure if this checks does what you want, but if you don't prevent the default behavior of your submit button; it will trigger an action on the above laying <form> which usually results in a page refresh.
Do e.preventDefault() and start handling your form from there.

How to show loading-div after submitting a form with jQuery?

I am new at Javascript and jQuery. I want to show a "loading-gif" after the user submitted a form but can't figure out why my code is not working. That's the situation:
the form has the id="form"
the loading-div has the id="loading" and the style="display:none" (and some others of course)
the submit-button has the class="formtrigger" (and no type="submit")
That's my javascript (initialized after jquery at the bottom of the html-page):
$('.formtrigger').click(function() {
$('#loading').show();
$('#form').submit();
});
When I click the button, the form is submitted, but the loading-div doesn't appear. I tried the line "$('#loading').show();" without binding it on the click-event and it worked. I also tried this code:
$('.formtrigger').click(function() {
alert('blablabla');
$('#form').submit();
});
and both statements worked! First the alert is shown and then the form is submitted. Why does the other code not work?
Thanks in advance.
EDIT: I've also tried the following variations without success
$('.formtrigger').click(function() {
$('#form').submit();
});
$('#form').submit(function() {
$('#loading').show();
});
and
$('.formtrigger').click(function() {
$('#loading').show();
window.setTimeout($('#form').submit(), 5000);
});
and
//HTML
<button type="submit">...</button>
//JS
$('#form').submit(function() {
$('#loading').show();
});

In your .submit(), show your loading spinner:
$("#loading").show();
And after your .submit() is done, hide it:
$("#loading").hide();
And make your spinner display: none; by default since the jQuery above simply changes the css properties for your specified element.
I provided you with a simple demo where I have an AJAX function echoing your message from the text input. It will show a loading spinner until it reaches success.
Fiddle Demo

In the Head put...
<script type="text/javascript">
<!--
function showHide(){
//create an object reference to the div containing images
var oimageDiv=document.getElementById('searchingimageDiv')
//set display to inline if currently none, otherwise to none
oimageDiv.style.display=(oimageDiv.style.display=='none')?'inline':'none'
}
//-->
Put this where you want the spinner to appear... (of course you'll need to find an animated gif for a spinner)
<div id="searchingimageDiv" style="display:none"> <img id="searchingimage1" src="http://www.pathtoyourimage/images/searching.gif" alt="" /> </div>
Your submit button text should be...
<input type='submit' value='Next' name='submit' onclick='showHide()'>

jQuery .on click event does not occur

Hi and thanks for reading. I've been trying to avoid using HTML onclick="__" references and instead putting these events in my .js file. After reading about jQuery's .click() and then .on() events, I tried to use this in my code for a button.
edit In my haste to make up a <p> that didn't have the rest of the contents, I entered "name" instead of "id". Many answers have recommended I either switch to a p[name=p+ or #p+ reference, but my main problem has been that I can't even hit the alert before the reference to the id/name. Thanks again for your answers.
HTML:
<p name="pBananas"> junk </p>
<button class="deleter" id="dBananas" name="Bananas">Delete</button>
JS:
$(document).ready(function() {
$('.deleter').click(function() {
alert('click function works');
$("p" + $(this).attr("name")).remove();
});
});
The above code won't even get to the alert when I click the button. I've also tried referring to the button by name and ID, and going by $(document).ready($('.deleter')___.
I tried using the $(handler) format as well to have the click event be set after the document is ready. Neither way seems to work. At this point, I resorted to onclick="deleteButton()" and have a deleteButton() function in my .js file, but the function won't detect $(this) and just deletes all <p> tags.
The rest of my javascript is working. I haven't tried including this .on() at the bottom of the HTML, but I'm trying to avoid scripts in my HTML as well. For completeness' sake, I've been testing on both Chrome and Firefox, using a .jsp file to render the HTML.
Thanks again.
Edits
here's how I'm referencing my jquery and js, directly copy-pasted.
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="javascript/index.js"></script>
</head>
here is how my html looks leading up to the div where the is inserted:
<body>
<div id="wrapper">
<div id="header">Card Draw Probability Calculator</div>
<div id="main">
<div id="cardList">
<fieldset>
<legend> Select cards for probability calculation</legend>
<div id="innerCardList"></div>
Here is how the <p> is generated:
function newestCardListLineMaker() {
var $newLine = $('<p id="newestPara"><input type="checkbox" name="new" value="none"/> <input class="cardText" type="text" maxlength="30" name="newestCard" /> Quantity <input type="text" maxlength="1" class="quantityText" name="newestQuant" /><button class="deleter" id="newestDelete">Delete</button><br/></p>');
$("#innerCardList").append($newLine);
On another note, which I should have seen before as significant: the HTML that the .click or .on(click, handler) is referencing has been created by another js function.

Try using .on() function, so your code would be:
$(document).ready({
$('.deleter').on('click', function(){
//do stuff here
});
});
Even better would be this:
$(document).ready({
$('div_above_.deleter').on('click', '.deleter', function(){
// do stuff here
});
});
Hope this helps you.

I have modify your javascript code check it.
$('.deleter').click(function() {
alert('click function works');
var p="p"+$(this).attr("name");
$('p[name='+p+']').remove();
});

working demo
<p id="pBananas"> junk </p>
<button class="deleter" id="dBananas" name="Bananas">Delete</button>​
$(document).ready(function() {
$('.deleter').click(function() {
alert('click function works');
$("#p" + $(this).attr("name")).hide();
});
});​
Edited Jsfiddle

For me it works. Didn't delete the Paragraph element though so your code should look like this instead:
<p id="pBananas"> junk </p>
<button class="deleter" id="dBananas" name="Bananas">Delete</button>
and
$(document).ready(function() {
$('.deleter').click(function() {
alert('click function works');
$("#p" + $(this).attr("name")).remove();
});
});

$(document).ready(function() {
$('.deleter').click(function() {
alert('click function works');
//alert($(this).attr("name"));
$("p[name=p" + $(this).attr("name") + "]").remove();
});
});​

The final code I used to complete the .on('click') event was:
$(document).ready(function() {
$("div#innerCardList").on("click", "button.deleter", function() {
var paraName = $(this).closest("p").attr("id");
$("#" + paraName).remove();
});
});
The HTML elements which I wanted to assign click events to were generated after the page was already loaded. I needed to delegate the events to the containing div.
Thanks for all the help and different perspectives!