Develop Reference

sortable and new created content [duplicate]

So I use jQuery UI sortable plugin to sort photos in a small gallery.
$(function() {
$("#area").sortable({
items: '.sort-wrapper',
cursor: "move",
handle: ".photo-handler",
opacity: 0.5,
scroll: true,
scrollSensitivity: 100,
scrollSpeed: 5,
revert: 100,
tolerance: "pointer",
update : function () {
var order = $('#area').sortable('serialize');
$.ajax({
type : 'POST',
url : '/file.php',
data : order
});
}
}).disableSelection();
On the same page I dynamically add and remove photos. PHP script returns HTML code with div's with image links and buttons "remove" and "move" (sortable handler).
Example:
<div class="sort-wrapper">
<img src="photo001m.jpg" alt="">
<button type="button" class="remove-this-photo">Remove</button>
<button type="button" class="photo-handler">Move</button>
</div>
The problem is sortable stops working when I add new files or remove a file(s) from #area. I've been looking for solution, have found sortable('refresh') method, but it's not working for me.
The script which adds new photos in the #area is quite standard. I use $.ajax({}) and .done, .fail, .always methods.
I managed to use sortable('destroy') method when starting uploading new files and do something like this after uploading is finished:
.always(function() {
$("#area").sortable();
});
The code above makes the #area sortable again, but I must copy all the settings again to configure it my way.
How to bind sortable to make it work after dynamic content is loaded or how to store all the settings outside sortable() and be able to use it again on the same page?

If you add new content to the sortable element you'll need to refresh the initialised instance. To do that, call the refresh option, like this:
.always(function() {
$("#area").sortable('refresh');
});

JS - How to change dynamically an image in my tinymce

I try to edit my images in the tinymce editor,
I already have an image into it, i try to edit the path of this image to change it dinamically with :
tinymce.activeEditor.selection.getNode().src = '/my/path/'
and it works, the image is edited but when i get the html content of my editor, the src still is the old image.
is there an other way to change the source of the image?

there's an easy way to do this, here take a look :
Create your custom file browser using file_browser_callback : myFileBrowser, in your tinymce.init.
Then in your callback function
function myFileBrowser(field_name, url, type, win) {
tinyMCE.activeEditor.windowManager.open(
{
file: './test.html',
title: 'My File Browser',
width: 420, // Your dimensions may differ - toy around with them!
height: 400,
resizable: 'yes',
close_previous: 'no',
},
{
window: win,
input: field_name,
},
);
return false;
}
by doing this you tell tiny mce to open a new popup wich is the file 'test.html', and you send to your popup two parameters
window : win, input : field_name.
Then in your test.html you can get those parameters like this :
var args = top.tinymce.activeEditor.windowManager.getParams();
this will give you an object with your parameters and value. you can now use a little jquery or whatever you want to replace the field of your image value with the path of your new image. and then close your popup.
Hope i helped you.

Dropzone.js - Setting Basic Parameters

I am trying to implement Dropzone.js into a custom CMS. I have no problems processing the files as needed in PHP, that's actually the easy part.
I need to know how to do the following on a page-by-page basis (will use the dropzone script in several pages for different functions):
Restrict the files types (jpg,jpeg,pdf)
Restrict the number of files that can be uploaded (some pages will
just be one file, some will be up to 100)
Restrict the Max File Size
Redirect the page or have a 'next' button/link appear when the file
upload is complete.
Can I add this at the bottom of the page, while addressing the settings:
<script src="../assets/global/plugins/dropzone/dropzone.js"></script>
<script>
jQuery(document).ready(function() {
// initiate layout and plugins
Metronic.init(); // init metronic core components
Layout.init(); // init current layout
Demo.init(); // init demo features
FormDropzone.init();
});
</script>

HTML:
<div id="my-dropzone"></div>
JavaScript:
var initDropzone = function( filesAllowed ){
Dropzone.options.myDropzone = {
paramName: "file",
uploadMultiple: true,
maxFiles: filesAllowed, //this will need to be set upon init,
acceptedFiles: ['image/jpeg', 'image/jpg', 'application/pdf'],
complete: function() {
alert('Your file was successfully uploaded!');
}
};
}
//init the dropzone
initDropzone( 4 );

Plupload_start not working

I have an odd problem, I want to upload files with plupload.ui to my server.
So my init script is like example on plupload site:
$(document).ready(function(){
var url = adminUrl +'/data/upload-users/';
var upload = $("#uploader").plupload({
// General settings
runtimes : 'html5,html4',
url : url,
// Maximum file size
max_file_size : '2mb',
chunk_size: '1mb',
// Resize images on clientside if we can
// Specify what files to browse for
filters : [
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip,avi"}
],
// Rename files by clicking on their titles
rename: true,
// Sort files
sortable: true,
// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
dragdrop: true,
// Views to activate
views: {
list: true,
thumbs: false, // Show thumbs
active: 'list'
}
});
});
And I have include all files:
<script src="/js/plupload/plupload.full.min.js" type="text/javascript"></script>
<script src="/js/plupload/jquery.ui.plupload/jquery.ui.plupload.js" type="text/javascript"></script>
But when I click on the Start Upload button nothing happens, not even an error is fired. In firebug the html line where this button is located is hightlined so I think "click" is working fine.
Form for uploading is generated, even drag&drop is working (thumbnail is generated, shown filed size after drop etc);
I also tried setting uploader to variable and manually binding event to button:
var uploader = $('#uploader').pluplad({...});
$('body').on('click','#upload_start',function(e){
uploader.start();
});
But nothing happened. Any suggestions why this is happening, anybody else had same problem?

Any ideas why my blueimp jQuery file upload script is not working?

I'm using blueimp JQuery file upload script to fancy the uploading of files. You can download it here: https://github.com/blueimp/jQuery-File-Upload/zipball/master (ZIP).
Here is a snippet of the JavaScript code:
$(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
// Dirs
url: 'accesspoint/upload.php',
uploadDir: 'accesspoint/files/',
thumbnailsDir: '',
// Options
autoUpload: 1,
maxNumberOfFiles: 1,
limitConcurrentUploads: 1,
maxFileSize: 1000000,
});
// Load existing files:
$.getJSON($('#fileupload form').prop('action'), function (files) {
var fu = $('#fileupload').data('fileupload');
fu._adjustMaxNumberOfFiles(-files.length);
fu._renderDownload(files)
.appendTo($('#fileupload .files'))
.fadeIn(function () {
// Fix for IE7 and lower:
$(this).show();
});
});
// Open download dialogs via iframes,
// to prevent aborting current uploads:
$('#fileupload .files a:not([target^=_blank])').live('click', function (e) {
e.preventDefault();
$('<iframe style="display:none;"></iframe>')
.prop('src', this.href)
.appendTo('body');
});
});
Now take a look at http://www.mcemperor.nl/test/appstest/blueimpjqueryfileupload/example/. We can upload a file, and it works.
Now if I upload a file which is larger than the maximum file size defined in the JavaScript snippet above, then you'll see something like this.
Perfect, works as expected. (Note that I have set the maximum upload size to 1000000 bytes, so if you upload a file of 1 MB, it states the file is too big.)
But... Now when I paste the same script (with some small modifications) as a module into a framework of some kind, the script won't work properly; I get this:
As you can see, The 'delete entry' icon is smaller (it's supposed to be square) and nothing happens when I click on it.
I do not have any clue what can be the problem. Does anyone have ideas?
Can using this script inside another <form> be the problem?
Can multiple elements with the same id be the problem?
Can collisions between javascripts (e.g. redefining functions or objects) be the problem?

I am not sure how to fix the scripts, but maybe a workaround would be to locate the element using FireBug and patch it with a css entry or a jquery function. Also, you might take a look at jquery.fileupload-ui.css which is the css file responsible for overriding jqueryUI elements for the control. I do know that the buttons are styleable independently. Again, I am not for certain, but there may be a class added via script to change the icon on the delete button.