Ajax Loader on click - コードでエラーが発生しました

ボタンをクリックしてAjax Loading Gifを表示してフォームを送信する際のアドバイスに従ってきましたが、コードが正常に動作していないようです。Ajax Loader on click - コードでエラーが発生しました

大変助かりました。

<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>

出典

2017-12-07 Matt - Salusa Community

をあなたは、AJAX経由でフォームをPOST PHPファイルにエラーがあるはずです。あなたが行うことができるのは、AJAX成功関数の後に結果をログに記録し、応答からエラーがないかどうかを確認することです。 – Vasileios

フォームのサブミットのデフォルト動作を防止しますか？ –

[$ .ajaxが実行されている間に画像を表示する]の可能な複製（https://stackoverflow.com/questions/4684722/show-loading-image-while-ajax-is-performed） – sSD

あなたのAjaxリクエストにエラーがある場合、またはjqueryに必要なスクリプトが含まれていない場合、コードは機能しません。あなたは上記のやったことに基づいて、私は、実施例を抱えている、あなたの参考のためにそれを持っている：

<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>

出典

2017-12-07 14:52:04 BharathRao

Ajax Loader on click - コードでエラーが発生しました

答えて

関連する問題