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()'>
Related
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.
I have a live search bar where if the user types in "M" only results that have an M are shown and so on, i've made each result into a link so when the user clicks it, it'll load to a different page.
Now, I can make it load to another page, however I'm trying to do it on the same page but it just wont work.
The search code is simply a form that takes text, then im using the xmlhttp method to make it live.
Now, displaying it is as follows: (I have given it a class to use in the ajax)
echo "<a href = 'display.php' class='display'>" . $row['carName'] . "</a>";
Ajax:
$(document).ready(function() {
$(".display").each(function(){
var btn = $(this);
btn.on("click",function(){
$("#displayDiv").empty();
$.post("display.php",function(data) {
$("#displayDiv").append(data);
Any help? Currently, clicking it just loads test.php on which I have some text to see its working. I'm trying to get it to load dynamically on the right.
Thanks.
EDIT: it loads test.php which is:
<html>
<body>
<div id="displayDiv">
<h2> Test </h2>
</div>
</body>
</html>
EDIT2: div id which is in the same page as script:
<html>
<div id="displayDiv" style="width: 40%; float:right">
</div>
It's just following the link when you click on it. To stop this you need to change the event handler to:
btn.on("click",function(e){
e.preventDefault();
// rest of your code
});
$(document).ready(function() {
$(".display").on("click", function(e) {
$("#displayDiv").empty();
$.post("display.php", function(data) {
$("#displayDiv").append(data);
}
);
e.preventDefault();
});
});
I've searched a solution or an answer to get me close to the solution for my problem, without any luck. The problem is that I don't know what is actually causing this.
I have the following HTML sructure :
<body>
<div class="showall">
<div class="comentwrapper" style="height:0; width:800px">
</div>
<div class="articol">
Some article over here !
</div>
<input type="button" id="adaugacomentariu" value="Adauga comentariul tau ..." onclick="addBlogComent()" style="float:left; margin-left:5px" /><br /><br />
<div class="showcomment">
Coments go over here ..
</div>
</div>
and the follwing JS code :
function addBlogComent() {
$('.comentwrapper').animate({"height":"340px"});
$('.margine').delay(200).fadeIn(400);
}
function hideComent() {
$('.margine').fadeOut(200);
$('.comentwrapper').animate({"height":"0px"});
}
$(function() {
$('#addblogcoment').on('submit', function(e) {
$('.aratamesaj').fadeIn(300);
$.post('submitcomentblog.php', $(this).serialize(), function (data) {
$('.showcoment').load("blogcoment.php");
$("#addblogcoment").find('input[type=text], textarea').val("");
$('.aratamesaj').delay(5000).fadeOut(800);
$('.comentwrapper').delay(2000).fadeOut(200);
}).error(function() {
});
e.preventDefault();
});
});
My problem is that after .post() and the .load() that .onClick="" is not animating the form anymore.
I don't understand what can be the cause, because the form and the button is on the .showall div and I'm only .load()-ing something in .showcomment div which is a child of .showall.
Maybe someone can see something I'm missing over here .
There is a small fiddle . Don't have the external resources, but that is not the problem, everything is posted and loaded properly.
You can see the whole page at MyWebSite .
Please change your addBlogComent function code as follows, you are animating height but not making element visible.
function addBlogComent(){
$('.comentwrapper').css("display","block").animate({"height":"340px"});
$('.margine').delay(200).fadeIn(400);
};
Within your success callback handler fadeOut is setting display none. That is why its only working once. Your onclick function is being called each time. Hope that answer your question.
$('.comentwrapper').delay(2000).fadeOut(200);
I'm using ajaxSubmit on my web form. I also need to pop-up a div that shows "Processing the request" with a dimmed background upon user's click on the submit.
The code I'm using right now is like this:
<script type="text/javascript">
$(document).ready(function() {
$("#CustomerService").validationEngine({
ajaxSubmit: true,
ajaxSubmitFile: "processor.aspx",
success : function() {window.location.replace("Thankyou.aspx")},
failure : function() {}
})
});
</script>
<script type="text/javascript">
function DimScreen()
{
document.getElementById("DimBlackScreen").style.visibility = "visible";
}
</script>
And my HTML part for the submit button:
<input type="submit" value="Submit" id="Send" name="Send" style="cursor:pointer;" onclick="DimScreen();" />
Well the problem here is: whether the form passes the validation or not, the pop-up div will always show up, which is not the case I want.
Is there any way to make it detect if the form validation has passed and then display the div?
Many thanks for your help.
If you are using jquery version 1.4 or above try this:
$(document).ajaxStart(function() {
$("#DimBlackScreen").show();
}).ajaxStop(function() {
$("#DimBlackScreen").hide();
});
or if you are using less version of jquery 1.4 try this
$().ajaxStart(function() {
$("#DimBlackScreen").show();
}).ajaxStop(function() {
$("#DimBlackScreen").hide();
});
Remember put all these stuff in document.ready
$(document).ready(function() {
$("input#Send").click(function(e){
e.preventDefault(); //prevent default submit action,, use ajax instead
$('#DimBlackScreen').show();
$("#CustomerService").validationEngine({
ajaxSubmit: true,
ajaxSubmitFile: "processor.aspx",
success : function() {
$('#DimBlackScreen').hide();
window.location.replace("Thankyou.aspx"); //or $('body').html('Thank you!');
},
failure : function() {}
});// end validationEngine
}); //end click
});//end document.ready
<input type="submit" value="Submit" id="Send" name="Send" style="cursor:pointer;" />
Ok, inspired by the other two answers from alsahin and Kundan, I figured it out myself:
The only thing needs to be changed is how ajax handles the failure of validation. So I changed
failure : function() {}
to
failure : function() {document.getElementById("DimBlackScreen").style.visibility = "hidden";}
So that the pop-up "processing" div actually shows every time user clicks on the Submit button, but resets to hidden if the form doesn't pass validation.
I'm happy with my current code, but if you have any better ideas, please let me know.
I'm developing an web application using asp.net MVC and jQuery. I have in my page 10 forms and I'm using jQuery (live events) to do a async submit them. Something like this:
Everything works fine, but I need to format a Div with an image and when user clicks on this div I need to submit the form, but... the form is not executing the async operation like the submit button. It's executing default behavior...
My div is something like this:
My Script:
$("#jobs form").live('submit', function() {
$.post($(this).attb('action'), $(this).serialize(), function(result) {
//get and format result in my content divs...
});
});
My HTML:
<div id="jobs">
<% foreach(var job in Model) { %>
<form ...>
<!-- hide this button -->
<input type='submit' class='hide' id='mysubmitButton_<%=job.Id%>' />
<!-- need to submit this form -->
<div class='buttonImage' onclick="$('#mysubmitButton_<%=job.Id%>').click();"></div>
</form>
<% } %>
</div>
How can I set in 'onclick' to do a assync submit like the Submit Button in my page?
I don't know how to format this button, So I'm using an div or a hyperlink...
Thanks
Firstly, you have $.post($(this).attb('action'), .... This won't work -- the function is attr, so you need $.post($(this).attr('action'), .... Even better would be to avoid the jQuery object and use $.post(this.action, ....
For your submit image, the following code should work:
$('.buttonImage').live('click', function(){
$(this).closest('form').submit();
});
This will find the parent form and call the submit action on it, which should trigger the handler you defined in your question.
Just to note that it doesn't appear that you are preventing the default action occuring. You need to call your live method on the form like this:
$("#jobs form").live('submit', function(e) {
e.preventDefault();
// do the rest of your code
}
This prevents the default submit action occuring.