I have a form that submits using ajax and I want to use encodeURIComponent() to validate?
I am not doing this on indivudal id and name tags in the form.
How would I use this function to validate the whole form instead of having to do each parts in the form - if that makes sense?
var formData = new FormData(this);
$.ajax({
type: "POST",
url: "/engine/post/poll.php",
dataType:"json",
data: formData, //i want this encoded
mimeType:"multipart/form-data",
success: processJson,
contentType: false,
cache: false,
processData:false
});
The var formData is what is holding all the stuff from the form.
I ended up playing around with it and just added a random var above it with it encoded.
var encodePlease = encodeURIComponent(FormData);
var formData = new FormData(this);
and then using formData var in the ajax.
Related
I know, similar questions had been asked before.
All questions I found concerns upload within a form and need a submit button. This I don't want. I want upload to start after file selection is made (I'm aware of security risks).
Why is the contend of the file dictionary not send?
The button itself is created by JS:
downLoadBtn = document.createElement('INPUT');
downLoadBtn.id = 'downloadBtn';
downLoadBtn.type = 'file';
downLoadBtn.onchange = function(){upload()}
function upload(){
file = document.getElementById('downloadBtn')
console.log(file['files']['0'])
$.ajax({
type: "POST",
url: '/upload',
dataType : 'json',
data: JSON.file,
success: function (response){
console.log(response);
}
});
}
python:
#app.route('/upload', methods = ['POST'])
def upload():
if request.method == 'POST':
data = request.files
print(data)
return jsonify(data)
What I'm doing wrong?
You pass JSON.file as the data parameter which is not defined in the code you posted, it should be the file tat was selected.
Since your server side code expects multipart from data, you'll have to use a FormData object.
function upload(){
file = document.getElementById('downloadBtn')
console.log(file['files']['0'])
var fd = new FormData();
fd.append('file', file['files']['0']);
$.ajax({
type: "POST",
url: '/upload',
dataType : 'json',
data: fd,
contentType: false,
processData: false,
success: function (response){
console.log(response);
}
});
}
i am trying to send a blob image with ajax, this worked fine. however whenever i try out add another dataset in ajax it stops working. i only receive one. here is my code:
var formData = new FormData();
var id = new FormData();
formData.append('avatar', blob);
id.append('id', '<?php echo $token['token_confirmation']; ?>');
$.ajax('upload_img.php', {
method: 'POST',
data: {formData, id},
processData: false,
contentType: false,
i fixed the problem, the problem was that the append worked but it sent it over $_FILES AND $_POST
I want to update the cart item without loading the page i.e with the help of ajax.
can anyone tell me in which file did i put this code.
jQuery(document).ready(function(){
jQuery('#shopping-cart-table')
.on(
'change',
'input[name$="[qty]"]',
function(){
var form = jQuery(jQuery(this).closest('form'));
// we'll extract the action and method attributes out of the form
// kick off an ajax request using the form's action and method,
// with the form data as payload
jQuery.ajax({
url: form.attr('action'),
method: form.attr('method'),
data: form.serializeArray()
});
}
);
});
The easy way is to put this code in a Javascript script tag into the checkout cart template: magento/app/design/frontend/base/default/template/checkout/cart.phtml
Be carefull, you have to set update_cart_action data to "update_qty", to be in update qty mode.
var formData = form.serializeArray();
formData.push({'update_cart_action' : 'update_qty'})
jQuery.ajax({
url: form.attr('action'),
method: form.attr('method'),
data: formData
});
I'm making an addition to a working Kendo UI grid to allow it to update based on an id passed in from a textbox. I'm calling my controller from the ajax, and everything works as expected until I try and create the kendo.data.DataSource() for my grid inside of the ajax success. The result looks as expected but anything I do to assign it to the data source does not seem to work. The data shows nothing and the grid comes up empty.
The model expected by the grid does match the one in my controller. I've looked at other questions and the kendo ui docs but I can't seem to figure out what I'm doing wrong... any help will be appreciated.
Ajax:
$.ajax({
type: "POST",
url: '#Url.Action("Search")',
data: JSON.stringify({ id: id }),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
var grid = $("#Grid").data("kendoGrid");
var data = new kendo.data.DataSource(result);
grid.dataSource.data(data);
grid.refresh();
}
});
Controller:
public ActionResult Search([DataSourceRequest]DataSourceRequest request, string id)
{
IEnumerable<SearchModel> data = GetData(id);
return Json(data.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
You are using the ToDataSourceResult() extension method on the server so you need to using the Data property of result to assign to the data property of the DataSource object you are creating on the client. Also, you should use the setDataSource method of the grid not grid.dataSource.data(). Lastly, you want to call the read() method of the dataSource grid property, not grid.Refresh().
$.ajax({
type: "POST",
url: '#Url.Action("Search")',
data: JSON.stringify({ id: id }),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
var grid = $("#Grid").data("kendoGrid");
var dataSource = new kendo.data.DataSource({
data: result.Data
});
grid.setDataSource(dataSource);
grid.dataSource.read();
}
});
You are creating the DataSource incorrectly. Assuming the result of your AJAX call returns an array, you must then wrap it in an object with a data property that holds the array of data.
$.ajax({
// ...
success: function (result) {
var grid = $("#Grid").getKendoGrid();
var data = new kendo.data.DataSource({ data: result });
grid.dataSource.data(data);
grid.refresh();
}
});
The following is an alternative way to create a DataSource and allows passing in an array (unwrapped), a DataSource configuration object, or even a preexisting DataSource object.
var data = kendo.data.DataSource.create(obj);
This approach is preferable b/c it is more flexible.
I hope that helps!
I am developping a wordpress plugin, want to send string as post ajax parameters, but the string breaks with '&'
code is
var data = "http://localhost/wordpress/?page_id=1&setval=RFZ83WSXa816yc6DNcgfHlgIkztR7KEC6JHRHCCcwfw|~HBZW9j3B59f8rCXO_QLY-gG2MDAcKo6fKG2AnbYnMns|~KA1KUT_SuU9W2UDTnngTsbJiptTvGWZAAzTfN5BCHak|~1";
$.ajax({
data: data
type: "POST",
url: '<?php echo plugins_url().'/page-loader/createMetaDetails.php'; ?>',
data :data,
success: function(msg){
alert('wow'+msg);
}
});
it is not working only passing till 'http://localhost/wordpress/?page_id=1', why?
You need to put data in key value pair array to pass jquery ajax function.
change
var data = 'http://localhost/wordpress/?page_id=1&setval=RFZ83WSXa816yc6DNcgfHlgIkztR7KEC6JHRHCCcwfw|~HBZW9j3B59f8rCXO_QLY-gG2MDAcKo6fKG2AnbYnMns|~KA1KUT_SuU9W2UDTnngTsbJiptTvGWZAAzTfN5BCHak|~1'
To
var data = { yoururl:'http://localhost/wordpress/?page_id=1&setval=RFZ83WSXa816yc6DNcgfHlgIkztR7KEC6JHRHCCcwfw|~HBZW9j3B59f8rCXO_QLY-gG2MDAcKo6fKG2AnbYnMns|~KA1KUT_SuU9W2UDTnngTsbJiptTvGWZAAzTfN5BCHak|~1'}
The data property should be a Javascript object in key:value format; the keys will be the form field names.