I'm planning on server's cherrypy with programming of python and mako.
Now i have one problem because i know to pass value of Mako template to Javascript with
<script type="text/javascript">
var contapara=${input_nparams};
</script>
and viceversa? It 's possible apply viceversa Mako<---JAvascript?
Thanks
Edit:
Because I have one variable of Mako (kwargs) that contains the data of all forms sent.
The user enters a word that is the "clave" and is stored in Javascript.
After this I pass in Mako to search in variable (kwargs).
Call the function's MAko.
After exist this I open one windows with the textarea (new form) and I have to write data.
AFter the user change data and send the form.
Make a view that takes in the arguments that you would want to send to mako, then in your javascript use ajax. for example:
jQuery.ajax(
{
url : url_of_the_mako_view,
data : {foo:bar,foo2:bar2},
type : 'POST',
success : function(data)
{
/*
when the mako template is rendered by your view then the result will
be passed to this function in the variable data
*/
}
}
)
If you are after something a little more like a page redirect then you can do something more like this:
make a form that redirects to the right place
put in a hidden field
populate the hidden field with a json string representing the arguments you want to pass to mako
submit the form
Then in the view that gets the form data you need to turn the json into a dictionary and pass that to mako
Related
I have a form on form-window, and inside form window I have a form with many fields and one upload button. When try to submit form using Ajax.request I have got textfield value but can not get file data. Except filename.
var fd = Ext.getCmp('users-form').form;
var fileInput = document.getElementById('company_logo');
console.log(fd.getEl().dom.files);
params = {
name : fd.findField('name').getValue(),
login : fd.findField('login').getValue(),
email : fd.findField('email').getValue(),
password : fd.findField('password').getValue(),
password_repeat : fd.findField('password_repeat').getValue(),
id : fd.findField('id').getValue()
company_logo : fd.findField('logo').getValue()
}
console.log(params);
Ext.Ajax.request({
url: Scada.reqUrl('users', 'save'),
method: 'post',
params: {
data: Ext.encode(params)
},
success: function() {
console.log('in success');
},
failure: function() {
console.log('in failure');
}
});
Here logo is input type file. I want to send logo data with ajax request. Please help me to figure out the problem. Thanks
Not sure why you started a new question instead of editing Encode form data while fileupload true in Extjs Form Submit as this seems to be the same problem.
Assuming logo is your file upload field you are trying to get the file data using getValue does not actually return the file content (if you use modern there is a getFiles method which returns the selected file objects).
General problems with your approach:
As I stated in my original answer it is not a good idea to send files in a standard ajax request. In your case those problems are:
If you expect getValue to return file contents, you are potentially encoding binary data into a JSON string. This will maybe work but create a large overhead and as the only available JSON datatype that could handle this content is string your parser would have to guess that property company_logo contains binary data and needs to be somehow converted into some sort of file reference.
You are sending files without metadata, so when just adding the raw content into your JSON string you would not be able to detect the expected file type without testing the file in multiple ways
As far as I know you would not be able to access the file content in classic toolkit at all
Submitting the data as a form: In your original question you explained that you submit the form instead of doing Ajax requests which is generally the preferred way.
When you submit a form that contains a file upload field the form will automatically be submitted as multipart/form-data the raw files are added to the request body with it's original content while preserving metadata collected by the browser.
If you look at https://docs.sencha.com/extjs/7.0.0/modern/Ext.Ajax.html#method-request you would have to set isUpload to true and use the form proeprty instead of params, passing a reference to the parent form.
I try to pass my JS variable into razor, my script fragment:
select: function (event, ui) {
var docID = ui.item.DoctorCode;
#{
string org_code = _unitOfWork.Doctors.GetById("").OrganizationCode;
}
doctorOrgLabel.text('#org_code');
}
In GetById() method i want to pass JS variable docID. I'd appreciate any help!
I try to pass my JS variable into razor
This sentence makes strictly no sense at all.
Razor is a view engine used by the ASP.NET MVC framework running on the server to produce some HTML template.
javascript on the other hand is a client side language running on the client. Once the HTML template is rendered to the client and javascript starts to execute there's no longer such notion as Razor.
If you want to pass some javascript variable to the server you have a couple of options:
make an AJAX call to the server
set the value of this variable in some hidden field inside a form and submit this form
use window.location.href to redirect to the server and passing the variable as query string parameter
store the javascript variable in a cookie which will be sent to the server on subsequent requests
var search= document.getElementById('appMenu').value
document.location.href= '${createLink(controller: 'application' , action:'ajaxAppSearch', params: ['query': search])}'
The element appMenu is a text field, so I am getting the value that the user enters into the text box to pass into a search controller. However, it keeps telling me that the params query is null. It seems that search isn't being passed into the create link method. Anyone have a suggestion?
Grails (controllers, GSP and tags, etc) are working on server side. JavaScript on client side. And this link is prepared before sending data to browser, and before JavaScript can pass its variable into GSP tag.
But you can prepare base link on server side, and add extra parameter on client side, by using javascript, like:
var search= document.getElementById('appMenu').value;
document.location.href= '${createLink(controller: 'application' , action:'ajaxAppSearch')}?query=' + escape(search);
I have an HTML form to update the address in the account that submits to a Java servlet.
The problem is that, the form should not accept free flowing address text. Instead the user should enter the zip code/house number/street name, and hit a search button.
This search needs to go to a webservice, perform authentication and get a list of valid addresses that match the search criteria.
This list of addresses should be displayed to the user in the same form (either unhide a hidden element or use a modal dialog), so the user can pick his address.
Only after the valid address is picked, the user should be able to hit the form submit button which sends the data back to the servlet.
I am not sure how to have these 2 buttons do different actions in the form. I am very new to JavaScript and any pointers or examples are much appreciated.
For your webservice build an output of the values based on a search result (a basic string). Put this data in a JSON statement or just a javascript array.
Return something that looks like this.
['SearchResult1', 'SearchResult2', 'SearchREsult3']
On your search box. Bind a function on change or blur.
$('#SearchBox').bind('change', function(){
var val = $(this).val();
//Please reference the Jquery Ajax function as im typing this from memory and i always mix one or two things up :).
$.ajax({
"type" : "post",
"url" : "yoururlhere",
"data" : { "search":val },
success : function(dataset){
//When it comes back here check to see if its valid data etc etc
//After you validate you can populate a picklist on the page with the values. Or do anything you want with the values like this
for(x in dataset){
$('#DocumentElement').append('<p>'+ dataset[x] +'</p>');
}
}
});
});
This should start you out. After that you can just do more things on the callback, or modify the dom in a way which suits you better :).
I'm working on a form upload element that can be used in the Zend Framework forms. I'm trying to make it so the programmer can use it in any project without having to manually configuring any settings.
The files are uploaded by an AJAX uploader which returns JSON data like:
[
{
"name":"image.png",
"size":42410,
"type":"image\/png",
"url":"http:\/\/example.com\/image.png",
"thumbnail_url":"http:\/\/example.com\/thumbnail\/image.png",
}
]
Since the uploader itself is a form element I'm trying to put that data in the form so on the submit the values can be retrieved from the $_POST.
I was adding hidden input fields with javascript named uploader-data[] (when submitting the form) but that only allows me to pass 1 variable at the time to the hidden field.
So I guess my question is: "How can I pass the whole array/object to the $_POST / form?". Even though I am using AJAX for the uploader itself I don't want to use it to submit the form. I want a regular form submit containing all the data from the JSON object/array. The files itself are already uploaded but I might want to use the JSON data in my database or at some other place.
Is it possible to do something like this?
Thanks in advance.
Put your javascript value into an input field using JSON.stringify
:
data = [
{
"name":"image.png",
"size":42410,
"type":"image\/png",
"url":"http:\/\/example.com\/image.png",
"thumbnail_url":"http:\/\/example.com\/thumbnail\/image.png",
}
]
document.getElementById('my_hidden_input').value = JSON.stringify(data);
This will turn your array in the following text value:
[{"name":"image.png","size":42410,"type":"image/png","url":"http://example.com/image.png","thumbnail_url":"http://example.com/thumbnail/image.png"}]
Zend can parse the JSON value into a php array.