javascript - Represent json from jquery ajax response into a html's table -


i create search form using ajax action. in success ajax, how can load specific div without load refresh page. this form

<?php         $properties = array('id' => 'form1');         echo form_open("", $properties);         ?>          <fieldset>             <div class="controls" id="chekboxes">                 <label class="checkbox "><input type="checkbox" name="criteria[]" id="nomorcb"/> nomor request </label>                 <input type="text" class="input-xlarge focused" id="no" name="no" placeholder="masukkan no request..."/>                  <label class="checkbox "><input type="checkbox" name="criteria[]" id="namacb"/> nama user </label>                 <input type="text" class="input-xlarge focused" id="nama" name="nama" placeholder="masukkan nama user..."/>                  <label class="checkbox "><input type="checkbox" name="criteria[]" id="departementcb" /> departement</label>                 <div class="control-group">                     <div class="controls">                         <select class="input-xlarge" id="selecterror" name="dep">                             <option value="">-- pilih departement --</option>                              <?php                             foreach ($dep $data) {                                 echo "<option value='" . $data['nama_departement'] . "'>" . $data['nama_departement'] . "</option>";                             }                             ?>                         </select>                     </div>                 </div>                  <label class="checkbox "><input type="checkbox" name="criteria[]" id="rentangcb"/> rentang waktu</label>                 <div class="controls" id="tanggal-rentang">                     <input type="text" class="input-small datepicker" id="tanggal" value="" name="tgl_awal"><span> &nbsp; &nbsp; &nbsp;s/d </span>                     <input type="text" class="input-small datepicker" id="tanggal2" value="" name="tgl_akhir">                 </div>             </div>              <div class="form-actions">                 <button type="submit" class="btn btn-primary" id="submit">cari</button>                 <button type="reset" class="btn" id="cancel">cancel</button>             </div>         </fieldset>         <?php echo form_close(); ?>

this action's code execute form. 

  public function search() {     $id_request = $this->input->post('nomor');     $nama_user = $this->input->post('nama');     $departement = $this->input->post('departement');     $awal = $this->input->post('tgl_awal');     if ($awal != "") {         $awal = $this->input->post('tgl_awal');     } else {         $awal = "2014-01-01";     }     $timestamp_awal = strtotime($awal);     $tgl_awal = date("y-m-d h:i:s", $timestamp_awal);      $akhir = $this->input->post('tgl_akhir');     if ($akhir != "") {         $akhir = $this->input->post('tgl_akhir');     } else {         $akhir = "2020-01-01";     }      $timestamp_akhir = strtotime($akhir);     $tgl_akhir = date("y-m-d h:i:s", $timestamp_akhir);      $data = $this->model_request->search($id_request, $nama_user, $departement, $tgl_awal, $tgl_akhir);      echo json_encode($data); }

and ajax jquery form above :

$('form').on('submit', function() {    var nomor = $('#no').val();    var nama = $('#nama').val();    var departement = $('#selecterror').val();    var tgl_awal = $('#tanggal').val();    var tgl_akhir = $('#tanggal2').val();     $.ajax({         url: '<?php echo base_url() . 'it_team/control_it/search' ?>',         type: 'post',         data: {nomor: nomor,                nama: nama,                departement: departement,                tgl_awal: tgl_awal,                tgl_akhir: tgl_akhir},                datatype: 'json',                success: function(obj) {                   //please give me idea                }         });      return false;

for testing, try seearch , thank god, gives me success on json this:

[{"id_request":"015","nama_user":"dzil","departement":"it","waktu_it_terima":"2015-06-19 02:51:05"}, {"id_request":"017","nama_user":"dzil","departement":"it","waktu_it_terima":"2015-06-19 13:32:46"}]

my problem is, result of search form above displaying table in same page form above. know, in tbody's table generate object on based return of json. newbie using json. table looked this

 <div class="box-content" id="things_table2">          <table class="table table-bordered table-striped table-condensed" id="table1">             <thead>                 <tr>                     <th>no.  </th>                     <th>no request</th>                     <th>nama user</th>                     <th>departement</th>                                                                 <th>tanggal request</th>                     <th>action</th>                 </tr>             </thead>                <tbody id="hasil-pencarian">                 // result showing here             </tbody>         </table>     </div>

any appriciated.

try (beware there less fields in json in table):

var data = [   {     'id_request': '015',     'nama_user': 'dzil',     'departement': 'it',     'waktu_it_terima': '2015-06-19 02:51:05'   },   {     'id_request': '017',     'nama_user': 'dzil',     'departement': 'it',     'waktu_it_terima': '2015-06-19 13:32:46'   } ];  var html = ''; (var = 0; < data.length; i++) {   var td="";   for(var key in data[i]){     td+='<td>'+data[i][key]+'</td>';    }   html+="<tr>"+td+"</tr>"; }  $('#hasil-pencarian').html(html);

Comments

Post a Comment

Popular posts from this blog

How to connect android app to App engine -

i'm trying connect app in android server i've opened on appengine. my server's name : dddd-daniel-2345 , website server : http://dddd-daniel-2345.appspot.com/ this how connect android app server in app engine: app.yaml: application: dddd-daniel-2345 version: 1 runtime: python27 api_version: 1 threadsafe: yes handlers: - url: .* script: main.app libraries: - name: webapp2 version: "2.5.2" main.py: #!/usr/bin/env python # # copyright 2007 google inc. google.appengine.api import users import webapp2 class userhandler(webapp2.requesthandler): def get(self): user = users.get_current_user() if user: greeting = ('%s,%s,%s' % (user.email(),user.user_id(),user.nickname())) else: greeting = ('not logged in') self.response.out.write(greeting) app = webapp2.wsgiapplication([('/', userhandler),], debug=true) my applications code : add manifast main....
Read more

gcc - MinGW's ld cannot perform PE operations on non PE output file -

i know there other similar questions out there, stackoverflow or not. i've researched lot this, , still didn't find single solution. i'm doing operative system side project. i've been doing in assembly, wanna join c code. test, made assembly code file (called test.asm): [bits 32] global _a section .text _a: jmp $ then made c file (called main.c): extern void a(void); int main(void) { a(); } to link, used file (called make.bat): "c:\mingw\bin\gcc.exe" -ffreestanding -c -o c.o main.c nasm -f coff -o asm.o test.asm "c:\mingw\bin\ld.exe" -ttext 0x100000 --oformat binary -o out.bin c.o asm.o pause i've been researching ages, , i'm still struggling find answer. hope won't flagged duplicate. acknowledge existence of similar questions, have different answers, , none work me. question: what doing wrong? old mingw versions had problem "ld" not able create non-pe files @ all. maybe current versions...
Read more

php - display validation error message next to the textbox in codeigniter -

Image
i'm newbie codeigniter.i want display error message next text box.my view file create.php contains following code. <?php echo validation_errors(); //validation echo form_open('news/create'); //create form ?> <div class="boxes"> <div class="common"> <div class="lables"> <label for="name">name</label> </div> <div class="text_boxes"> <input type="text" name="uname" /><div id="infomessage"><?php echo $message;?></br> </div> </div>` and below controller model: public function create() { $this->load->helper('form'); $this->load->library('form_validation'); $data['title'] = 'insert items'; $this->form_validation->set_rules('uname','required|min_length[6]|m...
Read more