I am inserting the data into the database and display data on the page without refresh the page.
I tried $("#e-empListwrap").load(location.href + "#e-empListwrap"); but it's displaying the whole page on my page.
$("form[name='emp']").validate({
rules: {
//rules
},
submitHandler: function(form) {
var form = $('form[name="emp"]').get(0);
var formData = new FormData(form);
$.ajax({
url: baseUrl + "/controller/emp_control.php",
type: "POST",
dataType: 'json',
data: formData,
contentType: false,
cache: false,
processData: false,
success: function(data) {
$('form[name="emp"]')[0].reset();
$('#modal-addemp').modal().hide();
$("#e-empListwrap").load(location.href + "#e-empListwrap");
},
}); // AJAX Get Jquery statment
}
});
HTML
<div class="e-empListwrap mt-4" id="e-empListwrap"><ul></ul></div>
// The below is the script when refersh the page then it will call the ajax and get the the and display on the page.
<script>
fetchEMPsaved_data();
function fetchEMPsaved_data(){
$.ajax({
url:'controller/developer_control.php',
type: "post",
dataType: "json",
data: { action: "fetchEMPsaved_data"},
success: function(data) {
$("#e-empListwrap ul").append(data);
}
});
}
</script>
You are missing a space after the url, between the url and CSS target:
$("#e-empListwrap").load(location.href + " #e-empListwrap");
or else jquery handles it as an anchor of the url, not as the element ID. You are loading url.html#element but to grep an element/css target, not the whole page, the syntax should be url.html #elementOrTarget, with the space in between.
Related
I have form with input for attachment:
<form enctype="multipart/form-data" action="" method="post" id="sendInvoiceForm">
.....
<div class="templateDiv">
<span class="invoice_email_label">Email attachments:</span>
<input name="email_attachment[]" type="file" multiple="">
</div>
<div class="templateDiv">
<button id="send_invoice_btn" class="bigButton redButton">Send</button>
</div>
</form>
And js:
data = new FormData($("#sendInvoiceForm")[0]);
data.append('flagSend', 1);
data.append('send_invoice_subject', sendInvoiceSubject);
....
$.ajax({
type: 'POST',
data: data,
processData: false,
contentType: false,
url: sJSUrlSavePdfInvoiceToServer,
dataType: 'json',
success: function (data) {
if (data.msg === 'Error. This invoice number exists.') {
alert(data.msg);
} else {
...
}
},
error: function () {
alert('error');
}
});
I tested and seems it doesnt work. All data pass well, but not file.
When I print_r $_FILES it is empty. What is my error? Thanks.
it's work for me --
var form_data = new FormData($('#submitForm')[0]);
$.ajax({
url: "<?php echo base_url() . 'backends/update_documents' ?>",
type: "POST",
dataType: 'json', // what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: form_data,
success: function (res) {
// console.log(res);
},
error: function (xhr, ajaxOptions, thrownError) {
//console.log(xhr);
}
});
you can try with cache: false
and mention for button, type="button"
this is what i do and works
append the formdata,
var formData = new FormData(your_form);
// for multiple files , because i need to check
new_files is class, i use because i am creating form dynamically
$.each($(".new_files"), function (i, obj) {
// console.log(obj.files);
$.each(obj.files, function (j, file) {
var max_size = 5120000;
var file_type= file.type;
var match = ["image/jpeg", "image/png", "image/jpg", "application/pdf"];
// after validation etc
// append formdata
formData.append('file[' + j + ']', file);
});
});
// if you want something else,
formData.append("id", $('#kreditornr').val());
// ajax
$.ajax({
type: "POST",
url: "url",
data: formData,
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData: false, // To send DOMDocument or non processed data file it is set to false
success: function (data) {
// success
}
});
First remove dataType: 'json' Then if it still shows error then replace
data = new FormData($("#sendInvoiceForm")[0]);
with
data = new FormData($("#sendInvoiceForm").prop('files')[0]);
try to send the data via :
data: $('#sendInvoiceForm').serialize();
I am trying to POST form data with AJAX + jQuery using the code below
<script>
$("#submit1").click(function(){
testSubmit(event);
});
function testSubmit(event) {
event.preventDefault();
var data = new FormData();
var file_data = $('input[type="file"]')[0].files; // for multiple files
for(var i = 0;i<file_data.length;i++){
data.append("file_"+i, file_data[i]);
}
var other_data = $('#form_id').serializeArray();
$.each(other_data,function(key,input) {
data.append(input.name,input.value);
});
$.ajax({
url: 'test.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
}
</script>
Here submit1 is a button on form form_id
This code is working fine, however the below line
data.append("file_"+i, file_data[i]);
as you can see posts the file with id of file_0, file_1 and so on. How can I get this to be the actual id of the input element rather than being a generic file_0, file_1 etc ?
Thanks for reading this
If you are using jQuery then why not something like this
$('input[type="file"]').each(function($i){
data.append($(this).prop("id"), $(this)[0].files[0]);
});
Entire Code :-
<script>
$("#submit1").click(function(){
testSubmit(event);
});
function testSubmit(event) {
event.preventDefault();
var data = new FormData();
$('input[type="file"]').each(function($i){
data.append($(this).prop("id"), $(this)[0].files[0]);
});
var other_data = $('#form_id').serializeArray();
$.each(other_data,function(key,input){
data.append(input.name,input.value);
});
$.ajax({
url: 'test.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
}
</script>
My ajax code is not send value to other php page??
I want to delete value coming from database ajax code get id that come from database but not sent to other php page where delete code.
<script type="text/javascript">
function deleteBox(id){
if (confirm("Are you sure you want to delete this record?")){
var dataString = id;
$.ajax({
type: "POST",
url: "del.php",
data: dataString,
cache: false,
success: function(){
}
});
}
}
</script>
try below code:
var dataString = id;
$.ajax({
type: "POST",
url: "del.php?datastring="+id,
//data: dataString,
cache: false,
success: function(){
}
});
or
var dataString = id;
$.ajax({
type: "POST",
url: "del.php",
data: {datastring:id},
cache: false,
success: function(){
}
});
send data with parameter name and value not only value, like this
data: {'id':dataString},
please correct this in ajax call. you can pass the data from one page to another page using data. like data : {var1:value1,var2:value2,var3:value3}
$.ajax({
type: "POST",
url: "del.php",
data: {dataString: dataString},
cache: false,
success: function(){
}
});
I am trying to delete a photo using ajax and when the photo is deleted show default image instantly, so far I am done with php side but the ajax part isn't working. How can I make an ajax request without data type?
function delete_image()
{
$.ajax({
type: "POST",
url: "target.php?page=delete",
cache: false,
success: function(response)
{
var $divs = $("<div>" + response + "</div>");
$("#phd").fadeOut('slow');
$(".suc_pic").fadeIn('slow').empty().append($divs.find("#msg"));//the default picture fades in once the photo is deleted.
}
});
}
Try move "page= delete" in data secction:
function delete_image()
{
$.ajax({
type: "POST",
url: "target.php",
cache: false,
success: function(response)
{
var $divs = $("<div>" + response + "</div>");
$("#phd").fadeOut('slow');
$(".suc_pic").fadeIn('slow').empty().append($divs.find("#msg"));//the default picture fades in once the photo is deleted.
},
data: {page='delete'}
});
}
I'm building a PhoneGap app where user press button which then sends data to server. On the success handler I have a new function that asks user some questions with prompt box and then sends them back to server. So I need to make the prompt box appear as long as the condition "status=ok" is true.
I don't know how many times the prompt box has to appear, it can be anything from 1 to 10 times, so I guess I need to make a some sort of loop, but how can I do it?
This is the code I've been using now:
function UpdateRecord(update_id)
{ var id = getUrlVars()["id"];
jQuery.ajax({ type: "POST",
url: serviceURL + "update.php",
data: 'id='+id ,
cache: false,
success: function(data) {
console.log(data)
if(data.key[0].status == "ok"){
var reply = prompt(data.key[0].QUESTION, "");
jQuery.ajax({ type: "POST",
url: serviceURL + "question.php",
data: 'id='+id+'&reply='+reply ,
cache: false,
success: function(data) {
window.location = "page.html" }
} else {
window.location = "page.html"
}
}
});
}
I think what your after is moving the response from the AJAX call into a method AskQuestion (or whatever you want to call it). This function would prompt and would query if the answer was correct or not and redirect them to another page:
function AskQuestion(data)
{
var id = getUrlVars()["id"];
console.log(data);
if(data.key[0].status == "ok") {
var reply = prompt(data.key[0].QUESTION, "");
jQuery.ajax({ type: "POST",
url: serviceURL + "question.php",
data: 'id='+id+'&reply='+reply,
cache: false,
success: AskQuestion});
} else {
window.location = "page.html";
}
}
function UpdateRecord(update_id)
{
var id = getUrlVars()["id"];
jQuery.ajax({ type: "POST",
url: serviceURL + "update.php",
data: 'id='+id,
cache: false,
success: AskQuestion});
}