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);
}
};
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 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.
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.
I have a asp:dropdownlist which i have changed to jQuery multiselect. I have to group the data inside the dropdown. I am grouping this in runtime.If it is a normal asp dropdown its working. When applying jquery Multiselect its dosen't.
Source:
<link rel="stylesheet" type="text/css" href="Styles/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="Styles/jquery.multiselect.filter.css" />
<link rel="stylesheet" type="text/css" href="Styles/style.css" />
<link rel="stylesheet" type="text/css" href="Styles/prettify.css" />
<%--<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>--%>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.multiselect.js"></script>
<script type="text/javascript" src="Scripts/jquery.multiselect.filter.js"></script>
<script type="text/javascript" src="Scripts/prettify.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Create groups for dropdown list
$("option[classification='LessThanFive']").wrapAll("<optgroup label='Less Than Five' />");
$("option[classification='GreaterThanFive']").wrapAll("<optgroup label='Greater Than five' />");
});
</script>
<asp:DropDownList ID="MobileData" runat="server" OnDataBound="ddl_DataBound">
</asp:DropDownList>
//Code Behind:
protected void ddl_DataBound(object sender, EventArgs e)
{
foreach (ListItem item in ((DropDownList)sender).Items)
{
if (System.Int32.Parse(item.Value) < 2)
item.Attributes.Add("classification", "LessThanFive");
else
item.Attributes.Add("classification", "GreaterThanFive");
}
}
protected void Page_Load(object sender, EventArgs e)
{
ListItemCollection list = new ListItemCollection();
list.Add(new ListItem("1", "1"));
list.Add(new ListItem("2", "2"));
list.Add(new ListItem("3", "3"));
list.Add(new ListItem("4", "4"));
list.Add(new ListItem("5", "5"));
list.Add(new ListItem("6", "6"));
list.Add(new ListItem("7", "7"));
list.Add(new ListItem("8", "8"));
list.Add(new ListItem("9", "9"));
list.Add(new ListItem("10", "10"));
MobileData.DataSource = list;
MobileData.DataBind();
}
Where i'm wrong?
Its working for me here
make sure that the case is correct in the select though,
if you have LessThanFive in the JQuery and the HTML Renders as lessthanfive then the JQuery will not return a match.
EDIT
I have created a solution with the code you have given us and until i call $('select').multiselect(); i cannot get any styles applied either, and the option groups show up.
BUT once i do apply this script i get the same dropdown as given in this example. only then can i reproduce the symptoms.
Upon further investigation i looked and saw that i was calling the code to add the optGroup AFTER the $('select').multiselect(); was called,
so i think your alteration of the drop down is happening after the control is initalised.
put the script to add the optGroups as early as you can in the page, then add the code to init the multiselect control after that.
In the following code I get an error that says autocomplete function Object is not a property or method
Here is the code:
<title><%= ViewData["pagetitle"] + " | " + config.Sitename.ToString() %></title>
<script src="../../Scripts/jqueryui/jquery-ui-1.8.1.custom/development-bundle/ui/minified/jquery.ui.core.min.js"
type="text/javascript"></script>
<script src="../../Scripts/jqueryui/jquery-ui-1.8.1.custom/development-bundle/ui/minified/jquery.ui.core.min.js"
type="text/javascript"></script>
<script src="../../Scripts/jqueryui/jquery-ui-1.8.1.custom/development-bundle/ui/jquery.ui.widget.js"
type="text/javascript"></script>
<script src="../../Scripts/jqueryui/jquery-ui-1.8.1.custom/development-bundle/ui/jquery.ui.position.js"
type="text/javascript"></script>
<script src="../../Scripts/jqueryui/jquery-ui-1.8.1.custom/development-bundle/ui/jquery.ui.autocomplete.js"
type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="/Scripts/main.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
Categories();
$('#tags1').autocomplete({ //error here
url: '/Tag/TagAutoComplete',
width: 320,
max: 4,
delay: 30,
cacheLength: 1,
scroll: false,
highlight: false
});
});
</script>
That's probably because the script are not found in the indicated location. I would recommend you using helpers for this. For example instead of writing:
<script src="../../Scripts/jqueryui/jquery-ui-1.8.1.custom/development-bundle/ui/minified/jquery.ui.core.min.js"
type="text/javascript"></script>
always write:
<script src="<%= Url.Content("~/scripts/jqueryui/jquery-ui-1.8.1.custom/development-bundle/ui/minified/jquery.ui.core.min.js") %>"
type="text/javascript"></script>
Make sure with FireBug that all the required scripts are properly loaded and that you don't have any javascript errors.
why are you having two of this jquery.ui.core.min.js ?
and I see that you did not include jQuery libray... did you?