Wenn man z.B. ein Product-Box per Ajax von einem Controller nach lädt, wird der "In den Warenkorb" Button nur als normale Form funktionieren und nicht den Off-Canvas Warenkorb nutzen per JavaScript. Weil bei dem initialisieren der Plugins der HTML-Code natürlich noch nicht da war. Das kann man aber einfach nachholen.
document.getElementById('productRecommendation').innerHTML = result.productRecommendation;
window.PluginManager.initializePlugins(document.getElementById('productRecommendation'));
Damit wird der HTML-Code nach Plugin-Markern durch sucht und die Plugins an den Elementen neu initialisiert.
We have out data seperated in chunks now. Now we have to write a script to send this data to the PHP-script or servlet to save it in a file. This is the elementary part of the the javascript-function and also the simple part. Because we append every chunk to the final file, we can’t work with asynchron requests. If you want to, you have to send also the number of the chunk, and also the final filesize to create a dummy-file and replace the part of the sent chunk. For the javascript the changes are no this big, but the server-side script become more complex.
So.. we will use the synchrone style and work with a simple for-loop to run through our array with the data chunks.
var result=null;
for(var i=0;i<chunks.length;i++){
var last=false;
if(i==(chunks.length-1)){
last=true;
}
result=uploadFileChunk(chunks,filenamePrefix+file.name,url,params,last);
}
return result;
Only the result of the request of the last chunk is returned. Because it is the chunk where the magic (copy from temp-folder to real target folder and create and save entity to database, etc) happens.
I send add a prefix to the filename to create a filename like userid+prefix+filename+fileextension (like *.part or somethin like this). So a user can upload more than one file with the same filename, without cause problems on server side.
But you should also send the original filename as something like "clearname". In this example you can add it to die params-array (params["clearname"]=file.name;) and use it as filename in the db-entity to set this name in header-data on download of this file or in lists of the uploaded files.
function uploadFileChunk(chunk,filename,url,params,lastChunk) {
var formData = new FormData();
formData.append('upfile', chunk, filename);
formData.append("filename",filename);
for(key in params){
formData.append(key,params[key]);
}
if(lastChunk){
formData.append("lastChunk","true");
}
else{
formData.append("lastChunk","false");
}
var xhr = new XMLHttpRequest();
xhr.open("POST", url,false); //false=synchron;
xhr.send(formData);
console.log("upload response-text: "+xhr.responseText);
return xhr.responseText;
}
This is the code where the upload is peformed. It is a FormData-Object (like a form in HTML) and is send via a synchron AJAX-Request.
Ein kleines Beispiel wie man sich eine eigene Validierung für Inputs in JavaScript basteln kann. Man kann es natürlich beliebig komplex machen und es sollte auch super mit Ajax funktionieren. Nur mit nicht required Inputs habe ich so mein Problem, da ich die gerne in neutraler Farbgebung hätte, wenn nichts eingegeben ist. So wären sie momentan einfach "valid" und damit grün. Falls dort jemand eine Lösung kennt, wäre es echt toll.
<html>
<head>
<style type="text/css">
input:valid{
border-color:#00FF00;
}
input:invalid {
box-shadow: none;
border-color:#FF0000;
}
</style>
</head>
<body>
<label>Test (should be 'allo')</label> <input id="blubb" type="text" required/>
<script type="text/javascript">
var func=function(){
var el=document.getElementById("blubb");
if(el.value=="allo"){
el.setCustomValidity("");
}
else{
el.setCustomValidity("value is not allowed");
}
}
document.getElementById("blubb").onchange=func;
</script>
</body>
</html>
bezahlt von 
Blog: Blog-entries by search-pattern/Tags: