I have created an application server side that will create a pdf of a report when requested. Then the link of that report can then be sent back to the client.
My question is how do I hook this up to a button click event in my asp.net mvc website. So the scenario is:
User fills in a few boxes.
Clicks the generate report button.
A little loading feedback indicator is shown.
A request is sent to the server, the server then generates the PDF report and sends back a url link to the pdf that is being hosted on the server.
The pdf will then be shown in the users browser (maybe in a new window).
Is this possible and is there any examples around that show how to do it?
Thanks in advance
I've done something similar.
When the user clicks the button it send an ajax request to the server passing some data:
$.ajax({
type: 'POST',
dataType: 'json',
url: '<%=Url.Action("GenerateReport", "MyController")%>',
data: { Param1: $('#Param1').val() , Param2: $('#Param2').val() },
beforeSend: function(xhr) {
$.blockUI({ message: '<h1> printing ...</h1>', css: { border: 'none', padding: '15px', backgroundColor: '#000', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', opacity: .5, color: '#fff'} });
},
success: function(result) {
if (result.Success) {
FetchPdfDocument('<%=Url.Action("GetPdfReport", "MyController", New With {.id = "/"})%>' + result.Guid);
}
else {
alert("Problems!");
}
},
complete: function() {
$.unblockUI();
},
error: function(req, status, error) {
alert(error);
}
});
The controller writes the document on the disk and sends back a guid which is the name of the PDF document.
This is the other bit of javascript which opens the file creating an IFRAME:
function FetchPdfDocument(UrlToPdf)
{
$('#ifPdfReport').remove();
$(document.body).append('<IFRAME id="ifPdfReport" style="display:none;">');
$('iframe#ifPdfReport').attr('src', UrlToPdf);
// $('#ifPdfReport').load(function () { });
}
I've used jQuery BlockUI as loading feedback indicator.
Hope it helps.
Related
The modal isn't triggered by a link on the page which the user has clicked. The modal is triggered when the user arrives on the url.
Think of something like a disclaimer that pops up as soon as the user arrives on the url.
You can use the Drupal.dialog function for this.
For example:
var $myDialog = $('<div>My dialog text</div>').appendTo('body');
Drupal.dialog($myDialog, {
title: 'A title',
buttons: [{
text: 'Close',
click: function() {
$(this).dialog('close');
}
}]
}).showModal();
See node.preview.js for another example.
Update: To use this with an AJAX request/response:
Drupal.ajax({
url: 'some/path',
success: function(response) {
var $myDialog = $('<div>' + response.data + '</div>').appendTo('body');
Drupal.dialog($myDialog, {title: 'Some title'}).showModal();
}
}).execute();
I am developing an application in Spring MVC which has a file upload functionality. I have seen a lot of answers regarding async file upload most of which are using ajax. I would like to know if it is possible for the user to navigate through the site while the file is being uploaded.
The uploadform is the input element I am tried to turn into a file uploader. This works fine, but the problem is the process doesn't run in the background. So if I navigate from the page, the upload is interrupted. Any directions regarding this is appreciated.
$("#uploadform").ajaxForm({
beforeSend: function() {
$("#progressBar").show();
$("#status").html('');
$("#progressBar").jqxProgressBar({ value:1 });
},
uploadProgress: function(event, position, total, percentComplete) {
if(percentComplete<90)
$("#progressBar").jqxProgressBar({ value:percentComplete });
},
success: function(response) {
console.log("response "+response);
responseAjax=response;
$("#progressBar").jqxProgressBar({ value:95 });
},
complete: function(xhr) {
$("#progressBar").jqxProgressBar({ value:100 });
if(responseAjax.indexOf('Success') !=-1)
$("#status").css('color','green');
else
$("#status").css('color','red');
$("#status").html(responseAjax);
//alert("Upload complete");
}
});
I'm trying to disable a submit button until an ajax function is completed.
Right now, I have only been able to figure out how to disable the button for a specified time when the user is typing.
How can I disable the submit button until the ajax data loads? Thank you.
<script>
$('#comment_comment').keyup(function() {
$("#new_comment_button").attr("disabled", true);
setTimeout(function() { $("#new_comment_button").removeAttr("disabled"); }, 2000);
});
$('#comment_comment').preview({ key:'my key',
selector : {type:'rich'},
preview : {
submit : function(e, data){
$.ajax({
dataType: 'script',
url: this.form.attr('action'),
type: 'POST',
data: data
});
},
},
autoplay : 0,
maxwidth : 350,
display : {display : 'rich'}
});
</script>
Disable the button when starts the AJAX with simple JS and enable it when the AJAX request finishes.
It would be something like this
$.ajax({...
success: function(){
submitButton.enable(); // Pseudo-code
},
...
});
You can do several things with the AJAX request. See this post for more information
EDIT: If you want to prevent the double submit request, there is a way to do it but I can't remember :/ and I didn't found it on google.
This is a way to do it, but I don't like it
I am showing lots of form using jquery dialog and I wish to add in client side validation on it. I read through some examples, saying that mvc 3 already somehow support jquery client side validation, but I tried by including the necessary script, and my form like this:
#using (Html.BeginForm("CreateFood", "Home", FormMethod.Post, new { id = "formData" }))
{
#Html.ValidationSummary(false, "Please fix these errors.")
When i try to submit my form without fill in the required field, I still dint get any message. Can anyone give me more idea / explanation / examples on this??
Really needs help here... Thanks...
UPDATE (add in the script for my dialog)
$createdialog.dialog("option", "buttons", {
"Cancel": function () {
//alert('Cancel');
$createdialog.dialog('close');
},
"Submit": function () {
var frm = $('#formData');
$.ajax({
url: '/Food/CreateFood',
type: 'POST',
data: frm.serialize(),
success: $createdialog.dialog('close')
});
}
});
Once dropped, open dialog:
// Once drop, open dialog to create food
options.drop = function (event, ui) {
// Get the ContainerImgName which food dropped at
var cimg = $(this).attr('id');
// Pass in ContainerImgName to retrieve respective ContainerID
// Once success, set the container hidden field value in the FoodForm
$.ajax({
url: '/food/getcontainerid',
type: 'GET',
data: { cImg: cimg },
success: function (result) { $('#containerID').val(result); }
});
clear();
$.validator.unobtrusive.parse($createdialog);
$createdialog.dialog('open');
};
I've faced the same problem, solved with:
$(name).dialog({
autoOpen: true,
width: options.witdth,
heigth: options.height,
resizable: true,
draggable: true,
title: options.title,
modal: true,
open: function (event, ui) {
// Enable validation for unobtrusive stuffs
$(this).load(options.url, function () {
var $jQval = $.validator;
$jQval.unobtrusive.parse($(this));
});
}
});
of course you can add the validation on the close event of the dialog, depends on what you're doing, in my case the popup was just for displaying errors so I've performed validation on load of the content. (this pop up is displaying am Action result)
For every dynamically generated form you need to manually run the validator once you inject this content into the DOM as shown in this blog post using the $.validator.unobtrusive.parse function.
I'm trying to disable a button after it's clicked. I have tried:
$("#ajaxStart").click(function() {
$("#ajaxStart").attr("disabled", true);
$.ajax({
url: 'http://localhost:8080/jQueryTest/test.json',
data: {
action: 'viewRekonInfo'
},
type: 'post',
success: function(response){
//success process here
$("#alertContainer").delay(1000).fadeOut(800);
},
error: errorhandler,
dataType: 'json'
});
$("#ajaxStart").attr("disabled", false);
});
but the button is not getting disabled. When I remove $("#ajaxStart").attr("disabled", false); the button gets disabled.
While this is not working as expected, I think the code sequence is correct. Any help will be appreciated.
Put $("#ajaxStart").attr("disabled", false); inside the success function:
$("#ajaxStart").click(function() {
$("#ajaxStart").attr("disabled", true);
$.ajax({
url: 'http://localhost:8080/jQueryTest/test.json',
data: {
action: 'viewRekonInfo'
},
type: 'post',
success: function(response){
//success process here
$("#alertContainer").delay(1000).fadeOut(800);
$("#ajaxStart").attr("disabled", false);
},
error: errorhandler,
dataType: 'json'
});
});
This will ensure that disable is set to false after the data has loaded... Currently you disable and enable the button in the same click function, ie at the same time.
In your code, you just disable & enable the button on the same button click,.
You have to enable it inside the completion of AJAX call
something like this
success: function(response){
$("#ajaxStart").attr("disabled", false);
//success process here
$("#alertContainer").delay(1000).fadeOut(800);
},
I have solved this by defining two jquery functions:
var showDisableLayer = function() {
$('<div id="loading" style="position:fixed; z-index: 2147483647; top:0; left:0; background-color: white; opacity:0.0;filter:alpha(opacity=0);"></div>').appendTo(document.body);
$("#loading").height($(document).height());
$("#loading").width($(document).width());
};
var hideDisableLayer = function() {
$("#loading").remove();
};
The first function creates a layer on top of everything. The reason the layer is white and completely opaque, is that otherwise, IE allows you to click through it.
When doing my ajax, i do like this:
$("#ajaxStart").click(function() {
showDisableLayer(); // Show the layer of glass.
$.ajax({
url: 'http://localhost:8080/jQueryTest/test.json',
data: {
action: 'viewRekonInfo'
},
type: 'post',
success: function(response){
//success process here
$("#alertContainer").delay(1000).fadeOut(800);
hideDisableLayer(); // Hides the layer of glass.
},
error: errorhandler,
dataType: 'json'
});
});
I solved this by using global function of ajax
$(document).ajaxStart(function () {
$("#btnSubmit").attr("disabled", true);
});
$(document).ajaxComplete(function () {
$("#btnSubmit").attr("disabled", false);
});
here is documentation link.
The $.ajax() call "will not block" -- that means it will return immediately, and then you enable the button immediately, so the button is not disabled.
You can enable the button when the AJAX is successful, has error, or is otherwise finished, by using complete: http://api.jquery.com/jQuery.ajax/
complete(XMLHttpRequest,
textStatus)
A function to be
called when the request finishes
(after success and error callbacks are
executed). The function gets passed
two arguments: The XMLHttpRequest
object and a string categorizing the
status of the request ("success",
"notmodified", "error", "timeout", or
"parsererror"). This is an Ajax Event.