Sending variable and image via ajax - html

Could anybody please help me with this as i have tried several different methods all to no avail.
im trying to send the old image src name along with the new image data via ajax, but i can only manage to send 1 or the other and not both..
file = input.files[0];
newimagesrc=input.files[0].name;
oldimagesrc=oldsrc;
formData= new FormData();
formData.append("image", file , newimagesrc);
recent attempt failed formData2= new FormData();
recent attempt failed formdata2.append('oldimage', oldimagesrc);
$.ajax({
url: "UploadProfileImage.php",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(messagereturn1){
alert(messagereturn1);
}
});
No buttons or forms im afraid, strictly passing variable's onchange / onclick.
Not sure how to send the old image src through ajax as well as the new image data , i would like to send more variables if possible that have been passed into JS function..

var form_data = new FormData(); // Creating object of FormData class
form_data.append("image", file , newimagesrc) // Appending image parameter
form_data.append("oldimagesrc", oldimagesrc) //added a second variable then received in PHP as a $_POST['oldimagesrc']
PHP
if (isset($_POST['oldimagesrc'])){ $oldimagesrc=$_POST['oldimagesrc']; }

Related

get html code from a div

Im getting the html code from div with html() like this :
var s = $("#content").html();
and sending them to create a new page with this content with ajax :
$.ajax({
method: "POST",
url: "create.jsp",
data: {PageContent: s,
AppName: name,
header : temp
},
dataType: "html"
});
and this is how I create it with java :
File strFile = new File(strPath);
Writer objWriter = new BufferedWriter(new FileWriter(strFile));
objWriter.write(header);
objWriter.write(content);
objWriter.write(" </div>");
objWriter.write(" </body>");
objWriter.write("</html>");
objWriter.flush();
objWriter.close();
Everything is good except when I open the new file I found all the html code in one line ! anyone knows a solution?
Update
it seems that the html() method is extracting the code in one line as i tested ! so is there any solution?

data.push is not working with ajax

I am trying to send an extra data with ajax. I used (form).serializeArray() and added an extra data. when I am trying to send it via ajax, the alert showed me that the extra data wasn't added to the the serialized array.
This is my code:
$('#addrows').on('click',function(e){
var imgsrc= document.getElementById("imgz").src;
alert(imgsrc);
e.preventDefault();
var data_save = $('form').serializeArray();
data_save.push({ name: "imgname", value: imgsrc});
$.ajax({
url:"add.php",
cache:false,
method:"POST",
data:data_save,
success: function(data_save){
var obj = JSON.parse(data_save);
console.log(obj);
t.row.add( obj ).draw( false );
alert(obj);
}
});
});
});
I have tested the above example and everything seems fine over there. Also I dont see alert after:
var data_save = $('form').serializeArray();
data_save.push({ name: "imgname", value: imgsrc});
So try adding:
console.log(data_save);
and check the response or send me the screenshot of data that get passed in developer console.
I dont know what was wrong but then suddenly it worked.

Why angularjs change variables that are different?

I am getting an ajax data from api and saving it to a variable. And I have to "edit and save" or "edit and cancel" changes on this data. I am using ng-model to show and edit this data.
Here is my script:
function getData() {
$http({
method: 'POST',
url: API + '/api/Educations/UserEducations',
data: {}
}).then(function successCallback(response) {
vm.UserData = response.data;
vm.CachedUserData = response.data;
})
}
And here is my html:
<div ng-repeat="education in editEducationsCtrl.UserData">
<div>{{education.SchoolName}}</div>
<input type="text" ng-model="education.SchoolName">
<button ng-click="editEducationsCtrl.saveChanges()">Save</button>
<button ng-click="editEducationsCtrl.cancelChanges()">Cancel</button>
</div>
When user clicked cancel button, I want to write html cached data.
But,
When I try to access vm.CachedUserData variable, I am seeing this cached data has already changed with new value of vm.UserData... How? I have checked my code there is no function access CachedUserData variable. Even I changed variable name to unique name but result is same.
I want to save first data in a variable. But angular changes both of them. Is 2 way databinding change all variables that connected the same ajax data?
I recommend you to use angular.copy() to bind the data you want to cache:
vm.UserData = response.data;
vm.CachedUserData = angular.copy(response.data);
= in JavaScript does not clone the variable, it creates another pointer on it. That means you can handle your variable by using both vm.UserData and vm.CachedUserData.
It seems you want to clone your variable, so:
If it is an array:
...
}).then(function successCallback(response) {
vm.UserData = response.data.splice(0);
vm.CachedUserData = response.data.splice(0);
})
...
If it is an object:
var newObject = jQuery.extend({}, oldObject); if you have JQuery
obj = JSON.parse(JSON.stringify(o)); without JQuery
Here is a good link for cloning objects in JS.

Form sends a GET instead of POST

I got a website built for my small business from a freelancer. The website is hosted at http://devopsnexus.com/. Everything looks fine except the form in the bottom which is sending GET instead of POST. Strangely, if I just copy the code within the form tag in a new html file, it works just fine.
Now the freelancer has vanished and I am trying to debug since hours without an luck. Can anyone point out what is wrong with html here?
The form is being submitted via AJAX in main.js using jQuery's $.ajax(). The form method isn't specified here, and is defaulting to GET. Here's the fix:
// Contact form
var form = $('#main-contact-form');
form.submit(function(event) {
event.preventDefault();
var form_status = $('<div class="form_status"></div>');
var formData = $(this).serialize();
$.ajax({
url: $(this).attr('action'),
method: 'POST',
data: formData,
beforeSend: function() {
form.prepend(form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn());
}
}).done(function(data) {
form_status.html('<p class="text-success">Thank you for contact us. As early as possible we will contact you</p>').delay(3000).fadeOut();
});
});

How to feed an image slider from a flat JSON file by Handlebars template?

I want to feed an image slider (flexslider) from a flat JSON file by Handlebars template. for that I tried this.
$.ajax({
type : 'GET',
dataType : 'json',
async: false,
url: window.location.href + "JSON/carousel-data.json",
success : function(data) {
console.log(data);
var src = document.getElementById("sliderTemplate").innerHTML;
var tmpl = Handlebars.compile(src);
$('#imageslider').innerHTML = tmpl(data);
$('.flexslider').flexslider({animation: "slide"});
}
});
But slider is not instantiated by this code.
However if I assign the same content of JSON file to a variable in same JS file and pass it to Handlebars template it works fine.
What is the problem with my ajax code?
I found the solution, everything is fine but one line that is
$('#imageslider').innerHTML = tmpl(data);
It should be
$('#imageslider').HTML(tmpl(data));
As it follows the jQuery syntex.