In kendo ui upload ,how can i pass the parameter with save URL while uploading file sync? if i can use save-field parameter can u tell me how to use it?
$("#files").kendoUpload({
async: {
saveUrl: URL + "SaveUrl",
autoupload: false,
saveField: "**what to give here?????**",
},
This is my code check can i what to give in the save field if the save field is act like a parameter.
According to kendo documentation:
The name of the form field which is submitted to saveUrl. The default value is the input name.
So this mean it only changes the field submitted.
However here is one possible solution:
Pass Javascript/html Variable as Parameter with Kendo MVC upload control
And the JS version:
$("#files").kendoUpload({
multiple: false,
async: {
saveUrl: URL_HERE,
autoUpload: true
},
upload: function(e){
console.log(e)
e.data = { id: JSVariable};
}
});
Related
I have two buttons in the pager, one for adding a new record. See the code below:
$(grid_selector).jqGrid('navGrid', pager_selector,
{
edit: false,
add: true,
addicon : 'icon-plus-sign purple',
del: true,
delicon : 'icon-trash red',
search: false,
refresh: false,
view: false,
},
null, //no need for edit
{
//new record form
url: "/add",
...
afterSubmit : function(response, postdata) {
// ??? how to refresh the grid
}
},
...
}
After adding a record, I am hoping to refresh the grid. Could someone let me know how to do this?
I am using local data for the test purpose.
Regards.
Make sure that you are using updated version of jqGrid in your application
If all other parameters are are correct ( refresh:true etc ) you can use this to reload Grid
$(grid_selector).trigger("reloadGrid");
Please note this condition too
The reloading is not performed due to the datatype got change to local(loadonce is true).You need to reload the grid manually in afterSubmit function for form editing. You need to set the datatype to json before triggering reload event.
$(grid_selector).jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
Default property used in form editing is reloadAfterSubmit: true. It means that jqGrid trigger reloadGrid processing of afterSubmit.
You wrote "I am using local data". It's difficult to answer on your question because you don't posted more full code which you use. I try to guess what you do. Because jqGrid don't support local for editing till now then I suppose that your problem exist because you use loadonce: true option. If the option are used then jqGrid changes the original datatype to "local" after the first loading of data. In other words jqGrid "breaks" connection to the server (to url) after the first loading of data.
So you need just to reset the original datatype ("json" or "xml") before jqGrid trigger reloadGrid. The corresponding code will be about the following:
$(grid_selector).jqGrid("navGrid", pager_selector,
{
edit: false,
addicon : 'icon-plus-sign purple',
delicon : 'icon-trash red',
search: false,
beforeRefresh: function () {
$(this).jqGrid("setGridParam", { datatype: "json" });
}
},
{}, //no need for edit
{
//new record form
url: "/add",
...
afterSubmit: function () {
$(this).jqGrid("setGridParam", { datatype: "json" });
}
},
...
}
The above code add "Refresh" button and uses the same beforeRefresh and afterSubmit. In the way "Refresh" button reloads the data from the server. I personally find existence of such button practical in loadonce: true scenario.
Using FineUploader 3.8.2 to upload PDF files to S3, I am running into an interesting issue and not sure if perhaps I'm just using the wrong syntax or not understanding how the options should work for fineUploader. Here is my code...
var uploader = $('#fine-uploader-box').fineUploaderS3({
debug: true,
button: $('#choose-file-button'),
multiple: false,
autoUpload: false,
request: {
endpoint: '(no url yet because I need to know about the file before I can construct an S3 PUT url)'
},
callbacks: {
onSubmit: function(id, name){ // function to get real endpoint url goes here },
onSubmitted: function(id, name){ // or function to get real endpoint url goes here }
},
validation: {
allowedExtensions: ['pdf']
}
});
What I am trying to do is just get a function to run once my file has been added to the list but I am not seeing the onSubmit (or onSubmitted) firing.
My goal is to have that function do some ajax-y stuff and return some information in which I will use to facilitate the rest of the upload process including getting a specialized S3 PUT url from my server to send my upload to.
Any help would be greatly appreciated. Thanks.
It appears that you are using the syntax for the non-jQuery uploader, but you are using the jQuery uploader. Check out the below:
var uploader = $('#fine-uploader-box').fineUploaderS3({
debug: true,
button: $('#choose-file-button'),
multiple: false,
autoUpload: false,
request: {
endpoint: '(no url yet because I need to know about the file before I can construct an S3 PUT url)'
},
validation: {
allowedExtensions: ['pdf']
}
}).on('submit', function (event, fileId, fileName) {
alert("File id: "+fileId);
}).on('submitted', function (event, fileId, fileName) {
alert("File id: "+fileId);
});
I Have problem with my kendoAutoComplete i want to bind two fields to kendoAutoComplete, now I can bind one field name to dataTextField but for another field like id i dont have any other option, Following is my code
var alld="";
function getData(req) {
$.ajax({
url: 'BookingCity.asmx/GetAllCityBus',
contentType: 'application/json; charset=utf-8',
type: 'POST',
dataType: 'json',
minLength: 1,
async: false,
cache: false,
data: "{'prefixText':'" + req + "'}",
success: function(response) {
alld = response.d;
},
error: function(xhr, status) {
alert("error");
}
});
}
$("#totext").kendoAutoComplete({
dataSource: {
read: getData($("#totext").attr("value")),
data: alld
},
minLength: 2,
placeholder: "Select city...",
dataTextField: "Name",
dataTextField:"Id"
});
You can use template to achieve this:
$("#totext").kendoAutoComplete({
template: "#=Name# #=Adress#",
//.. rest of the options
I think you might be looking for dataValueField:"Id"
NOTE:
dataValueField is not used in kendoAutoComplete (my apologies). It was on the demo page on the Kendo UI website by mistake. It seems a dropdownlist or combobox can be used instead.
This is assuming you need to return a value that corresponds with the dataTextField (like the Id).
You can read more about it on the Kendo UI Forums - DataValueField does exist ?
or see this relevant excerpt:
The autocomplete UI widget persists only the selected text. Actually the you can post only the content of the input element. This is the expected behavior. As to the demos, the "dataValueField" is left by mistake and we will fix that for the next release of KendoUI.
In order to achieve your goal, you will need to use dropdownlist or combobox, which persist the selected id.
Regards,
Georgi Krustev
the Telerik team
Why do you want to do this? You can only bind one field to the dataTextField property, so if you want to show two, just add an additional calculated field to your datasource that contains the concatenated values of both fields and bind to that.
I am showing lots of form using jquery dialog and I wish to add in client side validation on it. I read through some examples, saying that mvc 3 already somehow support jquery client side validation, but I tried by including the necessary script, and my form like this:
#using (Html.BeginForm("CreateFood", "Home", FormMethod.Post, new { id = "formData" }))
{
#Html.ValidationSummary(false, "Please fix these errors.")
When i try to submit my form without fill in the required field, I still dint get any message. Can anyone give me more idea / explanation / examples on this??
Really needs help here... Thanks...
UPDATE (add in the script for my dialog)
$createdialog.dialog("option", "buttons", {
"Cancel": function () {
//alert('Cancel');
$createdialog.dialog('close');
},
"Submit": function () {
var frm = $('#formData');
$.ajax({
url: '/Food/CreateFood',
type: 'POST',
data: frm.serialize(),
success: $createdialog.dialog('close')
});
}
});
Once dropped, open dialog:
// Once drop, open dialog to create food
options.drop = function (event, ui) {
// Get the ContainerImgName which food dropped at
var cimg = $(this).attr('id');
// Pass in ContainerImgName to retrieve respective ContainerID
// Once success, set the container hidden field value in the FoodForm
$.ajax({
url: '/food/getcontainerid',
type: 'GET',
data: { cImg: cimg },
success: function (result) { $('#containerID').val(result); }
});
clear();
$.validator.unobtrusive.parse($createdialog);
$createdialog.dialog('open');
};
I've faced the same problem, solved with:
$(name).dialog({
autoOpen: true,
width: options.witdth,
heigth: options.height,
resizable: true,
draggable: true,
title: options.title,
modal: true,
open: function (event, ui) {
// Enable validation for unobtrusive stuffs
$(this).load(options.url, function () {
var $jQval = $.validator;
$jQval.unobtrusive.parse($(this));
});
}
});
of course you can add the validation on the close event of the dialog, depends on what you're doing, in my case the popup was just for displaying errors so I've performed validation on load of the content. (this pop up is displaying am Action result)
For every dynamically generated form you need to manually run the validator once you inject this content into the DOM as shown in this blog post using the $.validator.unobtrusive.parse function.
I am attempting to set up an interface that has a form containing filters about some jQuery UI Tabs. The tabs are loaded via ajax.
When I click on one of the tabs, I want the data from the form to be submitted to that tab.
I set up the ajaxOptions to grab the data from my form, serialize it, and POST it to the url. I have caching turned OFF, and I have caching for the ajaxOptions turned OFF.
This is the code I am using to set up the tabs.
$("#schedule-tabs").tabs({
ajaxOptions: {
type: 'POST',
data: $('#filters').serialize(),
cache: false,
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("<p>An error has been encountered while attempting to load this tab.</p>");
}
},
cache: false
});
When the tabs load, the data that is passed along is the data that was in the form when the page was first loaded even though I have changed the filters in the form.
I have added the following to the above tab setup to verify the form data along the way:
select: function(event, ui) {
alert($('#filters').serialize());
},
load: function(event, ui){
alert($('#filters').serialize());
},
show: function(event, ui){
alert($('#filters').serialize());
}
In all 3 instances, the updated form data is alerted. However, when the data reaches my page, it is the original data not the new data.
It appears that something is being cached somewhere, but I have no clue where.
Shouldn't the data be grabbed fresh from the form for each ajax page load? Why is it being cached? Is there some other way that I can override the data that is being posted when the tab content loads?
This is a huge blocker in my current project. If I can't resolve it soon, I will have to find some other solution other than the jQuery UI Tabs. I want to use them, but if this issue can't be resolved ...
Can anyone help???
I believe I have figured out the answer to my own question. I wanted to share in case others have run into this same situation.
Basically, I added an option that when a tab is selected, it gets the current form data and resets the ajaxOptions.
The code I am now using is:
// set up the jQuery UI Tabs
var $tabs = $("#schedule-tabs").tabs({
ajaxOptions: {
type: 'POST',
data: $('#filters').serialize(),
cache: false,
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("<p>An error has been encountered while attempting to load this tab.</p>");
}
},
cache: false,
select: function(event, ui) {
// get the current form data
var filter_options = $('#filters').serialize();
// update the data for the ajax options
$(this).tabs('option', 'ajaxOptions', { type: 'POST', 'data': filter_options });
return true;
}
});
I hope this helps someone else out.