We Keep Coding

Add and then remove <p>

I want add <p> with text when my form have some error. I write some js code, but it does not work now.
My question is: how can i add text, if i have error, show it 1800 ms, add then remove this text?
$(document).ready(function () {
........................
error: function () {
$('form').append("<p class='er-msg'></p>").text('Maximum upload size 50MB. Please try again');
$('.er-msg').animate({ opacity: 0} , 1800);
$('.er-msg').remove(); //don't work
}
};
....................
});
I hope someone help me.

Now your animation takes 1800ms and, from what I understand, you want a delay of that time before you hide the message. So you should start with a setTimeout like this
setTimeout(function () {
$('.er-ms').animate({ opacity: 0} , 1800);
}, 1800);
jQuery animate takes a 3rd parameter, which is a function that will be called after the animation is over. Then you can add this, to make the message disappear.
setTimeout(function () {
$('.er-ms').animate({ opacity: 0} , 1800, function () {
$(this).hide().remove();
});
}, 1800);
When you put this in the error callback, after the append line, and get rid of the last two, you should be good to go.

The append of <p> is not working that's why you can't remove it.
Try it this way:
$(document).ready(function () {
........................
error: function () {
$('form').append("<p class='er-msg'></p>");
$('.er-ms').text('Maximum upload size 50MB. Please try again');
$('.er-ms').animate({ opacity: 0} , 1800);
$('.er-ms').remove();
}
};
....................
});

Is the actual append even happening?
I suspect it is not because you are appending <p> dynamically.
In order to successfully bind to this, you will be need to target its wrapper.
for example:
$('form').on(eventname, targetElement, function(){
....the behavior you want
});
you can check out this blog post for more info: http://blog.ning-xia.com/accessing-dynamically-created-elements-with-jquery/

Another way to do is it to create the <p> and set it to display: none then you can just toggle it as needed.
html:
<p class='er-msg'>Maximum upload size 50MB. Please try again</p>
CSS:
.er-msg {
display: none
}
jQuery:
error: function () {
$('.er-msg').fadeIn("slow");
setTimeout(function(){
$('.er-msg').fadeOut("slow");
}, 1800);
}
As a personal suggestion, I would make the timer slightly higher to accommodate people that don't read fast. This way your error message is effective for anyone that happens to see it.
JSFIDDLE DEMO

Simple solution
Here is an example how you could do this:
var errorMessage = 'test message';
$('#question-header').append(
$(
'<p class="er-msg">' +
errorMessage +
'</p>'
).animate(
{opacity: 0},
1800,
function(){
$(this).remove();
}
)
);
You can call a function inside animate that runs after animation is complete. Try to run this on this page in your console. Note that with this multiple error can be thrown in different orders and they will all show the correct behavior. You couple the animation and the removal to all your unique error messages in a simple way.
Your code does not work because text should be called on that created element not the element your appending it to.
Proper way:
$('form').append($('<p class="er-msg"></p>').text('Maximum uplo...'));
But I think the example above is a lot more readable, abstract and more performant.

Scroll to specific area on page load AND perform Ajax Query

Good day folks. I need to figure out how to perform an action using Ajax once I have linked to a specific section on a page. I already know how to get to the designated DOM element on the other page, but I would like to go further as to perform some action using ajax once it has taken the visitor to that point.
eg.
<nav>
<ul><li></li></ul>
</nav>
Will take me to this about.php page to the "team" div
<div>
<div><a name="team"></a></div>
</div>
But then I would like to run some Ajax automatically that would usually be executed when the user clicks on some object in the "team" div. So should the user get to this section by way of the link up above, it will take them straight to the content. Does that make sense?

I'm going to go out on a limb and assume you're using jQuery's animate() for the scrolling:
$('html, body').animate(
{ scrollTop: $("#something").offset().top },
1000,
function() {
someAjaxFunction();
}
);
var someAjaxFunction = function() {
$.ajax({
url: '/something/'
}).done(function(data) {
// Done!
});
};
We're using the callback function argument given to animate() to fire off our ajax request.

You can use jQuery's scrollTo() to scroll to the area on the page, then use the complete function to call you ajax after the scroll has finished.
Detailed Description here
$('body').scrollTo('#target', function()
{
// Do your AJAX Thaaang
});

This check can be run to determine if the user has navigated directly to the teamDiv. Running it on page load would allow you to catch it in the event that the user was deep linked to the teamDiv from another page:
if (/#team/.test(window.location.href)) { // perform Ajax query here... }
Note: In the example link, you use the id team whereas the div's ID attribute is set to teamDiv. They need to be the same for this to work.

So the code would run if the user clicks some object in the "team" div?
In that case, is this an option?
<div>
<div id="teamDiv"><a name="team"></a>some element</div>
</div>
<script type="text/javascript">
$(function() {
$("#teamDiv").click(function() {
//put what you want to happen when the user clicks something in
//teamDiv here
});
})
</script>

My suggestion would be to read the current loaded url:
$(document).ready(function () {
var location = window.location.href;
if(location.indexOf('#team' > -1) {
// do something
}
}

You can check location.hash (http://www.w3schools.com/jsref/prop_loc_hash.asp) to determine if hash existed.
If you want to do something in each variants of navigation to this div: click and scroll you can use something like this:
$(document).bind('scroll', function() {
if($(this).scrollTop() > $('.your-div').top()) {
alert('do something');
}
})

Display an alert in jQuery for a few seconds then fade it out

When an AJAX call completes, I'd like to display a message to the user that shows for 3 seconds - and then fades out. Also, I want this message to show up right before the button he pressed - #btnSubmit.
Here's my code (it doesn't work - fades out the button instead of the message):
if(response == 'success') {
$('#btnSubmit').before('<div>Success!</div>').delay(3000).fadeOut();
}
Any ideas on how I can fade out this dynamically generated element in jQuery?

Use insertBefore() instead of before()
$(function() {
$('<div>Success</div>')
.insertBefore('#btnSubmit')
.delay(3000)
.fadeOut(function() {
$(this).remove();
});
});
<button id="btnSubmit">button</button>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
so that the effect and delay are applied to the new injected element.
Further information about insertBefore(): http://api.jquery.com/insertBefore/

You were calling fadeOut on #btnSubmit.
$('#btnSubmit').before('<div id="success">Success!</div>');
$('#success').delay(3000).fadeOut();

$("#success").show();
setTimeout(function() { $("#success").hide(); }, 5000);

click a button from a java-script function

I am trying to get a java-script function to click a hidden button in order to execute some code. I wrote a short program to try and test this method.
Here I establish two buttons.
<div><button>test</button></div>
<div class="rowHidden"><button id="testHiddenButton">open the dialog</button></div>
Below is my java-script.
function clickTestButton() {
$("#testHiddenButton").trigger("click");
}
$("#test").click(function () {
clickTestButton();
});
$(#"testHiddenButton").click(function () {
alert("TESTTTTTTTTTTTTTTTTTTTT");
});
The idea is that when the first button is clicked, it triggers the next button to click. This does not work though. It seems like the page processes something but the alert never goes off. Any ideas?

Two errors
Error 1: You have to declare an id for the first button
<div><button id="test">test</button></div>
<div class="rowHidden"><button id="testHiddenButton">open the dialog</button></div>
Error 2: The # needs to be inside the selector string.
$("#testHiddenButton").click(function () {
alert("TESTTTTTTTTTTTTTTTTTTTT");
});

Object expected error

My site is working perfectly in all browsers except the IE.
The error box is prompted when the page is load in IE with the error msg below:
Line: 227
Error: Object expected
when i start debugging, the error is from here below at the first line.
$().ready(function()
{
// Hide all elements with .hideOnSubmit class when parent form is submit
$('form').submit(function()
{
$(this).find('.hideOnSubmit').hide();
});
});
Can anyone advice? it is really annoying to prompt that message on every page
============== EDIT ===============
I have tried the advice below
$(document).ready(function($)
{
// Hide all elements with .hideOnSubmit class when parent form is submit
$('form').submit(function()
{
$(this).find('.hideOnSubmit').hide();
});
});
OR
jquery(function($)
{
// Hide all elements with .hideOnSubmit class when parent form is submit
$('form').submit(function()
{
$(this).find('.hideOnSubmit').hide();
});
});
But both also give me the same error.

Either use
$(document).ready(function() { … } );
or
jQuery(function($) { … } );

Does your form have a control with a name or id iof submit? If so, it is shaddowing the submit method of the form.
Change it to something else, like "submitButton", or if you don't need to reference it or post it with the form, don't give it a name or id at all.

Try this.
jQuery(function($) {
$('form').submit(function() {
var elm = $(this).find('.hideOnSubmit');
if (elm.length) {
elm.hide();
}
});
});