如何使用ajax加载数据到表单

时间:2014-02-22 14:17:03

标签: php

我有关于ajax load的问题,当我输入名称或id来形成seacrh时,无法正常工作, 我一直在寻找解决这个问题,但直到现在我无法解决它,请答案,谢谢

这是我的源代码

<?php
include("../configurasi/koneksi.php");
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="modulpembelian/pem.js"></script>


</head>
    <body>

        <div class="content">
            <h1>Customer Activity</h1>

            <script>

                $(function ()
                {
                    $("#wizard").steps({
                        headerTag: "h2",
                        bodyTag: "section",
                        transitionEffect: "slideLeft",
                          onFinished: function (event, currentIndex)
        {

            alert("Submitted!");
            window.location.href='../sipp2/content.php?module=pembelian';
        }
                    });


                });
            </script>

            <div id="wizard">
                <h2>Cari Data Pembeli</h2>
                <section>

 <div id="divSearch">
  <form id="formSearch">
  <table>
  <tr>
  <td>Cari Berdasarkan</td><td><select id="pilihcari">
      <option value="namapembeli">Nama Pembeli</option>
      <option value="kodepembeli">Kode Pembeli</option>
      <option value="semua">Semua</option>
  </select></td>
  <td id="kolompilih"><input type="text" name="fieldcari" id="fieldcari" /></td><td>
  <input type="submit" value="Cari" /></td>
  </tr></table>
  </form><br />
</div>
<div id="divPageData"></div>

                </section>

                <h2>Transaksi</h2>
                <section>

                </section>

                <h2>Input Cicilan</h2>
                <section>

                </section>

                <h2>Selesai</h2>
                <section>
                    checking dan liat data2 nya lagi
                </section>
            </div>
        </div>

    </body>
</html>

(文档)$。就绪(函数(){

//menangkap error dan men-set parameter global (timeout, dll)
$.ajaxSetup({
    timeout: 10000,
    cache: false,
    error:function(x,e){
        if(x.status==0){
            alert('Anda sedang offline!\nSilahkan cek koneksi anda!');
        }else if(x.status==404){
            alert('Permintaan URL tidak ditemukan!');
        }else if(x.status==500){
            alert('Internal Server Error!');
        }else if(e=='parsererror'){
            alert('Error.\nParsing JSON Request failed!');
        }else if(e=='timeout'){
            alert('Request Time out!');
        }else {
            alert('Error tidak diketahui: \n'+x.responseText);
        }
    }
});


//menangani jika user melakukan pilihan pada combo #pilihcari
$("select#pilihcari").change(function(){
    if ($(this).val() == "kodepembeli"){
        $("td#kolompilih").show();
        $("input#fieldcari").show();
        $("input#fieldcari").focus();
    }
    else if ($(this).val() == "namapembeli"){
        $("td#kolompilih").show();
        $("input#fieldcari").show();
        $("input#fieldcari").focus();
    }

    else{
        $("td#kolompilih").hide();
    }
});

//menampilkan list data pelanggan
loadData();

// fungsi untuk me-load tampilan list data pelanggan, data yang ditampilkan disesuaikan
// juga dengan input data pada bagian search
function loadData(){
    var dataString;
    var cari = $("input#fieldcari").val();
    var combo = $("select#pilihcari").val();

    if (combo == "namapembeli"){
        dataString = 'namapembeli='+ cari;
    }
    else if (combo == "kodepembeli"){
        dataString = 'kodepembeli='+ cari;
    }


    $.ajax({
        url: "modulpembelian/search.php",
        type: "GET",
        data: dataString,
        success:function(data)
        {
            $('#divPageData').html(data);
        }
    });
}

// melakukan pemrosesan data untuk bagian search (pencarian data)
$("form#formSearch").submit(function()
{
    var cari = $("input#fieldcari").val();
    var combo = $("select#pilihcari").val();
    if (cari.replace(/\s/g,"") != ""){ // mengecek field text kosong atau tidak)
        loadData();
    }
    else if ((cari.replace(/\s/g,"") == "") && (combo != "semua") ){
        alert("Maaf, field nya harus diisi!");
        $("input#fieldcari").focus();
    }
    else{
        loadData();
    }
    return false;
});

});

<?php
include("../configurasi/koneksi.php");
?>
  <script type="text/javascript">

// fungsi ini untuk menampilkan list data pelanggan sesuai halaman (page) yang dipilih.
// list data yang ditampilkan disesuaikan juga dengan input data pada bagian search.
function pagination(page)
{
  var cari = $("input#fieldcari").val();
  var combo = $("select#pilihcari").val();

  if (combo == "namapembeli"){
    dataString = 'namapembeli='+cari;
  }
  else (combo == "kodepembeli"){
    dataString = 'kodepembeli='+cari;
  }


  $.ajax({
    url:"modulpembelian/search.php",
    data: dataString,
    type:"GET",
    success:function(data)
    {
      $('#divPageData').html(data);
    }
  });
}

// fungsi untuk me-load tampilan list data pelanggan, data yang ditampilkan disesuaikan
// juga dengan input data pada bagian search
function loadData(){
  var dataString;
  var cari = $("input#fieldcari").val();
  var combo = $("select#pilihcari").val();

  if (combo == "namapembeli"){
    dataString = 'namapembeli='+ cari;
  }
  else if (combo == "kodepembeli"){
    dataString = 'kodepembeli='+ cari;
  }

  $.ajax({
    url: "modulpembelian/search.php", //file tempat pemrosesan permintaan (request)
    type: "GET",
    data: dataString,
    success:function(data)
    {
      $('#divPageData').html(data);
    }
  });
}

$(function(){
  // membuat warna tampilan baris data pada tabel menjadi selang-seling
  $('#data/stock_barang tr:even:not(#nav):not(#total)').addClass('even');
  $('#data/stock_barang tr:odd:not(#nav):not(#total)').addClass('odd');

  $("a.edit").click(function(){
    page=$(this).attr("href");
    $("#divFormContent").load(page); // me-load formpelanggan untuk melakukan edit data
    $("#divFormContent").show();
    $("#btnhide").show();
    return false;
  });


});

</script>
<?php
if (isset($_GET['namapembeli']) and !empty($_GET['namapembeli'])){
  $nama = $_GET['namapembeli'];
  $sql = "select * from datapembeli where namapelanggan like '%$nama%'";
}

?>
       <table>
<tr>
<td><font color="red">ID Pembeli</font></td><td>:</td><td><input type="text" value="<?php echo $data[idpembeli]; ?>" name=""/><td>
<td><font color="red">Nama Pembeli</font></td><td>:</td><td><input type="text" value="" name=""/><td>
<td><font color="red">No KTP</font></td><td>:</td><td><input type="text" value="" name=""/><td>
</tr>

<tr>
<td>R</td><td>:</td><td><input type="text" value="" name=""/><td>
<td>Ca</td><td>:</td><td><input type="text" value="" name=""/><td>
<td>L</td><td>:</td><td><input type="text" value="" name=""/><td>
</tr>

<tr>
<td>No telepon</td><td>:</td><td><input type="text" value="" name=""/><td>
<td>Usia</td><td>:</td><td><input type="text" value="" name=""/><td>
<td>Alamat</td><td>:</td><td><input type="text" value="" name=""/><td>
</tr>

<tr>
<td>Jenis Kelamin</td><td>:</td><td><input type="text" value="" name=""/><td>
<td>Tanggal Lahir</td><td>:</td><td><input type="text" value="" name=""/><td>
<td>Agama</td><td>:</td><td><input type="text" value="" name=""/><td>
</tr>

<tr>
<td>Jumlah Keluarga</td><td>:</td><td><input type="text" value="" name=""/><td>
<td>Pendidikan</td><td>:</td><td><input type="text" value="" name=""/><td>
<td>Pekerjaan</td><td>:</td><td><input type="text" value="" name=""/><td>
</tr>

<tr>
<td>Penghasilan</td><td>:</td><td><input type="text" value="" name=""/><td>
<td>Penghasilan Lain</td><td>:</td><td><input type="text" value="" name=""/><td>
<td>Pekerjaan</td><td>:</td><td><input type="text" value="" name=""/><td>
</tr>

<tr>
<td>Email</td><td>:</td><td><input type="text" value="" name=""/><td>
<td>Nip</td><td>:</td><td><input type="text" value="" name=""/><td>
<td>No kartu Pegawai</td><td>:</td><td><input type="text" value="" name=""/><td>
</tr>

</table>

0 个答案:

没有答案