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.
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 have an UL that I control using hide and show. The problem is that when I click on level1 it shows level2 for only a moment before it disappears, I believe this is because of a postback or something. The functionality works but it just doesnt stay like it. I need to be able to toggle the items in the list to show and hide them.
<script>
$(function(){
$('.level2').hide();
$('.level3').hide();
$('.level1').click(function () {
$('.level2').show();
return false;
$('level2').click(function () {
$('.level3').show();
return false;
$(this).find('ul').slideToggle();
});
})
}
)
</script>
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<title></title>
<link href="styles/Menu.css" rel="stylesheet" />
<script type="text/javascript">
function openNewWin(url) {
var x = window.open(url, 'mynewwin', 'toolbar=no,directories=no,location=no,menubar=no,left=0,top=0,resizable=no,status=no');
x.focus();
}
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<script>
$(function(){
$('.level2').hide();
$('.level3').hide();
$('.level1').click(function () {
$('.level2').show();
return false;
$('level2').click(function () {
$('.level3').show();
return false;
$(this).find('ul').slideToggle();
});
})
}
)
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="menu" class="MenuBar">
<asp:Menu ID="Menu1" runat="server" CssClass="mainmenu" StaticDisplayLevels="3" Target="_blank" StaticEnableDefaultPopOutImage="False" StaticSubMenuIndent="0px" >
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="level1"/>
<asp:MenuItemStyle CssClass="level2"/>
<asp:MenuItemStyle CssClass="level3" />
<asp:MenuItemStyle CssClass="level4" />
</LevelMenuItemStyles>
<StaticMenuItemStyle CssClass="staticItem" />
</asp:Menu>
</div>
</form>
</body>
</html>
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);
}
};
i have a list:
<asp:ListBox ID="lstProblems" runat="server" SelectionMode="Multiple"></asp:ListBox>
and i am populating it this way:
$(function() {
$.get('../file.txt', function(data) {
var output = data.split('\n'),
tmp = '';
for (i = 0; i < output.length; i++) {
tmp += '<option value=' + output[i] + '>' + output[i] + '</option>';
}
$('#lstProblems').html(tmp);
});
});
i would like to know how i can convert this to be a regular HTML list? i need this because of this question: increase height of listbox in IE7
update
i changed the html to:
<select size="4" name="lstProblems" multiple="multiple" id="lstProblems" CssClass="list-problems">
and added this to css:
.list-problems {
height:600px !important;
display:inline-block;
}
neither IE nor chrome noticed a difference
could there be something overriding this?
here's everything that im including:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" type="text/javascript"></script>
<link href="../niceforms/niceforms-default.css" rel="stylesheet" type="text/css" />
<script src="../niceforms/niceforms.js" type="text/javascript"></script>
<link href="../jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
here's the source from IE: http://pastebin.com/7vsF11Yq
Just add a class to the ASP.NET control and then use CSS as per the other question.
The ASP.NET control will be rendered as a standard HTML list with a css class specified.
So change your markup to
<asp:ListBox ID="lstProblems" runat="server" SelectionMode="Multiple" CssClass="list-problems"></asp:ListBox>
And then use the following CSS
.list-problems {
height:200px !important;
display:inline-block;
}