I am Trying to use select2 with <select></select> control and i am just not able to get it right. i am posting my script below.
My control.
<select id="select2" runat="server" multiple="true" width="170px"></select>
The scripts i am importing.
<script type="text/javascript" src="../Scripts/select2.min.js" ></script>
<script type="text/javascript" src="../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="../Scripts/select2.min.css" />
$("#select.<%=select2.ClientID%>").select2();
and i am populating my control from code behind on page load.
the error i get is Uncaught TypeError: undefined is not a function
and the output i get is.
what i want is a drop down list where users can select multiple values from the populated values.
by the way i am using the latest version of select2.js
I test it and it works for me
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.1/js/select2.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.1/css/select2.css" rel="stylesheet" />
<select id="select2" runat="server" multiple="true" width="170px">
<option value="11111">11111</option>
<option value="22222">22222</option>
<option value="33333">33333</option>
<option value="44444">44444</option>
</select>
<script type="text/javascript">
$( "#<%=select2.ClientID%>" ).select2();
</script>
Related
i have dropdownlist filled with data from database i used Jquery to have multiselect option.
i want to append the checked values to array so i can insert it to the database. how can i do it using jquery or c#?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('[id*=lstAteend]').multiselect({
includeSelectAllOption: true
});
});
</script>
<asp:ListBox ID="lstAteend" runat="server" SelectionMode="Multiple" Width="150px"></asp:ListBox>
Sample Fiddle
I add a save button for sample to get all selected value :
<input type="button" id="btnget" value="Save" />
and On jquery :
$(document).ready(function() {
$('#teams').multiselect();
$('#btnget').click(function() {
alert($('#teams').val());
})
});
You Get a selected value in comma separator.
I am a noob at jQuery, so please help me out.
I am using Visual Studio 2005 with ASP.net 2 (I know, we're planning an upgrade soon!)
I am simply trying to embedd the DateBox FlipBox control on my website, as the users will be using the website via their iPads.
How do I go about getting this to work? Will it work?
I have placed this in my master page.
<head runat="server">
<link href="http://cdn.jtsage.com/jtsage-datebox/-4.0.0/jtsage-datebox-4.0.0.jqueryui.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.jtsage.com/jtsage-datebox/-4.0.0/jtsage-datebox-4.0.0.jqueryui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://cdn.jtsage.com/jtsage-datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<title>Tec-NQ Boarding Register</title>
<asp:ContentPlaceHolder id="ContentPlaceHolderHead" runat="server">
</asp:ContentPlaceHolder>
</head>
And in my ASPx page I've simply put an <input> statement, as per the sample instructions here.
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
But all I get is a textbox! Where/how do I get the date control to show up?
I had a closer look at that link, and there are heaps of <div> statements outlining the actual control and a calendar icon.
<div class="input-group"><input type="text" data-options="{"mode":"calbox", "useInline":false, "useInlineAlign": "right"}" data-role="datebox" id="in1" class="form-control" readonly="readonly"><div class="input-group-addon" title="Open Date Picker"><span class=" glyphicon glyphicon-calendar"></span></div></div>
I've even tried to paste that code directly into my ASPX page, but I get a whole heap of junk.
How do you get this thing to work please? It's driving me nuts.
Thanks
The answer was staring at my face!
https access priveleges
Once I downloaded the js files directly and stored them locally, everything worked off the bat!
I want some radio buttons styled the way JQuery does it. I've now got demo code working that shows that in a minimal HTML page, but I need to do that now in an ASP.NET C# page. The following code works fine, where REDACTED points to a local-network server:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Radios</title>
<!-- CSS -->
<link rel="stylesheet" href="http://REDACTED/_Kris_Sandbox/css/jquery/jquery-ui.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<!-- JQuery -->
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
</head>
<body>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
</form>
</body>
</html>
But the following shows me ordinary, non-JQuery-styled radio buttons. The date picker does work (showing that JQuery is running) and messages show up as a pop-up and in the console, showing that the function is running, but the buttons aren't being styled.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="travel_temp.aspx.cs" Inherits="_idx" %>
<!DOCTYPE html>
<html>
<head id="hgs_head" runat="server">
<meta charset="utf-8">
<title>JQuery Test</title>
<!-- The following links have been commented out. The internal links point to copies of JQueryUI files that exist and are freshly downloaded from the makers' site. -->
<!-- CSS -->
<link rel="stylesheet" href="http://REDACTED/_Kris_Sandbox/css/jquery/jquery-ui.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<!-- JQuery -->
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-ui.min.js"></script>
<!-- Radio button styling -->
<script>
$(function () {
console.log("ready!");
alert("Hi!");
$("radio").buttonset();
});
</script>
</head>
<body id="hgs_body" runat="server">
<p>Date Picker using JQuery:</p>
<input type="text" name="date" id="date"><script>$("#date").datepicker();</script>
<!-- MAIN CONTENT -->
<div id="main">
<p>Radio Buttons using JQuery:</p>
<form class="messages" id="messages" runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server"/>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">Twilight</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Dash</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Rarity</label>
</div>
</form>
</div>
</body>
</html>
I figure the problem has to do with this page being ASP.NET with the buttons being created through an .aspx page (the .aspx.cs page is blanked out for demo purposes by the way). But the point of using "$(function" is that it only runs once the page is fully assembled, so the radio buttons should already be there.
What do I need to do, to make the styling work?
(Follow-up note: I didn't do it in this example, but the actual buttons are ASP.NET code. That wasn't the problem though; see answer. If you're having the same problem note that you apparently need to call the JQuery function to style them again if the page updates.)
During page load, you are assigning the buttonset property to element which is of type tag : radio. No such element exists in your DOM. You need to target the div where you want to apply the buttonset. In short, you are missing '#' in your selector.
$(function () {
console.log("ready!");
alert("Hi!");
$("#radio").buttonset();
});
I need to output the following... within a User Control. Currently gets outputted within the .ascx file, but I need to output it in the .ascx.cs file instead to change a control.
The current code in the .ascx file is this:
<link rel="stylesheet" href="<%=MMG.Global.FileHelper.GetCSSVersion("/scripts/jquery-select2/select2.css") %>" />
<link rel="stylesheet" href="<%=MMG.Global.FileHelper.GetCSSVersion("/styles/custom-theme/jquery-ui-1.9.1.custom.css") %>" />
<link href="<%=MMG.Global.FileHelper.GetCSSVersion("/styles/styles.css") %>" type="text/css" rel="stylesheet" media="all" />
<link href="<%=MMG.Global.FileHelper.GetCSSVersion("/styles/print.css") %>" type="text/css" rel="stylesheet" media="print" />
<link rel="stylesheet" href="<%=MMG.Global.FileHelper.GetCSSVersion("/scripts/jquery-fancybox/jquery.fancybox.css") %>" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--<script type="text/javascript" src="/scripts/jquery.stickyfooter.js"></script>
<script type="text/javascript" src="/scripts/modernizr.js"></script>
<script type="text/javascript" src="/scripts/jquery-select2/select2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="/scripts/jquery.cycle.all.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-tab.js"></script>
<script type="text/javascript" src="/scripts/jquery-ui-1.9.1.custom.min.js"></script>-->
<%--<script type="text/javascript" src="http://tcadops.ca/consumer/adtagtc.js"></script>--%>
<script type="text/javascript" src="/scripts/adtagtc_old.js"></script>
<!-- Smooth Div Scroll Plugin
<script type="text/javascript" src="/scripts/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.kinetic.js"></script>
<script type="text/javascript" src="/scripts/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.smoothdivscroll-1.3-min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-datepicker.js"></script>
-->
<script type="text/javascript" src="//use.typekit.net/qrs7pfm.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
<!--<script type="text/javascript" src="/scripts/jquery.isotope.min.js"></script>-->
<script type="text/javascript" src="/scripts/jquery-fancybox/jquery.fancybox.pack.js"></script>
<meta name="viewport" content="width=1024" />
But it will need to change to different <script> tags depending upon a statement within the .ascx.cs file. How would I change the above code to something else if using within a .ascx.cs file in an if statement?
I thought about Response.Write, but this code has functions also. Maybe there is a better way to do this?
In your .ascx file:
<% if (someCondition) { %>
<script>....</script>
<% }
else { %>
<script>(Some other script)</script>
<% } %>
Then in your code behind (ascx.cs) set the value of someCondition
Since you are loading dynamically, keep your code clean and use the conventions provided by ASP.Net. You can do this in either code-behind (or in ASCX if you prefer).
ClientScriptManager s = Page.ClientScript;
if(somecondition){
s.RegisterClientScriptInclude("myscript", "[url to script file]");
}else{
s.RegisterClientScriptInclude("myscript", "[url to other script file]");
}
I have an application that contains this code:
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/facebox.js" type="text/javascript"></script>
<link href="facebox.css" rel="stylesheet" type="text/css" />
<script language="Javascript">
$(document).ready(function () {
$('a[rel=facebox]').facebox();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<a rel="facebox" href="WebForm1.aspx">Open Facebox Dialog with 0 opacity</a>
</form>
</body>
</html>
In this one the facebox works very well,
Im applying the same principle in another application in which i render my anchor
dynamically :
link = new HtmlGenericControl("a");
link.InnerText = Path.GetFileName(value);
link.Attributes.Add("rel", "facebox");
link.Attributes.Add("href", "WebForm1.aspx");
panel.Controls.Add(link);<br/>
and ive got this code on my page
<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/facebox.js"></script>
<link href="css/facebox.css" rel="stylesheet" type="text/css" />
<script language="Javascript">
$(document).ready(function () {
$('a[rel=facebox]').facebox();
});
</script>
In this one Im having an error on facebox(). Object doesnt support this property or method.Why m i getting this error although i do have the same code in another application
and it works perfectly there ?!?!
Thanks alot
And, is the path js/facebox.js exists inside the page location?
Remember that the link to the js file will be relative to the current page location since you are not providing ab absolute path to the file and probabliy you are using a page in a diferent location from the Master.Page of the site root .
I dont know why, but when i put the script tage inside the body it worked