Javascript Hide Jquery Form - javascript

I have a js and html form that submits through php. Once submitted, the email is sent and php returns a success message that is appended to the bottom of the form using jquery.
submitHandler: function(form) {
$.ajax({
type: 'POST',
url: 'process.php',
data: $(this).serialize(),
success: function(returnedData) {
$('#commentForm').append(returnedData);
}
});
return false;
},
Instead, I want the js to remove and reset (hide and clear) the comment form but still append the returned data to the same location as #commentForm

The remove() function does that.
$('#commentForm').remove();

based on what #GRIGORE-TURBODISEL sayd, but with better animation you can do this
$('#commentForm').slideUp(1000, function(){
$(this).html(returnedData).show('fast');
});
first it hides the form in 1 second, when finished emptys the html, puts in returnedData and shows it again

Related

Javascript function to show div with php content only flashes up

I've written a javascript function to show a PHP within a Div. It seems to work, except that the php to be shown only flashes up for a brief second. Is there any way to get it to stay shown until I select an option to close it.
Many thanks
function showBiog(keysop){
$.ajax({
url: 'test2.php?number=' + keysop,
type: 'POST',
dataType: 'html',
data: $('#SubmitForm').serialize(),
success: function(content)
{
$("#DisplayDiv").html(content);
}
});
event.preventDefault();
$('#submit_btn_id').click();
}

show loading image before the content loads through jquery or ajax

Hello mates just stuck with a problem.
i am using click() and load() function to get my content in a css class
$("#feed").click(function(){
$(".homefeed").load("feedcontainer.php");
$("#elementcontainer").show();
});
$("#news").click(function(){
$(".homefeed").load("n.php");
$("#elementcontainer").show();
});
$("#info").click(function(){
$(".homefeed").load("newinfo.php");
$("#elementcontainer").hide();
});
As you can see when i click a div then i am able to load a php file content in a .homefeed class container and it is working perfectly
all i want to show a loading image..like loading....loading..... before the content loads..
because when i click one of those div then it is loaded into homefeed container perfectly but it is taking some time so i just want to show user some loading image to keep them engaged
any guess how to achieve it now?
thank you.
Try this: $(".homefeed").prepend(response); change to $(".homefeed").html(response)
$("#info").click(function (e) {
$("#loadimg").show();
jQuery.ajax({
type: "POST",
url: "newinfo.php",
dataType:"text",
cache: true,
success:function(response){
$(".homefeed").html(response);
$("#loadimg").hide();
},
});
});
You can use jquery blockUI plugin. jquery blockUI
Use the .beforeSend option in the jQuery AJAX call. Note, that this only works if your AJAX call is asynchronous. If you call it using synchronous, it won't do any animations/queries/callbacks (as jQ is busy blocking everything until your call comes back).
$.ajax({
url: "http://myurl.dot.com.jpeg.image.file.chmtl.php.asp.cfm",
async:false,
cache: false,
beforeSend: function( xhr ) {
// do stuff here to do the 'loading' animation
// (show a dialog, reveal a spinner, etc)
},
done: function(data){
//process response here
}
})
http://api.jquery.com/jquery.ajax/

One code to turn all forms into AJAX forms?

So I use the following code to manipulate my 'login' form so that it submits it, to the url of action="" and the data responded goes into id specified by target="". The submit method is specified by method=""
I like this. It's neat. But I was wondering if there was a way of having a script that meant that all forms were submitted through Jquery, without having to re-write this code for every form every time. That's just messy.
Much appreciated!
<script type="text/javascript">
$(document).ready(function(){
$("#login").submit(function(){
var thistarget = this.target;
$(thistarget).html('Submitting...');
jQuery.ajax({
data: $(this).serialize(),
url: this.action,
type: this.method,
error: function() {
$(thistarget).html("Form failed to submit");
},
success: function(results) {
$(thistarget).html(results);
}
})
return false;
}
);
});
</script>
Sure, just replace "#login" with "form". It will then affect all forms that currently exist on the page (but not future forms).
$("#login").submit(function(){...
For future forms AND current forms, you would need event delegation.
$(document).on("submit","form",function(){...
If I were you I'd use the $.post method of Jquery. http://api.jquery.com/jQuery.post/
But answering your question and as Kevin B said: change #login by form

Display image while running POST

I have this code that I use to POST without reloading the page, but I wonder how I can add that in the script being executed display an image. example loader.gif
Thanks for your help.
<script language="javascript" src="jquery-1.6.4.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});
$('#form, #fat, #form').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
}
})
return false;
});
})
Not sure if I understand, but it seems you're quite near to it
// #loading could be an img tag pointing to loader.gif or a div containing the img
$('#loading').ajaxStart(function() {
$(this).show();
$('#result').hide();
}).ajaxStop(function() {
$(this).hide();
$('#result').fadeIn('slow');
});
Use JQuery to add the image to the page. Generally this is added close by the button the user clicks to start the AJAX request. This allows the user to see that something is happening in the background while your scripts run.
Alternatively, since your script is being run on document.ready, you could have the image from the get-go and then remove it once the ajax call completes.
put the loader in a hidden div (display:none) you can then use
$('#div').show();
before the ajax request and then hide it again in the success callback:
$('#div').hide();
at the first line of submit function:
$('#loadingImg').show();
and at the first line of callback success function:
$('#loadingImg').hide();

How to select parent div of a form in JQuery?

here is what i got
<div id="right">
<from id="test">
<input type="submit">
</form>
</div>
and a lil jquery
$(document).ready(function(){
$('form').submit(function()
{
$(this).parent().html('<h1>1</h1>');
});
});
you can play with that here,
and by clicking on submit button it should put <h1>1</h1> in div#right but it don't !
Cause this is a form in this case but it works with button label or any thing else and I think that is because form is not a DOM node.
So how can I select the parent of a form, or in other words how can i select the Div that contents the form ?
Update: as it was a part of an ajax call i wanted to break it down and find the problem
but i had made a typo which cost me an hour or so, but the problem with ajax was that you $(this) inside success: is not the form any more so i did like this
`$('form').submit(function(){
form = $(this);// I set the form to a varible !!
$.ajax({
type: "POST", url: "ajax.php", data: $(this).serialize(),
success: function(data){
$(form).parent().html(data); // I used the varible i set to form before!
}});`
anyways, how can i mark this question as solved ?!
As Chowlett says, use form rather than from.
That code will then work, because the $(this) inside the submit function will select the form element, the parent of which is is the #right div.
You could use .parent('div') to make sure you select a div, and not anything else.
as it was a part of an ajax call i wanted to break it down and find the problem but i had made a typo which cost me an hour or so, but the problem with ajax was that $(this) inside success: is not the form any more so i did like this
$('form').submit(function(){
form = $(this);// I set the form to a varible !!
$.ajax({
type: "POST", url: "ajax.php", data: $(this).serialize(),
success: function(data){
$(form).parent().html(data); // I used the varible i set to form before!
}});

Categories

Resources