2017-05-13 9 views
0

私はPHP + Mysql + Jquery編集フォームを使っています。フィールドを編集してデータベースに保存した後、jQueryがページ全体を更新せずにフィールドに新しいデータを表示する方法を知りたかったのです。私は現在使用しています:Jqueryでフィールドを更新するには

$(document).ready(function (e) { 

    $('form[name=form_edit]').on('submit',(function(e) { 
     e.preventDefault(); 

    var formData = new FormData(this); 
    var form = $(this); 
     var conte = $('#form-edit'); 


     $.ajax({ 
      type:'POST', 
      url: '<?php echo ROOT_URL ?>/sites/crud-sites', 
      data:formData, 
      cache:false, 
      contentType: false, 
      processData: false, 
      success:function(data){ 

      location.reload(); 





      } 
     }); 
    })); 

}); 

location.reload();それは動作しますが、ページ全体をリロードします。私はフィールドをリロードするだけでした。

まだそれを行う方法はまだ分かりませんでした。私のフォームは次のようになります: 私が更新したい主なフィールドは画像フィールドです。

<form action="" method="post" enctype="multipart/form-data" id="form-edit" name="form_edit" class="form-horizontal form-bordered" onsubmit="return false;"> 
             <div class="form-group"> 
              <label class="col-md-3 control-label">ID</label> 
              <div class="col-md-9"> 
               <input type='text' name="id" value="<?php echo $sites['id'] ?>" readonly="readonly"> 
              </div> 
             </div> 

             <div class="form-group"> 
              <label class="col-md-3 control-label" for="example-text-input">Nome Site</label> 
              <div class="col-md-9"> 
               <input type="text" id="example-text-input" name="name" class="form-control" value="<?php echo $sites['name'] ?>"> 
              </div> 
             </div> 

            <div class="form-group"> 

             <div class="col-xs-12"> 
              <textarea id="desc" rows="10" cols="80" name="desc"><?php echo $sites['site_desc']?></textarea> 
             </div> 
            </div> 

             <div class="form-group"> 
              <label class="col-md-3 control-label" for="example-email-input">Link Demo</label> 
              <div class="col-md-9"> 
               <input type="url" id="example-email-input" name="linkdemo" class="form-control" value="<?php echo $sites['linkdemo'] ?>"> 


              </div> 
             </div> 
        <div class="form-group"> 
              <label class="col-md-3 control-label" for="linkmember">Link Member</label> 
              <div class="col-md-9"> 
               <input type="text" id="example-email-input" name="linkmember" class="form-control" value="<?php echo $sites['linkmember'] ?>"> 

               <span class="help-block">Link da area de membros</span> 
              </div> 
             </div> 


        <div class="form-group"> 
              <label class="col-md-3 control-label">Novo</label> 
              <div class="col-md-9"> 
               <label class="checkbox-inline" for="example-inline-checkbox1"> 
                <input type="checkbox" id="checkbox-isnovo" name="isnovo" value="<?php echo ($sites['isnovo']==1)?'true':'false'?>" <?php echo ($sites['isnovo']==1)?'checked="checked"':''?>> Sim 
               </label> 
             </div> 
             </div> 


                <div class="form-group"> 
               <label class="col-md-3 control-label">Categorias</label> 
               <div class="col-md-9"> 
                <input type="text" id="example-tags" name="categorie" class="input-tags" value="<?php echo $sites['categorie'];?>"> 
               </div> 
              </div> 


        <div class="form-group"> 
               <label class="col-md-3 control-label" for="val_digits">Ordem <span class="text-danger">*</span></label> 
               <div class="col-md-9"> 
                <div class="input-group"> 
                 <input type="text" id="val_digits" name="order" class="form-control valid" value="<?php echo $sites['sorder'] ?>" aria-required="true" aria-describedby="val_digits-error" aria-invalid="false"> 
                 <span class="input-group-addon"><i class="gi gi-asterisk"></i></span> 
                </div> 
               </div> 
              </div> 
        <input type='hidden' name='action' value='edit'> 

        <div class="block"> 
        <div class="block-title"> 
             <h2><strong>Images</strong> Elements</h2> 
             </div> 
         <div class="form-group"> 
              <label class="col-md-3 control-label" for="example-text-input">Folder</label> 
              <div class="col-md-9"> 
               <input type="text" id="example-text-input" name="folder" class="form-control" value="<?php echo $sites['folder'] ?>"> 
              </div> 
             </div> 
        <label class="col-md-3 control-label" for="example-file-input">Capa</label> 
             <div class="form-group"> 

              <div class="col-md-9"> 

         <img id='screen' src="<?php echo !empty($sites['folder'])? "../images/{$sites['folder']}/{$sites['screen']}" : "../images/sem-screen.jpg" ?>" height="195" width="320"> <input type="file" id="example-file-input" name="screen" ></br> 
         <label for="example-file-input">Thumb 01</label> </br> 
         <img src="<?php echo !empty($sites['folder'])? "../images/{$sites['folder']}/{$sites['thumb1']}" : "../images/sem-thumb.jpg" ?>"> <input type="file" id="example-file-input" name="thumb1"> </br> 
         <label for="example-file-input">Thumb 02</label> </br> 
         <img src="<?php echo !empty($sites['folder'])? "../images/{$sites['folder']}/{$sites['thumb2']}" : "../images/sem-thumb.jpg" ?>"> <input type="file" id="example-file-input" name="thumb2"> </br> 
         <label for="example-file-input">Thumb 03</label> </br> 
         <img src="<?php echo !empty($sites['folder'])? "../images/{$sites['folder']}/{$sites['thumb3']}" : "../images/sem-thumb.jpg" ?>"> <input type="file" id="example-file-input" name="thumb3"> </br> 
         <label for="example-file-input">Thumb 04</label> </br> 
         <img src="<?php echo !empty($sites['folder'])? "../images/{$sites['folder']}/{$sites['thumb4']}" : "../images/sem-thumb.jpg" ?>"> <input type="file" id="example-file-input" name="thumb4"> </br> 
         </div> 
             </div> 
        </div> 

             <div class="form-group form-actions"> 
              <div class="col-md-9 col-md-offset-3"> 
               <button type="submit" class="btn btn-primary" id="envio"><i class="fa fa-pencil"></i> Edit</button> 
               <button type="reset" class="btn btn-warning"><i class="fa fa-repeat"></i> Reset</button> 
              </div> 
             </div> 
        <script> 
       // Replace the <textarea id="editor1"> with a CKEditor 
       // instance, using default configuration. 
       CKEDITOR.replace('desc'); 

      </script> 
     </form> 

答えて

0

新しい更新データをajaxレスポンスに送信すると、値をフォームに設定できます。

+0

は、あなたは私にこれを行う方法の例を挙げてもらえますか? –

0

フィールドを編集して保存した後、データベースからデータを表示するajax関数を呼び出します。

例えば:

function show() { 
    ... show ajax data here 
} 

$(document).ready(function (e) { 
    $('form[name=form_edit]').on('submit',(function(e) { 
     e.preventDefault(); 

     var formData = new FormData(this); 
     var form = $(this); 
     var conte = $('#form-edit'); 

     $.ajax({ 
      type: 'POST', 
      url: '<?php echo ROOT_URL ?>/sites/crud-sites', 
      data: formData, 
      cache: false, 
      contentType: false, 
      processData: false, 
      success: function(data){ 
       show(); 
      } 
     }); 
    })); 
}); 
+0

値が –

+0

のエコーでデータがデータベースに取り込まれます@BrunoAndradeはデータベースからのデータを示すコードを表示します – phen0men

関連する問題