ajaxを使用してデータベースにデータを挿入/更新すると、ページを再ロードできない

Question

AJAXを使用してデータベースにデータを挿入/更新しています。ページを再ロードすることはできません。ここで、私の問題は、更新後にページリロード値のない値が下に表示されることです。詳細については、添付のフォームのスクリーンショットを参照してください。

フォーム：

<div class="panel panel-default" > 
    <div class="panel-heading row" id="first"> 
     <div class="col-md-4 col-sm-4 col-xs-4">First Name</div> 
**here i am fetching values from database** 
     <div class="col-md-4 col-sm-4 col-xs-4 ellipsis"><?php echo $row->first_name; ?></div> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
      <div class="col-md-4 col-sm-4 col-xs-4 profile-edit"> <i class="fa fa-pencil"></i> Edit</div> 
     </a> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      <div class="row"> 
       <div class="col-md-7 col-md-offset-2 text-center"> 
        <label class="col-md-4">First Name</label>    
        <div class="col-md-8"> 
         <input type="hidden" name="id" value="<?php echo $row->id; ?>" /> 
         <input type ="text" name="first_name" id="first_name" class="form-control" value="<?php echo $row->first_name; ?>"/></br> 
         <input type="submit" value="Save" class="btn btn-success" style="width:70px;"> 
         <!--           <button type="submit" class="btn btn-success" name="" id="">Save</button>--> 
         <button type="button" data-target="#collapseOne" data-toggle="collapse" class="btn btn-warning cancel-name">Cancel</button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

スクリプト：

Answer 1

はどこに名前が表示され、div要素にIDを追加します。これは、エラーを下回っている

<script> 
    $(document).ready(function() { 
     $('#data_form').on('submit', function (e) { 
      var form_data = $(this).serialize(); 
      $.ajax({ 
       type: "POST", 
       url: '<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_basicinformation_edit', 
       data: form_data, 
       success: function (data) 
       { 

        **here i want to display the database values first name** 

       }, 
       error: function() 
       { 
        alert('failed'); 
       } 
      }); 
      e.preventDefault(); 
     }); 

    }); 
</script> 

それをデータベースからフェッチした後

その後

<div class="panel panel-default" > 
               <div class="panel-heading row" id="first"> 
                <div class="col-md-4 col-sm-4 col-xs-4">First Name</div> 
**here i am fetching values from database**             <div class="col-md-4 col-sm-4 col-xs-4 ellipsis" id="name_div"><?php echo $row->first_name; ?></div> 
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
                 <div class="col-md-4 col-sm-4 col-xs-4 profile-edit"> <i class="fa fa-pencil"></i> Edit</div> 
                </a> 
               </div> 
               <div id="collapseOne" class="panel-collapse collapse"> 
                <div class="panel-body"> 
                 <div class="row"> 
                  <div class="col-md-7 col-md-offset-2 text-center"> 
                   <label class="col-md-4">First Name</label>    
                   <div class="col-md-8"> 
                    <input type="hidden" name="id" value="<?php echo $row->id; ?>" /> 
                    <input type ="text" name="first_name" id="first_name" class="form-control" value="<?php echo $row->first_name; ?>"/></br> 
                    <input type="submit" value="Save" class="btn btn-success" style="width:70px;"> 
                    <!--           <button type="submit" class="btn btn-success" name="" id="">Save</button>--> 
                    <button type="button" data-target="#collapseOne" data-toggle="collapse" class="btn btn-warning cancel-name">Cancel</button> 
                   </div> 
                  </div> 
                 </div> 
                </div> 
               </div> 
              </div> 

、あなたはあなたがしたいクラスやIDを定義する必要がAjaxのポスト要求

<script> 
     $(document).ready(function() { 

      $('#data_form').on('submit', function (e) { 

       var form_data = $(this).serialize(); 

       $.ajax({ 
        type: "POST", 
        url: '<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_basicinformation_edit', 
        data: form_data, 
        success: function (data) 
        { 

         $('#name_div').text($("#first_name").val()); 

        }, 
        error: function() 
        { 
         alert('failed'); 
        } 
       }); 

       e.preventDefault(); 
      }); 

     }); 
    </script> 

Answer 2

の成功時に最初の名前を表示しているdiv要素のテキストを設定するために使用jqueryのshow nameとAjaxの成功後にこのIDまたはクラスを呼び出してデータを表示します。このよう ：

フォーム：

<div class="panel panel-default" > 
               <div class="panel-heading row" id="first"> 
                <div class="col-md-4 col-sm-4 col-xs-4">First Name</div> 
<div id="fname"> </div> 
**here i am fetching values from database**             <div class="col-md-4 col-sm-4 col-xs-4 ellipsis"><?php echo $row->first_name; ?></div> 
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
                 <div class="col-md-4 col-sm-4 col-xs-4 profile-edit"> <i class="fa fa-pencil"></i> Edit</div> 
                </a> 
               </div> 
               <div id="collapseOne" class="panel-collapse collapse"> 
                <div class="panel-body"> 
                 <div class="row"> 
                  <div class="col-md-7 col-md-offset-2 text-center"> 
                   <label class="col-md-4">First Name</label>    
                   <div class="col-md-8"> 
                    <input type="hidden" name="id" value="<?php echo $row->id; ?>" /> 
                    <input type ="text" name="first_name" id="first_name" class="form-control" value="<?php echo $row->first_name; ?>"/></br> 
                    <input type="submit" value="Save" class="btn btn-success" style="width:70px;"> 
                    <!--           <button type="submit" class="btn btn-success" name="" id="">Save</button>--> 
                    <button type="button" data-target="#collapseOne" data-toggle="collapse" class="btn btn-warning cancel-name">Cancel</button> 
                   </div> 
                  </div> 
                 </div> 
                </div> 
               </div> 
              </div> 

//最後の名前はここから始まり

<div class="panel panel-default"> 
              <div class="panel-heading row"> 
               <div class="col-md-4 col-sm-4 col-xs-4">Last Name</div> 
<div id="lname"> </div> 
               <div class="col-md-4 col-sm-4 col-xs-4 ellipsis"><?php echo $row->last_name; ?></div> 
               <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
                <div class="col-md-4 col-sm-4 col-xs-4 profile-edit"> <i class="fa fa-pencil"></i> Edit</div> 
               </a> 
              </div> 
              <div id="collapseTwo" class="panel-collapse collapse"> 
               <div class="panel-body"> 
                <div class="row"> 
                 <div class="col-md-7 col-md-offset-2 text-center"> 

                  <label class="col-md-4">Last Name</label>    
                  <div class="col-md-8"> 
                   <input type="hidden" name="last_name" id="last_name" value="<?php echo $row->last_name; ?>" /> 
                   <input type ="text" name="last_name" id="last_name" class="form-control" value="<?php echo $row->last_name; ?>"/></br> 
                   <input type="submit" value="Save" class="btn btn-success" style="width:70px;"> 
                   <!--           <button type="button" class="btn btn-success">Save</button>--> 
                   <button type="button" data-target="#collapseTwo" data-toggle="collapse" class="btn btn-warning cancel-name">Cancel</button> 
                  </div> 
                 </div> 
                </div> 
               </div> 
              </div> 
             </div> 

スクリプト：

<script> 


    $(document).ready(function() { 

       $('#data_form').on('submit', function (e) { 

        var form_data = $(this).serialize(); 

        $.ajax({ 
         type: "POST", 
         url: '<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_basicinformation_edit', 
         data: form_data, 
         success: function (data) 
         { 
         $('#fname').html(data.first_name);// data here fname 
         $('#lname').html(data.last_name); 


          **here i want to display the database values first name** 

         }, 
         error: function() 
         { 
          alert('failed'); 
         } 
        }); 

        e.preventDefault(); 
       }); 

      }); 
     </script>