I try to implement Fineuploader in my MVC4 project but it always fails to upload. What i did:
added css and js files to my view:
<link href="~/Content/fineuploader.css" rel="stylesheet" />
<script src="~/Scripts/js/util.js"></script>
<script src="~/Scripts/js/button.js"></script>
<script src="~/Scripts/js/dnd.js"></script>
<script src="~/Scripts/js/handler.base.js"></script>
<script src="~/Scripts/js/handler.form.js"></script>
<script src="~/Scripts/js/handler.xhr.js"></script>
<script src="~/Scripts/js/header.js"></script>
<script src="~/Scripts/js/jquery-plugin.js"></script>
<script src="~/Scripts/js/uploader.basic.js"></script>
<script src="~/Scripts/js/uploader.js"></script>
added the code for the upload button and exceution of the script (i think this isn't right?)
<script>
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('fine-uploader'),
debug: true,
request: {
endpoint: '/Upload/UploadFile/'
}
});
}
window.onload = createUploader;
</script>
added the C# files to my project FineUpload.cs, FineUploadResult.cs and the Controller UploadController.cs. I also added a route to the controller:
routes.MapRoute(
name: "upload",
url: "Upload/UploadFile",
defaults: new { controller = "Upload", action = "UploadFile" }
);
The controller is:
public class UploadController : Controller
{
[HttpPost]
public FineUploaderResult UploadFile(FineUpload upload, string extraParam1, int extraParam2)
{
...
}
}
But UploadFile is never called on the server.
You seem to have messed up your script inclusions (order and everything). You should choose whether you need to use the FineUploaderBasic mode, the FineUploader mode or the jQuery plug-in mode. Given your code you seem to be using the standard mode.
Here's a full working example and the minimal markup:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link href="~/Content/fineuploader.css" rel="stylesheet" />
</head>
<body>
<div id="fine-uploader">Click me to upload a file</div>
<script src="~/Scripts/js/header.js"></script>
<script src="~/Scripts/js/util.js"></script>
<script src="~/Scripts/js/button.js"></script>
<script src="~/Scripts/js/handler.base.js"></script>
<script src="~/Scripts/js/handler.form.js"></script>
<script src="~/Scripts/js/handler.xhr.js"></script>
<script src="~/Scripts/js/uploader.basic.js"></script>
<script src="~/Scripts/js/dnd.js"></script>
<script src="~/Scripts/js/uploader.js"></script>
<script type="text/javascript">
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('fine-uploader'),
debug: true,
request: {
endpoint: '#Url.Action("UploadFile", "Uploader")'
}
});
}
createUploader();
</script>
</body>
</html>
Also your controller action seem to be taking some extra integer parameter. If you do not specify it with the request, this request will obviously fail. Use a nullable integer in this case.
Related
So my MVC application keeps on throwing an Http internal server error with status code 500 when it renders my view.
The error it is throwing is a JQuery "Uncaught TypeError: $(...).select2 is not a function"
Uncaught TypeError: $(...).select2 is not a function
at HTMLDocument.<anonymous> (AddUser:381)
at fire (jquery-1.11.0.js:3100)
at Object.fireWith [as resolveWith] (jquery-1.11.0.js:3212)
at Function.ready (jquery-1.11.0.js:3424)
at HTMLDocument.completed (jquery-1.11.0.js:3454)
Using debugger tools, it throws the error here:
$('selectUser').select2();
This is how I call my script:
#section Scripts {
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/plugins/jquery-ui-1.8.16.custom.min.js")"></script>
#Scripts.Render("~/bundles/forms")
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('selectUser').select2();
});
</script>
Some SO posts suggest that this error is caused when you omit type="text/javascript"in your script tag or when you call the select2 function before the reference to the CDN service but as it clearly shows on my code all seems fine regarding the aforementioned.
According to this Uncaught TypeError: $(...).select2 is not a function, I am told to make sure if I have one version of JQuery loaded and all seems fine
Here is some additional code from my View that will help in reproducing the problem:
<script>
function submitForm() {
var usersRoles = new Array;
jQuery("#dualSelectRoles2 option").each(function () {
usersRoles.push(jQuery(this).val());
});
var model = new Object();
model.userId = jQuery('#selectUser').val();
model.rolesList = usersRoles;
console.log('model: ' + 'user: ' + model.userId + 'roles: ' + model.rolesList);
console.log('JSON: ' + JSON.stringify(model));
jQuery('#loading3').show();
jQuery.ajax({
type: "POST",
url: "#Url.Action("AddUser")",
dataType: "json",
contentType: "application/json",
data: JSON.stringify(model),
success: function (data) { showSuccessMessage(data); },
failure: function (errMsg) {
jQuery('#loading3').hide();
alert(errMsg);
}
});
return false;
}
//Shows the success message
function showSuccessMessage(data) {
jQuery('#loading3').hide();
alert(data);
}
</script>
Controller:
public ActionResult AddUser()
{
if (TempData["StatusMessage"] != null)
{
ViewBag.StatusMessage = TempData["StatusMessage"].ToString();
}
else
{
ViewBag.StatusMessage = "";
}
AddUserToRolesViewModel vm = new AddUserToRolesViewModel();
vm.Users = db.Users.ToList();
return View(vm);
}
EDIT:
Just to make sure that JQuery Core didn't load twice (once in Master and once in Content page) - I have included the markup for my master page.
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" />
#Styles.Render("~/Content/Template/css/style.css")
<!--[if IE 9]>
<link rel="stylesheet" media="screen" href="#Url.Content("~/Content/Template/css/ie9.css")"/>
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" media="screen" href="#Url.Content("~/Content/Template/css/ie8.css")"/>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" media="screen" href="#Url.Content("~/Content/Template/css/ie7.css")"/>
<![endif]-->
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/custom/general.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/plugins/ui.spinner.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/plugins/jquery.jgrowl.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/plugins/jquery.alerts.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/custom/elements.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/plugins/colorpicker.js")"></script>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="#Url.Content("~/Content/Template/js/plugins/excanvas.min.js")"></script><![endif]-->
<title>#ViewBag.Title</title>
</head>
<body class="loggedin">
#Html.Partial("_Header_top")
<!-- START OF MAIN CONTENT -->
<div class="mainwrapper">
<div class="mainwrapperinner">
#Html.Partial("_Menu_left")
<div class="maincontent">
<div class="maincontentinner">
#RenderBody()
</div>
<div class="footer">
#Html.Partial("_Footer")
</div>
</div>
</div>
</div><!--mainwrapper-->
<!-- END OF MAIN CONTENT -->
</body>
#RenderSection("scripts", required: false)
#Scripts.Render("~/bundles/jqueryval")
</html>
Update II:
So I went ahead to my App_Start folder and navigated to my BundleConfig.cs and there I noticed something:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Content/Template/js/plugins/jquery-ui-
1.8.16.custom.min.js"
}
According to this link: Usage of the ASP.NET MVC4 jquery/javascript bundles and I realized that file "~/Content/Template/js/plugins/jquery-ui-1.8.16.custom.min.js" had alreasdy been added to this bundle and referenced in my content page (AddUser.cshtml) as:
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/plugins/jquery-ui-1.8.16.custom.min.js")"></script>
At this point, I strongly believed this was going to fix the problem and so I removed this reference in my content page because I believed that that could be loading JQuery core twice but still nothing. The error still persists. What else can I do to try solve this?
Worthy mention that this error persists across all browsers (Chrome, IE & Firefox)
I am using bootbox.confirm with an ajax call, and I get the confirm box, but my screen is greyed out and I'm unable to select anything.
Here is what it looks like:
My first thought is that maybe my scripts are referenced wrong in _Layout, but I'm not sure:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
Bundles
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/moment.js",
"~/Scripts/bootstrap-datetimepicker.js",
"~/Scripts/jquery-ui.js",
"~/Scripts/Scripts.js"
);
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootbox.js",
"~/Scripts/respond.js"));
When inspecting here is what I have:
<body class="modal-open">
<div class="modal-backdrop fade in"></div>
<div class="modal-dialog">...</div>
Here is my script:
$(document).ready(function () {
var table = $("#Table").DataTable();
$("#Table.js-delete").on("click",
function () {
var link = $(this);
$("body").removeClass("modal-open");
bootbox.confirm("Are you sure you want to delete this?",
function (result) {
$(".modal-backdrop").remove();
if (result) {
$.ajax({
url: "/api/Informations/" + $(this).attr("data-id"),
method: "DELETE",
success: function () {
table.row(link.parents("tr")).remove().draw();
link.parents("tr").remove();
}
});
}
});
});
});
please do inspect element check out classes applied to modal and main body in your page,i'm pretty sure this is because modal-backdrop active and stucked
here are few things you can do
1) just add data-dismiss="modal" to button
2)If modal hide or visible, faded background is remained and does not let you click any where you can forcefully remove those by using below piece of code.
first hide your modal div element.
$('modalId').modal('hide');
secondly remove 'modal-open' class from body and '.modal-backdrop' at the end of the page.
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
This worked for me. You can try this please:
View:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index58</title>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="~/Scripts/bootbox.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
bootbox.confirm("This is the default confirm!",
function (result) {
console.log('This was logged in the callback: ' + result);
});
})
})
</script>
</head>
<body>
<div>
<input type="button" value="ShowModal" id="btn" />
</div>
</body>
</html>
I am trying to use bootstrap multiselect plugin in one of my ASPX pages. Along with the multiselect plugin I have several other jQuery controls in the same page (like autocomplete textbox etc) and some client side validations as well. Following is my bootstrap multiselect code:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="Styles/StyleSheetMasterDataForm.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="Styles/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="Styles/bootstrap-multiselect.css" type="text/css" />
<script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/bootstrap-2.3.2.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-multiselect.js"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function () {
debugger;
$("[id*=ListBoxProdEngine]").multiselect({
includeSelectAllOption: true
});
}); //Ending document.ready
</script>
HTML code:
<tr>
<td class="style6"><div class="style8"><strong>Product Engine:</strong></div></td>
<td class="style2"><asp:ListBox ID="ListBoxProdEngine" multiple="multiple" runat="server"></asp:ListBox></td>
</tr>
Code behind:
private void PopulateProductEngine()
{
try
{
ProductEngine objProductEngine = new ProductEngine();
ListBoxProdEngine.DataSource = objProductEngine.GetProductEngine();
ListBoxProdEngine.DataTextField = "ProductEngine";
ListBoxProdEngine.DataValueField = "ProductEngine";
ListBoxProdEngine.DataBind();
}
catch (Exception ex)
{
ErrorHandler.ReportError(ex); //Notifies technical team about the error
Server.ClearError();
Response.Redirect(string.Format("Error.aspx?aspxerrorpath={0}", Request.Url.PathAndQuery));
}
}
The error encountered is in the "multiselect" function in document.ready. Please help.
On Page 1 I get the object I need:
ProjectSearchCriteria = (GBLProjectSearchCriteria)Session[GblConstants.SESSION_PROJECT_SEARCH_CRITERIA];
I'm trying to pass this to an API on a page load of Page 2.
Page 2:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link href="../x.css" type="text/css" rel="stylesheet">
<link href="../Content/kendo.common.min.css" rel="stylesheet" />
<link href="../Content/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<form id="frmProjectSearchResults" runat="server">
</form>
<script src="../Scripts/ProjectsTreeView.js"> </script>
<script type="text/javascript">
CreateProjectTree(<%= ProjectSearchCriteria %>);
</script>
</body>
</html>
And this is the JavaScript function:
function CreateProjectTree(searchCriteria)
{
debugger;
var projects = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "../api/projects?searchcriteria =" + searchCriteria,
contentType: "application/json"
},
parameterMap: function (data, operation) {
return JSON.stringify(data);
}
},
schema: {
model: {
children: "seasons"
}
}
});
$("#treeview").kendoTreeView({
dataSource: projects,
loadOnDemand: true,
dataUrlField: "LinksTo",
checkboxes: {
checkChildren: true
},
dataTextField: ["Title"],
select: treeviewSelect
});
function treeviewSelect(e) {
var node = this.dataItem(e.node);
window.open(node.NotificationLink, "_self");
}
}
Can anyone help me understand what I'm doing wrong?
Maybe this:
<script type="text/javascript">
CreateProjectTree("\"" + <%= ProjectSearchCriteria %> + "\"");
</script>
This may be a pretty simple question about jQuery UI and Javascript, but I am still feeling my way through these syntax's. I am trying to update a jQuery progress bar whenever my C# (ASP.NET) program reaches a certain point in different functions. Am I doing this correctly? I can see the empty progress bar on my page, but I cannot get it to update its progress.
Here are my scripts:
<script type="text/javascript">
$(document).ready(function() {
$("#progressbar").progressbar({ value: 0 });
});
function updateProgress(number) {
if (number < 100) {
$("#progressbar").progressbar("value", number);
}
}
</script>
Here are some more of my script references:
<link href="Styles/tomcat.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="colorbox.css" />
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.21.custom.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery.colorbox.js"></script>
<link href="Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet" type="text/css" />
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.ui.core.js" type="text/javascript"></script>
<link href="Scripts/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.ui.progressbar.js" type="text/javascript"></script>
<link href="Scripts/ui.all.css" rel="stylesheet" type="text/css" />
And here is where I try to use the updateProgress() function via a C# function. I am trying to send "10%" to the progress bar but my debugger errors out and says that updateProgress() is not defined.
ScriptManager.RegisterStartupScript(this, this.GetType(), "temp", "<script language='javascript'>UpdateProgress(10);</script>", false);
EDIT: I added the following boolean to bypass the page refreshing and refreshing my progress bar.
var runOnce = new Boolean;
runOnce = false;
$(document).ready(function() {
if(!runOnce)
{
$("#progressbar").progressbar({ value: 0 });
runOnce = true;
}
});
I don't think it is working though. It still clears and sets it back to zero every page load.
javascript is case sensitive. either change your function declaration to UpdateProgress or change your injection to updateProgress.
also i believe you should including type="text/javascript" on your script tag - language is a deprecated attribute. related: What is the difference between "lang" and "type" attributes in a script tag?
Edit: to handle the progress getting overwritten:
var progressAlreadySet;
$(document).ready(function() {
$("#progressbar").progressbar(); // initialize
if (!progressAlreadySet) {
$("#progressbar").progressbar("value", 0);
}
});
var updateProgress = function (number) {
if (number < 100) {
progressAlreadySet = true;
$("#progressbar").progressbar("value", number);
}
};