Develop Reference

ajax refresh php code on submit without refresh page

I use form for input date to DB. After submit form I need refresh php code (because when form is submit then I need display this value sent, instead of this form.)
I've script:
$(document).on('submit','#form_create_user',function(e){
e.preventDefault();
var fd = new FormData(this);
var obj = $(this);
fd.append('course_id', "<?php echo $this->uri->segment(4); ?>");
obj.find('input[type="submit"]').val("Tworzenie...")
$.ajax({
url: $(this).attr("action"),
data: fd,
cache: false,
processData: false,
contentType: false,
type: 'POST',
success: function (dataofconfirm) {
// do something with the result
// obj.find('input[type="submit"]').val("Confirm user")
}
});
$.ajax({
url: "<?php echo site_url('home/saveValues/'); ?>",
data: fd,
cache: false,
processData: false,
contentType: false,
type: 'POST',
success: function (dataofconfirm) {
// do something with the result
toastr.success("Success created user.");
obj.find('input[type="submit"]').val("Potwierdź")
}
});
})
I can implement to this code refresh page below script:
document.getElementById("form_create_user").onsubmit = function(){
window.location.replace("<?php echo $course_details_url_back; ?>");
}
But the problem is, I have main tab and togle switch tabs with end url #user #domain etc.
example:
- mydomain.com/course
- mydomain.com/course#user
- mydomain.com/course#domain
When I run url in browser: mydomain.com/course#user then still is displayed main tab with url mydomain.com/course
This working only on switch tabs (without directly run url) So when I use above solution this stil reload page and back to main mydomain.com/course
So I need to find any solution for implement to above script refresh php code without reload page. Can anyone help me?

colorbox throwing an error even after library is loaded

Trying to call colorbox even after the library is loaded...
$.ajax({
cache: false,
url: 'results.cfm?tab=updates',
data: dataString,
method: 'POST',
success: function(data) {
var xData = $("#hidden-div > pre").html(data);
$.colorbox({inline:true, width:"80%", height:"80%", href: xData});
}
});
});
trying to load the results in the div defined at the bottom with id of hidden-div and having pre tag after it.
every time i am getting an error colorbox is undefined, not sure why

Jquery is not submitting the form with the custom button

My requirement is to upload a file from a form upon clicking the custom button by using Jquery stuff.
My form details are below:
<form id="CreateAttachmentForm" method="post" enctype="multipart/form-data" action="../../FileUploadServlet" >
My file is defined as below:
<input type="file" id="fileupload1" name="fileupload1" accept="image/*,application/pdf" "/>
My custom button related code is below:
<contact:contactbutton
id="printButton"
style="position:relative; width:90px; top:27px; height:30px; left:160px;"
textTop="7px"
defaultButton="false"
tabindex=""
accesskey="C"
onClickEx="createAttachmentRequest();"
onfocus="if(event.altKey){click();}">
<u>C</u>reate
</contact:contactbutton>
Whenever the user clicks on the custom button, the form should be submitted.I have registered an onClick event event where the control should reach the function named createAttachmentRequest()
The following is my createAttachmentRequest() function:
function createAttachmentRequest() {
alert("test ");
$("#CreateAttachmentForm").submit(function() {
var formData = new FormData($(this)[0]);
$.ajax({
url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
type: 'POST',
data: formData,
async: false,
success: function(data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
}
But the form is not submitted when I click the custom button. I have searched various questions on SO, but no suitable solution found so far.However I could see the alert message printed which confirms that the control is reaching the function createAttachmentRequest().What's wrong with my code?

The issue is because you're attaching a submit event handler in the function - not actually submitting the form.
It would be best to remove the createAttachmentRequest() function entirely and use unobtrusive JS code to attach the event. To do that, remove the onClickEx attribute from your <contact:contactbutton> element, then use this JS code:
$(function() {
$("#CreateAttachmentForm").submit(function(e) {
e.preventDefault();
$.ajax({
url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
type: 'POST',
data: new FormData(this),
success: function(data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
});
});
Also note that I removed async: false as it's incredibly bad practice to use it. If you check the console you'll even see warnings about its use.

You can do one of the following:
Take the submit event outside the function and remove the function like so:
$("#CreateAttachmentForm").submit(function(e) {
e.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
type: 'POST',
data: formData,
async: false,
success: function(data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
OR
inside the function remove the submit listener like so:
function createAttachmentRequest() {
alert("test ");
var formData = new FormData($(this)[0]);
$.ajax({
url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
type: 'POST',
data: formData,
async: false,
success: function(data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
}

how to add file data in ajax call without using FormData?

How can i add a file data along with some normal data i.e without form in ajax call?
current i have in my ajax script
$("body").on("click", "#next-step", function(event){
$("#loader").show();
event.preventDefault();
var file = $("#upload_logo")[0].files[0];
$.ajax({
type: 'POST',
url: 'step-two.php',
data:{
name : "my name",
},
file : {upload_logo : file},
contentType: false,
processData: false,
success: function(response)
{
$("#loader").hide();
alert(response);
}
})
});
i found out the solution but it's not the way i would like it to work
event.preventDefault();
var fdata = new FormData()
if($("#upload_logo")[0].files.length>0)
fdata.append("upload_logo",$("#upload_logo")[0].files[0])
$.ajax({
type: 'POST',
url: 'step-two.php',
data:{fdata},
And it works, but my question is what if i just want to add my file in data how can i do this? instead of using FormData() any alternative?

file upload is not possible through ajax. You can upload file, without refreshing page by using IFrame. you can check further detail here
With XHR2, File upload through AJAX is supported. E.g. through
FormData object, but unfortunately it is not supported by all/old
browsers.
FormData support starts from following desktop browsers versions. IE
10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+
For more detail, see MDN link

Use Form data
var formData = new FormData('form id');
$.ajax({
type: 'post',
async: false,
cache: false,
url: '',
contentType: false,
processData: false,
data: formData,
dataType: 'json',
success: function (response) {
}
});

Ajax POST not working on a mobile device

Please guide me on how make this javascript code work on mobile device.
I have tested on a desktop browser and its working fine.
But in Android device 4.1.2 can't post submit
$(function () {
$i.ajax ({
type: "POST",
url: web,
crossDomain: true,
data: dataString,
context: document.body,
cache: false,
beforeSend: function(html) {
document.getElementById("hasil").innerHTML = '';
$i(".flash").show();
$i(".flash").html('<div style="float:left;"></div>');
},
success: function(html){
$i("#js_process_request input, #js_process_request select").attr('disabled',false);
$i(".flash").hide();
$i("#hasil").hide();
$i("#hasil").append(html);
}