I'm trying to integrate Plupload with JSF in the most independent way possible, for that I created a composite component.
To use Plupload in my JSF page i just call:
<comp:plupload ... value=#{MyBean.files} />
Where MyBean.files is a list.
When I add files to Plupload component and click the button "start upload" I want it to upload everything to a temporary folder and fill the object specified in "value" of my composite component with these files properties (path, for instance).
To upload the files i'm using a servlet, it has nothing to do with JSF, it works fine for the 1st part: it uploads everything to a temporary folder. My problem is the second part, I did a lot of research, but I can't find a way to communicate the attribute "value" in my JSF composite component to my servlet.
Plupload uses javascript to configure everything, the request will be sent to the URL specified in the attribute "url" in the following code:
<composite:interface>
...
<composite:attribute name="value" required="true" />
</composite:interface>
<composite:implementation>
...
<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function() {
$("#uploader").pluploadQueue({
// General settings
runtimes : '#{cc.attrs.runtimePreferences}',
url : '/plupload',
max_file_size : '#{cc.attrs.maxFileSize}',
...
});
});
</script>
<div id="uploader">
<p><h:outputText value="Your browser does not support this." /></p>
</div>
</composite:implementation>
I specified "/plupload" as url, that's my servlet's url (in web.xml).
I can think about two possible solutions:
Continue using this servlet, which is completely independent from FacesServlet, and find a way to pass the attribute "value" in my composite component as a request attribute to my servlet. But, how can I do this?
Stop using a new servlet, I should't do this since I'm using JSF, everything should be processed by FacesServlet. Instead of using a new servlet, i could create a ManagedBean. Inside this managedBean I could create a method and recover the HttpRequest and HttpResponse. It's easier to comunicate my compositeComponent with the method who handles the upload if it's a managedBean. Problem: How can i reference a managedBean's method through an URL? I still have to fill the attribute "url" in the javascript code. Is there anything like "/faces/MyBean?action='myMethod()'?
Thank you in advance for any answer ;)
Send it as request pathinfo.
url: '/plupload/' + encodeURIComponent('#{cc.attrs.value}'), // You might want to escape JS special characters like singlequotes, newlines, etc as well, depending on what the value can contain.
If the servlet is mapped on /plupload/* then you can obtain it as follows:
String value = request.getPathInfo().substring(1);
Related
I'm working on QuickBloxx platform and had a use case where , I need to use some custom data models,I created a custom/class with one text and one file/img as datamodel fields.
I thoroughly followed the following url/documentationlink to quickbloxx custom objects files uploads:
For debug purpose I'm using Post to initiate POST request to Quickbloxx API as follows:
https://api.quickblox.com/data/coupon/file.json?token=mytoken , "coupon", was my object name.I'm able to POST text content to "customer_name" attribute but I cannot POST image to cust_img attribute.
You need to familiarize with this guide:
http://quickblox.com/developers/Javascript#Getting_started
{"errors":{"base":["Required session does not exist"]}} - need to create a session to avoid this error
Through Ajax I am trying to hit action method (city) of controller (Home) using below code
url: '#Url.Content("~/Home/city")',
from the address bar I found that the Url is mismatched as I am in different controller. For example if I am in site controller then it is redirecting to site/Home/city. In place of this it should redirect to Home/city. Means its taking the current controller and the url which I am passing through Url.Content.
If I place javascript code in .aspx then the Url getting redirect correctly, if the javascript code is in separate file it raising the above mentioned issue.
How to redirect to particular Url from javascript?
If your JavaScript is in an external file you can use the following technique to access the route path to your action.
Simply attach the url to the element which invokes the ajax call as a data attribute.
In the below example I attach it to an input button.
<input data-url="#Url.Action("city", "Home")" value="DoPost" />
Then from within your event handler you can use jQuery data method to read the attribute i.e.
var superUrl = $(this).data('url');
Then use this in your ajax call:
url: superUrl
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 placed some XML files under a directory. I need to populate a drop down using javascript to display all those XML file names. How do I do that?
You've been way too broad when it comes to circumstances and situation, so I'll be broad back with an answer.
Given the following:
The web-page with the <select> you need to populate is hosted on the same server as the file list.
The server has the ability to use a server-side language (e.g. PHP, ASP)
You don't mind, or can at least decipher jQuery code (makes what I'm about to post more about the concept than the practice)
You will need something like the following setup:
Create a server-side file that dumps a list of file names
You're going to need to look up some way to retrieve and dump the list of the files. This is so JavaScript & AJAX can go fetch this list and dump in in to the drop-down list. Example output of said script (which I'm aliasing as /server-side-file-list in the JavaScript below)
file-001.xml
file-002.xml
file-003.xml
file-004.xml
Setup the <select> on your page
<!-- Somewhere in the page -->
<select id="xml-file-list" name="xml-file-list"></select>
Setup the JavaScript/Ajax code
<!-- This should go in the <head></head> portion of your page with the select -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url: '/server-side-file-list',
success: function(d){
$.each(d.split(/[\r\n]+/),function(i,e){
$('<option />',{ value: e }).text(e).appendTo('#xml-file-list');
});
}
});
</script>
Basic work-flow:
HTML page loads up with an empty <select>
jQuery takes over and fetches a list of files from that /server-side-file-list script using AJAX (behind the scenes)
The results are returned and placed in to the <select> as <option>s.
Done.
--
Food for thought:
A better method may be to load your file list in to the page at run time (if possible). That is to say, if the page you're working on is an ASP or PHP or other type of server-side language page, you can retrieve the file list when the page is called upon and load it at that time (and avoid using javascript altogether).
Assuming you're talking about local files, you need a browser that supports the W3C FileSystem API.
You can test for compatibility at www.html5test.com
If you're completely agnostic about the name of xml file you will need a server-side language to get a list of file of a server directory.
Otherwise, if you're in control of filenames, a workaround could be give them a progressive name (e.g. 1.xml, 2.xml...) and try to make some chained ajax HEAD calls.
If the ajax request of 1.xml returns a 200 server status, then ask for 2.xml and so on, until you get a 404 error. For each ajax call you can add the name to an array and then use it to create a dynamic select.
Of course, for a matter of performance, this should be intended only as a workaround and it's not reliable at all, since a 404 could occur even if the resource exists, so I strongly suggest to use a server side language
anyway this is a jQuery 1.5+ example explaining the workaround. Suppose you have 1.xml, 2.xml and 3.xml. The HTML is just an empty select
<select id="xmlfiles"></select>
Javascript/jQuery
<script>
$(document).ready(function() {
/**
* we need to only know if the resource exists or not
*/
$.ajaxSetup({ type : "head" });
/**
* Function reading xml file. When deferred has been resolved
* (when first 404 occurs) an array of filename is passed.
*/
function getXMLFile(path) {
var deferred = $.Deferred(),
xmlFiles = [];
(function getFile( i ) {
var url = [path, i, '.xml'].join('');
$.when($.ajax(url))
.done(function() {
xmlFiles.push(url);
getFile( ++i );
})
.fail(function() {
deferred.resolve(xmlFiles);
});
}(1));
return deferred.promise();
};
/**
* when we have read xmlfiles in "./" then for each file
* retrieved append an option
*/
$.when(getXMLFile('./')).then(function(file) {
var select = $('#xmlfiles');
/* create options */
$.each(file, function(i, filename) {
var option = $('<option></option>');
option.html(filename).attr('value', filename).appendTo(select)
})
});
});
</script>
and this shows a select with options
./1.xml
./2.xml
./3.xml
(Sorry for my verbosity)
I have built a calendar in php. It currently can be controlled by GET values from the URL. Now I want the calendar to be managed and displayed using AJAX instead. So that the page not need to be reloaded.
How do I do this best with AJAX? More specifically, I wonder how I do with all GET values? There are quite a few. The only solution I find out is that each link in the calendar must have an onclick-statement to a great many attributes (the GET attributes)? Feels like the wrong way.
Please help me.
Edit: How should this code be changed to work out?
$('a.cal_update').bind("click", function ()
{
event.preventDefault();
update_url = $(this).attr("href");
$.ajax({
type : "GET"
, dataType : 'json'
, url : update_url
, async : false
, success : function(data)
{
$('#calendar').html(data.html);
}
});
return false;
});
Keep the existing links and forms, build on things that work
You have existing views of the data. Keep the same data but add additional views that provide it in a clean data format (such as JSON) instead of a document format (like HTML). Add a query string parameter or HTTP header that you use to decide which view to return.
Use a library (such as YUI 3, jQuery, etc) to bind event handlers to your existing links and forms to override the normal activation functionality and replace it with an Ajax call to the alternative view.
Use pushState to keep your URLs bookmarkable.
You can return a JSON string from the server and handle it with Ajax on the client side.