Im submitting ajax request using Bootstrap Modal when i submit i want refresh modal body. it means what i have saved from my form im showing my modal body i want show that row in table. when i use this that table got hide not refreshing anything rong ?
$('#uploadform').submit(function(e) {
e.preventDefault();
var formData = new FormData();
formData.append('file', $('input[type=file]')[0].files[0]);
formData.append('task_id','{{$task->id}}');
formData.append('title',$('#title').val());
$.ajax({
type:'POST',
url:'{{url('/uploadTask')}}',
data:formData,
success:function(data){
$("#images-table").replaceWith($('#images-table', $(data)));
$("#some_form")[0].reset();
},
error:function (data) {
alert('error');
},
async:false,
processData: false,
contentType: false,
});
});
You can simply refresh the Modal html by putting some new html into it like:
success:function(data){
// here data contains the response for your ajax call
var newHTML = data;
$("#images-table").html(newHTML); // This will put new html and remove old
}
Related
from my php page searching employee retrieve by ajax success function and displayed as button ! when i click on fetched button it works like post request 200 ok! but modal dont show up and not even updated with my new ajax request result !!
I want to display searched employees information via modal!
i have tried many approach!
click function, on click function, delegate function does not work!
click function, on click function, delegate function does not work!
even clcik event on parent element
button fetched by this request
$("#searchEmployeeForm").on('submit',(function(e) {
e.preventDefault();
if ( $("#selectCompany").val()!="" || $("#selectDepartment").val()!="" || $("#selectDesignation").val()!="" || $("#searchByName").val()!="" || $("#searchByID").val()!=""){
$.ajax({
url: "controller/employee/find_Employee.php",
type: "POST",
// Type of request to be send, called as method
data: new FormData(this),
contentType: false,
dataType: 'json',
cache: false,
processData:false,
success: function(data)
{
$('#listOfEmployee').empty();
$.each(data, function (i, empdetail) {
console.log(empdetail);
$('#listOfEmployee').append("<button class='list-group-item d-flex justify-content-between align-items-center viewEmployeeData' id= "+ empdetail.emp_id +">"+ empdetail.first_name + empdetail.last_name + "</button>" );
});
console.log("data:" + data);
}
});
}
else{
alert("Field Can not be Empty ");
}
}));
button on click event
$(document).on('click', '.viewEmployeeData', function (e){
e.preventDefault();
console.log('limon ');
var employee_id = $(this).attr("id");
alert(employee_id);
if(employee_id)
{
$.ajax({
url:"controller/employee/employee_info.php",
method:"POST",
dataType: 'json',
data:{employee_id:employee_id},
success:function(data){
$('.modal-title').html(data.firs_name);
$('#view_employee_data_modal').modal("show");
alert(data);
}
});
}
});
i expected button click event will display modal with my ajax request data!
NB: click event works but only its console.log and alert modal dont show up after ajax success function.
when ajax success return data and add in dom and that dom event can not bind directly so you bind event in main dom it mean return data fill in "listOfEmployee" dom here event bint so work perfectly.
$('#listOfEmployee').on('click','.viewEmployeeData',function(e){
e.preventDefault();
console.log('limon ');
var employee_id = $(this).attr("id");
alert(employee_id);
if(employee_id)
{
$.ajax({
url:"controller/employee/employee_info.php",
method:"POST",
dataType: 'json',
data:{employee_id:employee_id},
success:function(data){
$('.modal-title').html(data.firs_name);
$('#view_employee_data_modal').modal("show");
alert(data);
}
});
}
});
I am using CKEditor and trying to submit my form with jquery but I have a conflict
Jquery
$(document).ready(function (e) {
$("#form").on('submit',(function(e) {
e.preventDefault();
console.log(new FormData(this))
$('.loading-container').show();
$.ajax({
url: "store-course-teacher",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$('.loading-container').hide()
if(data.status == 'done')
{
$('#form').hide();
$('#add-section').show();
$('#course-title').html($('#title').val());
$('.course-id').val(data.course_id)
}
}
});
}));
});
and from my controller I dumped the result and all text area with ckeditor is NULL
I am trying to be clear as possible but that's all I got
I believe with ckeditor, you have to get the HTML from the text editor like this:
var data = CKEDITOR.instances.editor1.getData();
So before calling your ajax, perhaps set data to a hidden input in your form so that your new FormData(this) remains intact?
var data = CKEDITOR.instances.editor1.getData();
$('#MyHiddenInput').val(data);
More info here
best way to send ckEditor with the from was updating the ckEditor instanes
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
I found the solution here
I am trying to submit a form which will insert data into a mysql database which is working fine. I then would like to return the id of the new inserted row (id auto increment in mysql table) as I want to open up a modal once the form is submitted so I can provide a link which includes id as a parameter in the url.
To send the data for the form I am using the following code:
$(document).ready(function(){
$("#submitForm").click(function(){
var string = $('#commentForm').serialize();
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "SubmitData.php",
data: string,
cache: false,
success: function(result){
//alert(result);
}
});
});
});
The SubmitData.php file then inserts the form data into the database.
In the SubmitData.php I can create a variable to pick up the id of the newly inserted row like
$last_id = mysqli_insert_id($conn);
Is there a way I can return the $last_id from the SubmitData.php file within the same function?
Yes return from SubmitData.php the id using the following echo:
echo json_encode(['id'=>$last_id]);
js:
$(document).ready(function(){
$("#submitForm").click(function(){
var string = $('#commentForm').serialize();
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "SubmitData.php",
data: string,
cache: false,
success: function(result){
alert(result.id);//this will alert you the last_id
}
});
});
});
print last id in that php file
echo $last_id;
get that in ajax success function
success: function(result){
alert(result);
}
I know that I cannot upload a file with jquery so I come up with this solution:
var ifframe = $("<iframe></iframe>");
var input = $('<input type="file" id="file" name="file" size="10"/>');
var form = $('<form action="/upload" method="post" enctype="multipart/form-data"></form> ');
form.append(input);
ifframe.append(form);
input.change(function(){
form.submit();
}
);
input.trigger("click");
Basically I try to create a form insde the iframe and the trigger a click on the file field so the user is given a window where he can select image. then the form is automatically submitted and the main page does not get redirected since the form is in an iframe. The problem is that the main page does get redirected. Can anybody help me out here?
Actually, JQ can submit a form w. attachment asynchronously. Take a look at this example. Much better than an iframe approach.
$("#addProductForm").submit(function (event) {
event.preventDefault();
//grab all form data
var formData = $(this).serialize();
$.ajax({
url: 'addProduct.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
$("#productFormOutput").html(returndata);
alert(formData);
},
error: function(){
alert("error in ajax form submission");
}
});
return false;
});
I have a script that submits multiple forms using AJAX. It will post the data successfully if the url used is the originating page, but it will not post the data to another page (the page I use for processing).
Can anyone tell me why this is happening?
/* AJAX for edit */
var submitForms = [
document.forms["editRow"],
document.forms["editRow2"],
document.forms["editRow3"],
document.forms["editRow4"],
document.forms["editRow5"],
document.forms["editRow6"],
document.forms["editRow7"],
document.forms["editRow8"]
]
$('.submitEdit').on('click', function() {
var editRow = $(submitForms).serializeArray();
$.ajax({
type: 'POST',
url: "IRCprocessinventory.php",
data: editRow,
cache: false,
success: function(result){
$('body').html(result);
} //end result
}); // end ajax
}); // end click