Fine-Uploader title of the uploaded file - fine-uploader

First, i'm sorry for my bad english but I hope you'll understand my problem..
I'm trying to use FU to upload songs on a server.
I understood how worked the parameters in general but I cannot change the title of my songs.
I would like that users have to select a song (only one). onSubmit, an input appears to let him select the title of his song.
Until here, no problem.
But after uploading this song (when the drop area shows again) when I want to upload another one, it takes the same title than the one I chose before.
I'll try to explain it better.
I choose a song.
The drop area is hidden onsubmit
An input appears to let the user change the title of his song
A OK button appears to validate when the title has benn chose
On click (ok button), the upload begin and the drop area is visible again
Same scenario
For the second song, whatever I enter in the input, it will take what was written in the input for the first song
Here is my code:
.on('submit', function(){
$('.qq-upload-drop-area').hide();
$('.qq-upload-button-selector').hide();
$('.valider_chanson').show();
});
$('.valider_chanson').click(function(){ //button OK
var input_title = $('#song_title').val();
var dropzone_titre = $('.dropzone_titre');
var drop_area = $('.qq-upload-drop-area');
var upload_button = $('.qq-upload-button-selector');
if(input_title == "")
{
//Titre de chanson obligatoire
alertify.alert('Vous devez sélectionner un titre pour votre morceau');
}
else{
//On recache le bouton jusqu'au prochain upload
//$('#uploadSelectedFiles').hide();
//On renomme le champ visible par le nom saisi
//$('.qq-editable').text(input_title);
//$('.qq-edit-filename').val(input_title);
var new_input_title = $('.qq-edit-filename').val();
//On lance l'upload
SongsUploader.fineUploader('uploadStoredFiles');
//dropzone_titre.hide();
$('.valider_chanson').hide();
}
});
.on('upload', function(event, id, name){
var fileItemContainer = $(this).SongUploader('getItemByFileId', id);
var enteredTitle = $('#input_title').val();
//enteredTitle = $(fileItemContainer).find('INPUT[name="title"]').val();
$(this).fineUploader('setParams', {title: enteredTitle}, id);
//$(this).fineUploader('setName', {title: enteredTitle}, id);
$(this).fineUploader.setName(enteredTitle, id);
})
// I dont understand very well how the 'setParams' and 'setName' works
I would really thankfull if someone could help me.. Thanks by advance!
Cordially,
-B

You may need to reverse the parameters for setName.
Right now, you have setName(enteredTitle, id), but it should be setName(id, enteredTitle)
.on('upload', function(event, id, name){
var fileItemContainer = $(this).SongUploader('getItemByFileId', id);
var enteredTitle = $('#input_title').val();
$(this).fineUploader('setParams', {title: enteredTitle}, id);
$(this).fineUploader('setName', id, enteredTitle);
})
Source: setName in the documentation.
Update
Below is how you would set the filename and upload a single file at a time. Note that if you provide a qq-edit-filename-selector element which serves as an input element. This is already provided in the default temoplate, so you may not need to change that at all.
<input class="qq-edit-filename-selector">
$(document).ready(function(){
// when a user clicks this button is should trigger the upload
$("#upload_button").on('click', function(){
$("#fineuploader-traditional").fineUploader("uploadStoredFiles");
});
// but we want to hide the button until we have a file
$("#upload_button").hide();
$("#fineuploader-traditional").fineUploader({
debug: true,
multiple: false,
template: "qq-template",
autoUpload: false,
request: {
endpoint: "/uploads"
}
})
.on('submit', function(event, id){
// a file has been submitted, so let us show the upload button
$("#upload_button").show();
})
.on('validate', function(){
// Do not allow more than one file to be in the queue at a time.
var status = [qq.status.SUBMITTING, qq.status.SUBMITTED, qq.status.QUEUED, qq.status.UPLOADING, qq.status.UPLOAD_RETRYING],
queuedFiles = $(this).fineUploader('getUploads', {
status: status
});
if (queuedFiles.length > 1) {
alert("One at a time");
return false;
}
})
.on('complete', function(){
// hide the button again (may want to check for success)
$("#upload_button").hide();
});
});
You can now click on the filename and edit it. The new filename will be sent to the server under the qqfilename parameter.

Related

How to create a share button in laravel?

How can I create a share button, and also get count for each post shared?
In your Blade file that outputs the article, you can output a button. this contains a hidden textarea as a child element. With JS you can put a click event listener on it.
So you can copy the URL to the post. I hope I have understood it correctly?
document.addEventListener("click", function(e)
{
const textArea = document.createElement("textarea");
textArea.value = e.target.querySelector('.url-container').innerHTML;
document.body.appendChild(textArea);
textArea.select();
let successful = null;
let msg = '';
try {
successful = document.execCommand('copy');
msg = successful ? 'successful' : 'unsuccessful';
} catch (err) {
console.warning('unable to copy');
console.warning(err);
}
document.body.removeChild(textArea);
if (successful) {
alert('copied');
// make an XHR call to your App Api for counting
}
});
<button id="share" data-test="test"><textarea class="url-container" style="display:none;">www.your-domain.com/your-post-x</textarea>Share Post X</button>

About knockoutjs - how to data-bind with text: and click:

How are you guys? I'm new to the framework Knockoutjs, I wonder if I'm doing it right. (Need a little help.) :)
I have a tag and would contain the same data-bind = text: anything and click: any function. The question is: Is it possible to do this? This is the correct way? Follow what I'm talking about: (I am using an example from the website itself) where when the user clicks the "Click Me" he adds +1 on the counter. I want that when the user clicks the tag call the same function. :)
HTML:
<div>You've clicked <span data-bind='text: numberOfClicks, click: registerClick'> </span> times</div>
JS:
var ClickCounterViewModel = function() {
this.numberOfClicks = ko.observable(0);
this.registerClick = function() {
this.numberOfClicks(this.numberOfClicks() + 1);
};
this.resetClicks = function() {
this.numberOfClicks(0);
};
this.hasClickedTooManyTimes = ko.computed(function() {
return this.numberOfClicks() >= 3;
}, this);
};
ko.applyBindings(new ClickCounterViewModel());
Follows the file jsFiddle: Here
Many thanks in advance.
Yes it is possible to have several binding pairs in one data-bind attribute.
You just have separated them with a comma ,
You asked : I want that when the user clicks the tag call the same function.
But you already code it.
You can click on the counter or on the button it increments the counter.

Jquery validator is not un-highlighting "chosen" select box

I am using Chosen with jquery valodation.
you can see this example: http://jsfiddle.net/hfdBF/9/
if you click submit, you see that the validation is working for combo and input.
if you put one letter in the input box you will get an alert that the letter un-highlighted, as it suppose to be.
BUT, if you choose in the select box a value, it wont be alert as un-highlighted.
do you have any idea how to get that to work?
$(function() {
var $form = $("#form1");
$(".chzn-select").chosen({no_results_text: "No results matched"});
$form.validate({
errorLabelContainer: $("#form1 div.error"),
wrapper: 'div',
});
var settings = $.data($form[0], 'validator').settings;
settings.ignore += ':not(.chzn-done)';
settings.unhighlight= function(el){
alert(el.name + " hit unhighlight")
}
});​​
Thanks
You don't need to do the validation manually. You can bind a function to the change event handler that will check if the specific select is valid. This will also clear the error if the select is valid.
$('.chzn-select').change(function () {
$(this).valid();
});
You need to reset the jQuery validation manually:
$(".chzn-select").chosen().change(function () {
var value = $('#UserCompanyIds').val(); // the select element
if (value != "") {
$('.field-validation-error').each(function () {
if ($(this).attr('data-valmsg-for') == 'UserCompanyIds') {
$(this).html("");
$(this).removeClass("field-validation-error").addClass("field-validation-valid");
}
});
}
});
I hope this helps!

What to do when users outrun ajax

My program does an ajax call when the user clicks on a radio button. Upon success, the background color of the table cell containing the radio button is changed to let the user know their selection has been posted to the database.
The problem is sometimes the background doesn't change. I'm trapping for errors, so I don't think it's because of an error. I'm wondering if the user is outpacing the success callback.
var setup = {};
setup.url = 'Gateway.cfc';
setup.type= 'POST'
setup.dataType='json';
$.ajaxSetup(setup);
var settings = {};
settings.data = {};
settings.data.method = 'Save';
settings.data.AssignmentID = $('input[name=AssignmentID]').val();
settings.error = function(xhr, ajaxOptions, thrownError) {
$('#msgErr').text(thrownError);
};
settings.success = function(result) {
$('#msg').empty();
$('#msgErr').empty();
if (result.RTN) { // uppercase RTN
$('#' + settings.data.AnswerID).addClass('answer');
} else {
$('#' + settings.data.AnswerID).next().append('<span class="err"> ' + result.MSG + '</span>');
}
}
$('input').filter(':radio').change(function() {
var myName = $(this).attr('name');
$('input[name=' + myName + ']').closest('td').removeClass('answer');
settings.data.AnswerID = $(this).val();
$.ajax(settings);
});
There is a delay between your Ajax post to the server and the ui element update on your screen. I do not know which Ajax library you are using, but you could plug into the Ajax framework and display a floating div element that covers the whole screen. This div could have other elements like an image or other divs, spans, p tags, etc. This is also called a dialog in some libraries.
I would recommend trying to find the before_Ajax_send and after_Ajax_receive functions in your Ajax library and attaching your functions to these events. The before_send function should display the floating div and the after_receive should close the div.
Hope this helps.
Gonna post this as an answer, on the off-chance that it does the trick :)
$('input').filter(':radio').change(function() {
$(this).closest('td').removeClass('answer');
var mySettings = $.extend(true, {data:{AnswerID: $(this).val()}}, settings);
$.ajax(mySettings);
});
This will make sure there are no race conditions with your settings if calls are made in quick succession.

I need help using jquery to post info from Pop Up to an MVC 3 Controller action

So I have a view that allows users to Approve or Reject items listed on the page. When approved, I simply use the #Ajax.ActionLink to post to the appropriate controller action. When the user Rejects an item, the user is required to enter a reason for the rejection. I'm found code on the internet that gave me a popup dialog and added a textbox and OK/Cancel buttons. I can capture the input from the user and show it in an alert, but now I need to complete it and I'm not sure how.
1st - I need add functionality to pass to my jquery link handler, the ID associated with the Item being rejected.
2nd - I need a way to call my Controller Action from the jquery.
Here is the code I have up to this point.
My link is simply an 'a' tag. I can't see to post the code for this without removing the <>
a href="#dialog" name="modal" Reject a
My script handles this here
$(document).ready(function () {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function (e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).val('');
$(id).fadeIn(2000);
});
Here is my pop up dialog and the mask that grays out the screen when the dialog is opened.
<div id="boxes">
<div id="dialog" class="window">
Enter the reason for rejection:</br>
<textarea class="multiline" id="rejectreason" rows="10" cols="20"></textarea><br/>
<div style="margin-left: 120px"><input type="button" value="OK" class="ok" style="width:70px"/> <input type="button" value="Cancel" style="width:70px" class="close"/>
</div>
</div>
<!-- Mask to cover the whole screen -->
<div id="mask"></div>
</div>
It could be that I'm going about this completely wrong, but it's all I could find on line and pieced it all together from there. As this is my first experience with jquery and MVC, I'm struggling a bit here. Any help would be greatly appreciated.
Thanks
UPDATE
OK, so I added a data-id attribute to my link that allows me to get the ID of the link clicked. I tested it using this code and it works.
var iD = $(this).attr('data-id');
I now need to pass this value to my dialog so I can then retrieve it again when the OK button on the dialog is clicked. I can set a hidden field on the page if necessary and retrieve it from there.
Here is some code to get you on the right path...
jQuery Ajax:
$(document).ready(function () {
$("#InputButtonId").click(function () {
$.ajax({
url: '#Url.Action("SomeAction", "Controller")',
type: 'POST',
data: { id: $("#hidden").val(), reason: $("#rejectreason").html },
dataType: "json",
beforeSend: function () {
},
success: function (result) {
// Do action if success
},
error: function (result) {
// Do action if error
}
});
return false;
});
});
And the controller action:
[HttpPost]
public JsonResult SomeAction(string id, string reason)
{
//Perform Actions
return Json(new
{
value1 = value1,
value2 = value2
}, JsonRequestBehavior.AllowGet);
}
Hope this helps.

Resources