Crafty Mc
Reputation: 57
How to show loading.gif on submit button and hide after load?
I'm wondering if anyone could help. I'm trying to add a loading.gif to a submit button then make it hide after the content is submitted. Here's the template for the page,
<div class="userpro userpro-users userpro-<?php echo $i; ?> userpro-<?php echo $layout; ?>" <?php userpro_args_to_data( $args ); ?>>
<div class="title"><?php
echo userpro_userwall_get_option( 'title' );
?>
</div>
</div>
<div id="loading" style="display:none; text-align: center;"><img src="http://stolenmx.com/wp- content/themes/load.gif" width="40px" height="40px" alt="Please Wait" /></div>
<div class="textarea"><textarea placeholder="<?php _e('Update Status...','userpro-userwall');?>" id=userpost name="userpost"cols="50" rows="2" style="border: 1px solid #ccc;border-radius: 5px;width: 100%;"></textarea></div>
<div class="buttonpost"><button id="but1" type="submit" name="Post_Now" value="Post Now" title=" <?php _e('Add to Wall','userpro-userwall'); ?>" onclick="user_post_data('userpost',<?php echo get_current_user_id();?>); $('#loading').show();"><i class="fa fa-send fa-fw"></i><b><?php _e('Add to Wall','userpro-userwall');?></b></button></div>
<div class="upload"><button id="but2" class=userwall_upload data-filetype = 'photo' type="submit" name="upload_image" value="upload" data-allowed_extensions=jpg,png,jpeg,gif title="<? php _e('Upload','userpro-userwall'); ?>"><i class="fa fa-image fa-fw"></i> <b><?php _e('Add Photos','userpro-userwall');?></b></button></div>
<div id="userwalldata">
<?php
$args = array(
'posts_per_page' => userpro_userwall_get_option( 'totalpost' ),
'order' => 'DESC',
'include' => '',
'exclude' => '',
'meta_key' => '',
'meta_value' => '',
'post_type' => 'userpro_userwall',
'post_mime_type' => '',
'post_parent' => '',
'post_status' => 'publish',
'suppress_filters' => true );
$postslist = get_posts( $args );
foreach($postslist as $post)
{
global $userpro;
$user_id = get_post_meta( $post->ID,'user_id');
?>
<div class="userwall" id=<?php echo $post->ID?>>
<?php if($user_id[0]==get_current_user_id()) {?>
<div class="userwall_delete_post">
<button type="submit" name="delete" value="delete" title="<?php _e('Delete','userpro-userwall'); ?>" onclick="userwall_delete_post(<?php echo $post->ID;?>);"><i class="fa fa-trash fa-fw"></i> </button>
</div>
<?php }?>
<div class="userwall-post-content-img" data-key="profilepicture"><a href="<?php echo $userpro- >permalink($user_id[0]); ?>" title="<?php _e('View Profile','userpro'); ?>" ><?php echo get_avatar( $user_id[0], "60" ); ?> </a></div>
<div class="userwall-post-content">
<div class="displayname"><a href="<?php echo $userpro->permalink($user_id[0]); ?>"><? php echo userpro_profile_data('display_name', $user_id[0]); ?></a>
<?php $timestamp = strtotime($post->post_date);
$new_date = date('d-M-Y h:i', $timestamp);?>
<div class="post-date"><?php echo "Posted On ".$new_date;?></div> </div>
<br>
<br>
<?php
if($post->post_title=="imgpost")
echo '<img src="'.$post->post_content.'" width="auto" style="-moz-user-select: none;
border-radius: 10px;max-width:99%">';
else
{
echo $post->post_content;
}
?>
</div>
<div class="userwall-comment-data-<?php echo $post->ID;?>" id="userwall-comment" >
<?php
$comments = get_post_meta($post->ID,'user_comment');
foreach($comments as $comment)
{
?>
<div class="userwall_comment_data" id="<?php echo $i ?>"><?php
if($comment['comment_userid']==get_current_user_id()) {
?><div class=userwall_delete_comment>
<button type="submit" name="delete" value="delete" title="<?php _e('Delete','userpro- userwall'); ?>" onclick="userwall_delete_comment('<?php echo $post->ID;?>','<?php echo $comment['comment_content'];?>',this);"><i class="fa fa-trash fa-fw-3"></i> </button></div>
<?php
}?><div class="userwall-comment-content-img" data-key="profilepicture"><a href="<?php echo $userpro->permalink($comment['comment_userid']); ?>" title="<?php _e('View Profile','userpro'); ?>" > <?php echo get_avatar( $comment['comment_userid'], "40" ); ?> </a></div>
<div class="userwall-post-content"><div class="displayname"><a href="<?php echo $userpro- >permalink($comment['comment_userid']); ?>"><?php echo userpro_profile_data('display_name', $comment['comment_userid']); ?></a></div>
<?php
$commenttimestamp = strtotime($comment['comment_date']);
$commenttime = date('d-M-Y', $commenttimestamp);?>
<div class="post-date"><?php echo "Commented On ".$commenttime;?></div><?php
echo "<br><p>".$comment['comment_content']."</p>";
echo "</div></div>";
}
?>
</div>
<div class="commenttext">
<a href="<?php echo $userpro->permalink(get_current_user_id()); ?>" title="<?php _e('View Profile','userpro'); ?>"><?php echo get_avatar( get_current_user_id(), "40" ); ?></a>
<textarea id=userwall-comment-<?php echo $post->ID;?> placeholder="<?php _e('Write your reply and hit enter...','userpro-userwall');?>" onkeypress="user_post_comment('userwall-comment',<?php echo get_current_user_id();?>,<?php echo $post->ID;?>,event);" name="userwall-comment"cols="40" rows="1" style="border: 1px solid #ccc;+border-radius: 6px;margin: 0px 0px 0px -5px;max- width:100%;width:445px;height:46px;margin-top: 6px;"></textarea>
</div>
</div>
<?php
}
?>
</div>
<?php
global $wp_query,$wpdb;
$curauth = $wp_query->get_queried_object();
$post_count = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_type = 'userpro_userwall' AND post_status = 'publish'");
if($post_count>=userpro_userwall_get_option( 'totalpost' ))
{
?>
<div class="socialwall-load-more" id="socialwall-load-more" data-max-pages="<?php echo userpro_userwall_get_option( 'totalpost' ) ?>"><span><?php _e('Load More','userpro-userwall')?> </span></div>
<?php }?>
Here's what I have so far,
<div id="loading" style="display:none; text-align: center;"><img src="http://stolenmx.com/wp- content/themes/load.gif" width="40px" height="40px" alt="Please Wait" /></div>
<div class="buttonpost"><button id="but1" type="submit" name="Post_Now" value="Post Now" title=" <?php _e('Add to Wall','userpro-userwall'); ?>" onclick="user_post_data('userpost',<?php echo get_current_user_id();?>); $('#loading').show();">
The loading.gif loads after entering content and pressing the button but it never hides after the content loads. Could anyone help out with a solution? Thanks
UPDATE:
Front end html,
<div class="post">
<h1 class="single dotted">Social Wall</h1>
<div class="userpro userpro-users userpro-607 userpro-float" data-modal_profile_saved="Your profile has been saved!" data-template="socialwall" data- max_width="480px" data-uploads_dir="http://stolenmx.com/wp-content/uploads/userpro/" data- default_avatar_male="http://stolenmx.com/wp-content/plugins/userpro/img/default_avatar_male.jpg" data-default_avatar_female="http://stolenmx.com/wp- content/plugins/userpro/img/default_avatar_female.jpg" data-layout="float" data-margin_top="0" data- margin_bottom="30px" data-align="center" data-skin="blue" data-required_text="This field is required" data-password_too_short="Your password is too short" data-passwords_do_not_match="Passwords do not match" data-password_not_strong="Password is not strong enough" data-keep_one_section_open="0" data- allow_sections="1" data-permalink="http://stolenmx.com/social-wall/" data-field_icons="1" data- profile_thumb_size="80" data-register_heading="Register an Account" data-register_side="Already a member?" data-register_side_action="login" data-register_button_action="login" data- register_button_primary="Register" data-register_button_secondary="Login" data- register_group="default" data-register_redirect="0" data-type="0" data-login_heading="Login" data- login_side="Forgot your password?" data-login_side_action="reset" data-login_button_action="register" data-login_button_primary="Login" data-login_button_secondary="Create an Account" data- login_group="default" data-login_redirect="0" data-rememberme="true" data-delete_heading="Delete Profile" data-delete_side="Undo, back to profile" data-delete_side_action="view" data- delete_button_action="view" data-delete_button_primary="Confirm Deletion" data- delete_button_secondary="Back to Profile" data-delete_group="default" data-reset_heading="Reset Password" data-reset_side="Back to Login" data-reset_side_action="login" data- reset_button_action="change" data-reset_button_primary="Request Secret Key" data- reset_button_secondary="Change your Password" data-reset_group="default" data-change_heading="Change your Password" data-change_side="Request New Key" data-change_side_action="reset" data- change_button_action="reset" data-change_button_primary="Change my Password" data- change_button_secondary="Do not have a secret key?" data-change_group="default" data- list_heading="Latest Members" data-list_per_page="5" data-list_sortby="registered" data- list_order="desc" data-list_users="0" data-list_group="default" data-list_thumb="50" data- list_showthumb="1" data-list_showsocial="1" data-list_showbio="0" data-list_verified="0" data- list_relation="or" data-online_heading="Who is online now" data-online_thumb="30" data-online_showthumb="1" data-online_showsocial="0" data-online_showbio="0" data-online_mini="1" data- online_mode="vertical" data-edit_button_primary="Save Changes" data-edit_group="default" data-view_group="default" data-social_target="_blank" data-social_group="default" data-card_width="250px" data-card_img_width="250" data-card_showbio="1" data-card_showsocial="1" data-link_target="_blank" data-error_heading="An error has occured" data-memberlist_table="0" data-memberlist_table_columns="user_id,picture,name,country,gender,role,email_user,message_user" data-show_on_mobile="picture,name,country,email_user,message_user" data-memberlist_v2="1" data-memberlist_v2_pic_size="86" data-memberlist_v2_fields="age,gender,country" data-memberlist_v2_bio="1" data-memberlist_v2_showbadges="1" data-memberlist_v2_showname="1" data-memberlist_v2_showsocial="1" data-memberlist_pic_size="120" data-memberlist_pic_topspace="15" data-memberlist_pic_sidespace="30" data-memberlist_pic_rounded="1" data-memberlist_width="100%" data-memberlist_paginate="1" data-memberlist_paginate_top="1" data-memberlist_paginate_bottom="1" data-memberlist_show_name="1" data-memberlist_popup_view="0" data-memberlist_withavatar="0" data-memberlist_verified="0" data-memberlist_filters="0" data-memberlist_default_search="1" data-per_page="12" data-sortby="registered" data-order="desc" data-relation="and" data-search="1" data-exclude="0" data-show_social="1" data-registration_closed_side="Existing member? login" data-registration_closed_side_action="login" data-facebook_redirect="profile" data-logout_redirect="0" data-post_paginate="1" data-postsbyuser_num="12" data-postsbyuser_types="post" data-postsbyuser_mode="grid" data-postsbyuser_thumb="50" data-postsbyuser_showthumb="1" data-postsbyuser_taxonomy="category" data-postsbyuser_category="0" data-following_per_page="4" data-following_paginate="1" data-followers_per_page="4" data-followers_paginate="1" data-publish_heading="Add a New Post" data-publish_button_primary="Publish" data-history_public="0" data-history_title="Points History" data-history_type="mycred_default" data-history_number="10" data-badges_public="0" data-badges_title="Earned Badges" data-following_heading="Following" data-followers_heading="Followers" data-activity_heading="Recent Activity" data-activity_all="0" data-activity_per_page="10" data-activity_side="refresh" data-activity_user="0" data-emd_filters="1" data-emd_thumb="200" data-emd_social="1" data-emd_bio="1" data-emd_fields="first_name,last_name,gender,country" data-emd_layout="masonry" data-emd_per_page="20" data-emd_col_width="22%" data-emd_col_margin="2%" data-emd_accountstatus="Search by account status" data-emd_photopreference="Photo Preference" data-emd_country="Search by Country,dropdown" data-emd_gender="Gender,radio" data-emd_paginate="1" data-emd_paginate_top="1" data-i="607">
<div class="title">Social Wall </div>
</div>
<div id="loading" style="text-align: center;"><img src="http://stolenmx.com/wp- content/themes/load.gif" width="40px" height="40px" alt="Please Wait"></div>
<div class="textarea"><textarea placeholder="Update Status..." id="userpost" name="userpost" cols="50" rows="2" style="border: 1px solid #ccc;border-radius: 5px;width: 100%;"></textarea></div>
<div class="buttonpost"><button id="but1" type="submit" name="Post_Now" value="Post Now" title="Add to Wall" onclick="user_post_data('userpost',1); $('#loading').show();"><i class="fa fa- send fa-fw"></i><b>Add to Wall</b></button></div>
<div class="upload"><button id="but2" class="userwall_upload ajax-file-upload" data- filetype="photo" type="submit" name="upload_image" value="upload" data- allowed_extensions="jpg,png,jpeg,gif" title="Upload"><i class="fa fa-image fa-fw"></i> <b>Add Photos</b></button></div>
<div id="userwalldata"><div class="userwall" id="291"><div class="userwall_delete_post">
<button type="submit" name="delete" value="delete" onclick="userwall_delete_post( 291);"><i class="fa fa-trash fa-fw"></i> </button>
</div><div class="userwall-post-content-img" data-key="profilepicture"><a href="http://stolenmx.com/profile/Admin/" title="_e('View Profile','userpro')"> <img src="http://stolenmx.com/wp-content/uploads/bfi_thumb/5491a01f194c6- 1p9lseef4jgdq3ff9ccn4ooisj0hpjvp3pg9zukt8e6c.jpg" width="60" height="60" alt="" class="modified avatar"></a> </div>
<div class="userwall-post-content"><div class="displayname"><a href="http://stolenmx.com/profile/Admin/"> Luke Day</a> <div class="post-date">Posted On 20-Dec-2014 10:14</div></div><br><br>test</div> <div class="userwall-comment-data-291" id="userwall-comment"> </div><div class="commenttext"> <a href="http://stolenmx.com/profile/Admin/" title="_e('View Profile','userpro')"> <img src="http://stolenmx.com/wp-content/uploads/bfi_thumb/5491a01f194c6- 1p9lseef3v39xf7c2o2dtaexxa9pgyoktbse8fkrnxk4.jpg" width="40" height="40" alt="" class="modified avatar"></a><a href="http://stolenmx.com/profile/Admin/"> Luke Day</a>
<textarea id="userwall-comment-291" onkeypress="user_post_comment('userwall- comment',1,291,event);" name="userwall-comment" cols="40" rows="1" style="border:solid 1px black;max- width: 100%;"></textarea></div></div>
</div>
<style type="text/css">
div.userpro-awsm-pic {
margin-left: -48px;
top: -48px;
}
div.userpro-awsm-pic img {
width: 86px;
height: 86px;
}
div.userpro,
div.emd-main,
div.emd-filters,
div.userpro-search-results,
div.userpro-label label,
div.userpro input,
div.userpro textarea,
div.userpro select,
div.userpro-field textarea.userpro_editor,
div.userpro-msg-overlay-content,
div.userpro-msg-overlay-content input,
div.userpro-msg-overlay-content textarea,
div.userpro-notifier
{
font-family: Roboto;
}
div.userpro-607 {
max-width: 480px;
margin-left: auto;margin-right: auto;
margin-bottom: 30px;
}
div.userpro-607.userpro-nostyle {
max-width: 250px;
}
div.userpro-607.userpro-users {
max-width: 100% !important;
}
div.userpro-607 div.userpro-user {
margin-top: 15px;
margin-left: 30px;
margin-right: 30px;
}
div.userpro-607 div.userpro-user a.userpro-user-img {
width: 120px;
height: 120px;
}
div.userpro-607 div.userpro-user a.userpro-user-img span {
top: -120px;
line-height: 120px;
}
div.userpro-607 div.userpro-user div.userpro-user-link {
width: 120px;
}
div.userpro-607 div.userpro-user a.userpro-user-img,
div.userpro-607 div.userpro-user a.userpro-user-img span {
border-radius: 999px !important;
}
div.userpro-607 div.userpro-list-item-i {
width: 50px;
height: 50px;
}
div.userpro-607 div.userpro-online-item-i {
width: 30px;
height: 30px;
}
div.userpro-607 div.userpro-online-item {
border-bottom: 0px !important;
padding: 10px 0 0 0;
}
div.userpro-607 div.userpro-online-item img.userpro-profile-badge,
div.userpro-607 div.userpro-online-item img.userpro-profile-badge-right {
max-width: 14px !important;
max-height: 14px !important;
}
div.userpro-607 div.userpro-profile-img {
width: 80px;
height: 80px;
}
div.emd-user {
width: 22%;
margin-left: 2% !important;
}
</style>
<div class="prdetails">
</p></div>
</div>
Upvotes: 1
Views: 9405
Answers (3)
James Hibbard
Reputation: 17775
When the user clicks the button, you could check for the presence the textarea inside of the div (which would indicate that the content has loaded). If it's not there, you could repeat that check every half a second, for a period of ten seconds (for example). As soon as the content shows up, you can hide your spinner. If it doesn't show up after that, then presumably something has gone wrong.
Something like:
var i;
function isPresent(){
if($(selector).length){
hideSpinner();
clearInterval(i);
}
}
function hideSpinner(){
$(spinner).remove();
}
$("button").on("click", function(){
this.disabled = true;
if(isPresent()){
hideSpinner();
} else {
i = setInterval(isPresent, 500);
setTimeOut(function(){ clearInterval(i); }, 10000);
}
});
Upvotes: 0
user2560539
Reputation:
A check for the content length of that particular div could help you. But i don't know if it shows previous posts of the user. then you should compare old content length before the button click and the new one after the button click.
var content = $('.userwall-post-content').html();
var len1 = content.length;
$('#but1').on('touchstart click',function() {
$('#loading').show();
var len2 = content.length;
if (len2.length > len1.length) {
$('#loading').hide();
}
});
Upvotes: 0
nilesh suryavanshi
Reputation: 408
i have one solution if your using ajax...
if you are doing something like calling ajax
then right on button click
this code
$('#loading').show(); or $('#loading').html('<img src="images/loading.gif">'); loading...');
and after competing process getting result from ajax hide that div
$('#loading').hide(); or $('#loading').html();
or
if you are not using ajax then on your button click your calling user_post_data function that returning data so before this call
$('#loading').show();
and after getting data from function hide this div
Upvotes: 1
Related Questions
- Show loading GIF when submitting form
- Show Loading Gif On Click Submit Button
- Show loading gif after clicking form submit using jQuery
- Show / Hide loading gif
- How to add a loading gif when submitting a form
- How to show loading gif while page hasn't fully loaded
- How to show a loading gif mean while a submit form is being executed JQuery
- Show/Hide Loading GIF Can't get it to work
- Adding a loading gif when submitting form?
- showing loading gif file while page gets loaded using jquery