CODEWITHSUNDEEP
javascripthtmljquery
andricoga
andricoga

Reputation: 87

how to manage location.reload in ajax.jquery

scenario: "i want my page reload autmaticly after user input the data". i try to search methode what the best. and i choose to use location reload

my problem:

when i use location.reload in piece of script it work.

$("#save").click(function(){
//ambil nilai-nilai dari masing-masing input
wp = $("#wp").val();
if(wp==="- Jenis Werehouse -"){
alert("Pilih dulu jenis werehouse");
exit();
}
posisi = $("#posisi").val();
pid = $("#pid").val();
if(pid==="- Produk ID -"){
alert("Pilih dulu ID Produk");
exit();
}
pname = $("#pname").val();
if(pname==""){
alert("Pilih dulu ID Produk");
exit();
}
pdate=$("#pdate").val();
if(pdate==""){
alert("Isi dulu tanggal inputnya");
exit();
}
datanya = "&wp="+wp+"&posisi="+posisi+"&pid="+pid;
datanya = datanya+"&pdate="+pdate+"&pname="+pname;
//tampilkan status Updating dan animasinya
$("#status").html("Dalam proses...");
$("#loading").show();
$.ajax({
type:'POST',
url: "aksi.php",
data: "op=save"+datanya,
cache: false,
success: function(msg){
if(msg=="error1"){
$("#status").html("Rak ini penuh");
}else if(msg=="sukses"){
$("#status").html("Data berhasil disimpan")}else{
$("#status").html("ERROR..penyimpanan data GAGAL!");
}
$("#loading").hide();
}
});
location.reload();
});

although the page reload passing step to show message error and succes. i ignored that for a while to see what the problem(c'z my page reload according my want.)

but i combine with my full code like this bellow

<script type="text/javascript">
var wp;
var posisi;
var pid;
var pname;
var pdate;
var datanya;
$(document).ready(function(){
    $("#save").click(function(){
    //ambil nilai-nilai dari masing-masing input
    wp = $("#wp").val();
    if(wp==="- Jenis Werehouse -"){
    alert("Pilih dulu jenis werehouse");
    exit();
    }
    posisi = $("#posisi").val();
    pid = $("#pid").val();
    if(pid==="- Produk ID -"){
    alert("Pilih dulu ID Produk");
    exit();
    }
    pname = $("#pname").val();
    if(pname==""){
    alert("Pilih dulu ID Produk");
    exit();
    }
    pdate=$("#pdate").val();
    if(pdate==""){
    alert("Isi dulu tanggal inputnya");
    exit();
    }
    datanya = "&wp="+wp+"&posisi="+posisi+"&pid="+pid;
    datanya = datanya+"&pdate="+pdate+"&pname="+pname;
    //tampilkan status Updating dan animasinya
    $("#status").html("Dalam proses...");
    $("#loading").show();
    $.ajax({
    type:'POST',
    url: "aksi.php",
    data: "op=save"+datanya,
    cache: false,
    success: function(msg){
    if(msg=="error1"){
    $("#status").html("Rak ini penuh");
    }else if(msg=="sukses"){
    $("#status").html("Data berhasil disimpan")}else{
    $("#status").html("ERROR..penyimpanan data GAGAL!");
    }
    $("#loading").hide();
    }
    });
    location.reload();
    });

    //jika tombol VIEW diklik
    $("#view").click(function(){
    posisi = $("#posisi").val();
    $("#status").html("Mencari Data...");
    $("#loading").show();
    $.ajax({
    type:'POST',
    url: "aksi.php",
    data: "op=view&posisi="+posisi,
    cache: false,
    success: function(msg){
    if(msg=="error"){
    $("#status").html("Tidak ada produk di RAK ini");
     $("#loading").hide();
    }
    else{//karna di server pembatas setiap data adalah |
        //maka kita split dan akan membentuk array
        data = msg.split("|");            
    //masukkan ke masing-masing textfield
     $("#pname").val(data[0]);
     $("#pdate").val(data[1]);
     //hilangkan status dan animasi loading
     $("#status").html("");
     $("#loading").hide();
       }
       }
     });
    });
    //jika tombol DEL diklik
    $("#delete").click(function(){
    posisi = $("#posisi").val();
    alert("Anda yakin untuk mengosong data produk yang ada di rak ini");
    $("#status").html("Lagi didelete...");
    $("#loading").show();
    $.ajax({
    type:'POST',
    url: "aksi.php",
    data: "op=delete&posisi="+posisi,
    cache: false,
    success: function(msg){
    if(msg=="sukses"){
    $("#status").html("Delete Berhasil...");
    }else{
    $("#status").html("ERROR..");
    }
    $("#loading").hide();
    }
    });
    location.reload();
    });
    });
    </script>

location.reload will make unfuction the script above it

in simple question 1. how to manage location.reload will run after ajax.jquery function finish? 2. what the best methode to make what user input automaticly will seen in page?

please advise, with code will ore appreciate

Upvotes: 2

Views: 8780

Answers (1)

Amit Sharma
Amit Sharma

Reputation: 1210

use document.location.reload() along with 

$("#loading").hide();

inside success function. you success should look like.

success: function(msg){
    if(msg=="error1"){
    $("#status").html("Rak ini penuh");
    }else if(msg=="sukses"){
    $("#status").html("Data berhasil disimpan")}else{
    $("#status").html("ERROR..penyimpanan data GAGAL!");
    }
    $("#loading").hide();
    document.location.reload();
    }

Upvotes: 2

Related Questions