Home Ajax Loader on button click - error with code
Reply: 1

Ajax Loader on button click - error with code

Matt - Salusa Community
1#
Matt - Salusa Community Published in 2017-12-07 13:41:00Z

I've followed other advice regarding showing an Ajax Loading Gif on button click to submit a form, however I can't seem to get the code working.

Any help greatly appreciated.

    <p>
        <input type="hidden" name="job_manager_form" value="<?php echo $form; ?>" />
        <input type="hidden" name="job_id" value="<?php echo esc_attr( $job_id ); ?>" />
        <input type="hidden" name="step" value="<?php echo esc_attr( $step ); ?>" />

                    <?php if($job_id){ ?>
                    <img src="https://www.salusa.co.uk/wp-content/uploads/2017/12/ajax-loader.gif" id="img" style="display:none"/ >
                    <input type="submit" id="submitjob" name="submit_job" class="button" value="Update my service profile" />


                    <?php } else { ?>
                     <img src="https://www.salusa.co.uk/wp-content/uploads/2017/12/ajax-loader.gif" id="img" style="display:none"/ >
                    <input type="submit" id="submitjob" name="submit_job" class="button" value="Submit profile for admin approval" />
                    <?php } ?>

    </p>

<script>
                    $('#submitjob').click(function(){
                    $('#img').show();
                    $.ajax({
                    ....
                    success:function(result){
                    $('#img').hide();  //<--- hide again
}
}
</script>
BharathRao
2#
BharathRao Reply to 2017-12-07 14:52:04Z

The Code won't work if your Ajax request is having the errors or if you don't include necessary scripts for jquery. Based on what you did above, I'm having the working example, have it for your reference:

<html>

<head>
  <title>Ajax Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body>
  <input type="hidden" name="job_manager_form" value="<?php echo $form; ?>" />
  <input type="hidden" name="job_id" value="<?php echo esc_attr( $job_id ); ?>" />
  <input type="hidden" name="step" value="<?php echo esc_attr( $step ); ?>" />


  <!-- Here comes your if condition -->
  <img src="https://www.salusa.co.uk/wp-content/uploads/2017/12/ajax-loader.gif" id="img" style="display:none" />
  <input type="submit" id="submitjob" name="submit_job" class="button" value="Update my service profile" />

  <div id="content"></div>
</body>

<script>
  $('#submitjob').click(function() {
    $('#img').show();
    $.ajax({
      url: 'https://jsonplaceholder.typicode.com/posts/1',
      type: 'GET',

      error: function() {
        $('#content').html('<p>An error has occurred</p>');
      },
      dataType: 'json',
      success: function(result) {
        $('#content').html("data Received" + result);
        $('#img').hide(); //<--- hide again
      },
    });
  });
</script>
</body>

</html>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.297316 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO