I have a upload function in my app. this function uploads an excel file and the parses it and copies the data the database. The actual upload doesn't tale that long but the parsing does. I would like to have a progress bar so i could give the user some fees back.
I am not quite sure how to go about doing this. The stuff I have found online hasn't been that helpful.
This What I have so far ..
My View:
<div>
#using (Html.BeginForm("Upload", "Administrator", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.ValidationSummary(true, "File upload was unsuccessful. Please correct the errors and try again.")
<input type="file" name="FileUpload1" />
<input type="submit" name="Submit" id="Submit" value="Upload" onclick=" return startUpload();"/>
}
</div>
<input type="button" value="test" onclick=" return startUpload();"/>
<div id="loadingScreen" title="Loading...">
<div id="progressbar"></div>
</div>
My Scripts:
<script type="text/javascript">
$(document).ready(function() {
// create the loading window and set autoOpen to false
$("#loadingScreen").dialog({
autoOpen: false, // set this to false so we can manually open it
dialogClass: "loadingScreenWindow",
closeOnEscape: false,
draggable: false,
minWidth: 30,
minHeight: 30,
modal: true,
buttons: {},
resizable: false,
open: function(event, ui) {
$(".ui-dialog-titlebar-close").hide();
},
}); // end of dialog
});
$(function () {
//Progressbar initialization
$("#progressbar").progressbar({ value: 0 });
});
function startUpload() {
if (confirm("Doing this will override any previous data. Are you sure you want to proceed?")) {
$("#loadingScreen").dialog('open');
startProgressBar();
return true;
} else {
return false;
}
}
function startProgressBar() {
//Making sure that progress indicate 0
$("#progressbar").progressbar('value', 0);
//Setting the timer
setTimeout("updateProgressbar()", 500)
};
function updateProgressbar() {
$.get('#Url.Action("UploadProgress")', function (data) {
alert(data);
//Updating progress
$("#progressbar").progressbar('value', data);
setTimeout("updateProgressbar()", 500)
});
};
</script>
What this does is it brings up the modal dialog box with the the progressbar but the bar doesnt get updated.
however if I have the following button
<input type="button" value="test" onclick=" return startUpload();"/>
this brings up the modal box and updates the bar as well.
What I can understand from this is that since the upload button is doing a post I cant to a get till is finishes ...???
I am not that comfortable with JavaScript so if I am doing something really horrible please let me know ...
This may be overkill but you can use SignalR. This is a library specifically for real-time communication between the server and client.
You would upload the file using a regular action, then render a SignalR-page showing the parsing progress (the server sends the client regular updates as it parses).
See this article for a walk-through specifically about a progress bar.
There's nice and easy progress bar, it's just HTML+CSS+JavaScript. You have to call a JavaScript function to refresh the slider. Find description here: progress bar
May this will help you..
Simply call the fadeIn() method on your submit click.
$('Submit').click(function () {<br />
$("#loadingScreen").fadeIn();<br />
});
Related
I'm using Summernote as a wysiwyg editor but I have one problem. Most of my text editing goes in the code view and the problem is that if you submit the form while in code view, the edited text does not become saved.
For some reason I need to switch between code view and wysiwyg view to save get the edited text saved. Anyone have any clues on how to fix this?
I have seen this Not saving content while in code view? #127 but it does not work for me.
Here is my code.
$(document).ready(function() {
$('#desc').summernote({
height: 1000, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: true, // set focus to editable area after initializing summernote
codemirror: {
mode: 'text/html',
htmlMode: true,
lineNumbers: true,
theme: 'monokai'
},
callbacks: {
onBlur: function() {
//should probably do something here
},
onInit: function() {
console.log('Summernote is launched');
$(this).summernote('codeview.activate');
}
}
});
});
If necessary here is the html.
<textarea name="desc" id="desc" class="form-control" rows="40"></textarea>
Try to do something like this.
$(document).on("submit","#my-form-name",function(e){
$("#desc").val($('#desc').code());
return true;
});
$(document).on("submit","#my-form-name",function(e){
if ($('#desc').summernote('codeview.isActivated')) {
$('#desc').summernote('codeview.deactivate');
}
});
This copies summernote's code value into the value of the text
$(#desc).on('summernote.blur.codeview', function() {
$(#desc).val($(desc).summernote('code'));
});
Looks like using the onblur callback could have also worked: https://summernote.org/deep-dive/#initialization-options
$($('.summernote').closest("form")).on("submit",function(e){
if ($('.summernote').summernote('codeview.isActivated')) {
$(".summernote").val($('.summernote').summernote());
return true;
}
return true;
});
$($('.summernote').closest("form")).on("submit",function(e){
if ($('.summernote').summernote('codeview.isActivated')) {
$('.summernote').summernote('codeview.deactivate');
}
});
Sorry, if not understandable on some points, I'm trying my best:
I'm trying to fix my little AJAX bug, which contains a file upload with ajaxSubmit. I want to show a progressbar but when first clicking on the submit button, the OnProgress event does not work, although the consolelog shows the percentage of the completion.
After the first upload, I'm choosing another file WITHOUT refreshing the page. From this time on, the progressbar works perfectly.
What problem does cause the OnProgress event not to start on the first time?
HTML:
<form method="post" action="<?php echo URL; ?>album/uploadImage/<?php echo $this->album->id; ?>" enctype="multipart/form-data" id="form_upload">
<input id="imgUpload" name="file_upload" type="file" required />
<div class="progress success radius">
<span class="meter"></span>
</div>
<input type="submit" value="Bild hochladen" id="submitupload" />
</form>
jQuery, in connection with the jQuery Form plugin: (Please check the comments on the function OnProgress!)
var progressbar = $('.meter');
var completed = '0%';
var options = {
target: 'body',
beforeSubmit: beforeSubmit,
uploadProgress: OnProgress,
success: afterSuccess,
resetForm: true
};
$(document).ready(function() {
$('#form_upload').submit(function() {
$(this).ajaxSubmit(options);
return false; // Verhindert das Neuladen der Seite!
});
});
function OnProgress(event, position, total, percentComplete) {
console.log("OnProgress called: " + percentComplete + "%");
progressbar.width(percentComplete + "%");
// This line is only working AFTER the first time.
// When clicking on the submit button the first time,
// the progressbar does not increase.
}
function afterSuccess() {
console.log("AfterSuccess called.");
}
function beforeSubmit() {
console.log("BeforeSubmit called.");
}
In addition after the first time I uploaded a picture, other jQuery initializations are not working anymore. I'm using the Foundation 5 Framework and initialize it with
<script>
$(document).foundation();
</script>
But after the first picture, some events like the Alert-Box closing link are not working anymore.
After 2 days, I found the problem.
var progressbar = $('.meter');
var completed = '0%';
both were not loaded, this means, they're not in the
$(document).ready(function () { ... });
bracket.
So the progressbar and the value of "completed" were initialized on the second upload, when the body was refreshed.
This also solved the problem with the success alert-box, which showed up after the upload. Finally, I can close the alert-box with a simple click on its cross.
I have a LinkButton that executes on the server and changes the page. Historically, I've had a confirm message box that executes OnClientClick to ensure the user would like to navigate away.
So far it looks like this:
ASP.NET:
<asp:LinkButton runat="server" ID="ChangePage" Text="Change page"
OnClientClick="confirm('are you sure you want to change page?');"
OnClick="Navigate" >
Change Page
</asp:LinkButton>
HTML Output:
<a id="MainContent_ChangePage"
onclick="confirm('are you sure you want to change page?');"
href="javascript:__doPostBack('ctl00$MainContent$ChangePage','')" >
Change page
</a>
This all works fine like this. The trouble is that I'm trying to replace all confirm boxes with a prettier jQuery-UI implementation like this:
window.confirm = function (message, obj) {
$('<div/>')
.attr({ title: 'Webpage Confirm'})
.html(message)
.dialog({
resizable: false,
modal: true,
width: 500,
buttons: {
"OK": function () {
__doPostBack(obj, '');
$(this).dialog('close');
return true;
},
"Cancel": function () {
$(this).dialog('close');
return false;
}
}
});
};
I believe this has to do with the fact that the confirm dialog operates synchronously, while jQuery dialogs occur asynchronously. However, I thought setting modal: true would cause it to wait for a response.
How can I override window.confirm to get consistent behavior?
Add this to OK action:
var href = $(obj).attr("href");
window.location.replace(href);
window.navigator.location(href);
return true;
And remove __postback line
it works with me
I have a button with which i want to use the "upclick"-plugin for uploading files
<script type="text/javascript" src="~/Scripts/upclick-min.js"></script>
<input type="button" id="uploader" value="Upload" >
<script type="text/javascript">
var uploader = document.getElementById('uploader');
upclick(
{
element: uploader,
action: '/path_to/you_server_script.php',
onstart:
function(filename)
{
alert('Start upload: '+filename);
},
oncomplete:
function(response_data)
{
alert(response_data);
}
});
Now the button works in itself and opens the "open file"-dialogue, but i cannot seem to fire the "click"-event on it programmatically. Ive tried all different ways of writing it syntax-wise:
if (ui.draggable.hasClass('ui-dragdrop-picElement')) {
//$("uploader").trigger("click");
//$("uploader").click();
//$('uploader').click();
//$('#uploader').click();
//$("#uploader").click();
//$("#uploader").trigger("click");
//$('button#uploader').trigger('click');
$('#uploader').trigger('click');
alert("w00t");
}
and so on - any idea why it wont fire - i get the alert message!
$("uploader")...
This isn't valid. There is no <uploader> element.
Your last .click uses the correct selector, but you'll want to use this with the .trigger() event:
$("#uploader").trigger("click");
You'll probably benefit a lot from going through the official jQuery tutorial: http://try.jquery.com.
I have read most of the posts on here relating to this issue and I still can't see what's wrong. Can someone have a looksy please? I am getting an error "Cannot read property 'unobtrusive' of undefined" If I comment out that line then I get "cannot read property 'options' of undefined" So obviously I have something referenced improperly but I can't see it. If I take all the validation code out the form pops up and works fine, but of course no validation. Also, I've tried putting "#updateContactForm" in place of "#updateDialog" and got the same results. Hoping this is something simple that I just can't see from looking at it for too long. Thanks in advance!
<div id="updateDialog" title="Update Contact"></div>
<script type="text/javascript">
var linkObj;
$(function () {
$(".editLink").button();
$("#updateDialog").dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons: {
"Update": function () {
$("#update-message").html(''); //make sure there is nothing on the message before we continue
$("#updateContactForm").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$(".editLink").click(function () {
//change the title of the dialog
linkObj = $(this);
var dialogDiv = $("#updateDialog");
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
//validation
var $form = $("#updateContactForm");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse($("#updateDialog"));
// Re add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);
//open dialog
dialogDiv.dialog("open");
});
return false;
});
Just to check, have you correctly referenced the jquery validation scripts in the cshtml or master page?.
You should load first the script jquery.validate.js and then the jquery.validate.unobtrusive.js one.