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.
Related
I have this datetime picker but only calendar icon wont show, other icons are showing correctly.
<link href='https://apollo.telekomcg.com/fonts/fonts.css' rel='stylesheet' type='text/css'/>
<script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
<script src="Scripts/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/moment.js"></script>
<script src="Scripts/moment.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-combobox.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-switch.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-select.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-filestyle.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-filestyle.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-dialog.js"></script>
<script src="Scripts/bootstrap-datetimepicker.js"></script>
<script src="Scripts/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="Scripts/EArchiveNew.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-multiselect.js"></script>
<script src="Scripts/jquery.js"></script>
<script src="Scripts/colResizable-1.5.min.js"></script>
<%--<link href="Css/VarPL.css" rel="stylesheet" type="text/css" />--%>
<link href="Css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="Css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="Css/bootstrap-switch.css" rel="stylesheet" />
<link href="Css/bootstrap-combobox.css" rel="stylesheet" />
<link href="Css/bootstrap-select.css" rel="stylesheet" />
<link href="Css/bootstrap-datepicker3.css" rel="stylesheet" />
<link href="Css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<link href="Css/bootstrap-datepicker3.standalone.css" rel="stylesheet" />
<link href="Css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet" />
<link href="Css/bootstrap-dialog.css" rel="stylesheet" />
<link href="Css/bootstrap-multiselect.css" rel="stylesheet" />
<link href="Css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="Css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
Here are my scripts. I am using asp.net web forms.
This is my calendar
<div class='input-group date' style="width: 250px !important" data-date-format="YYYY-MM-DD">
<input type='text' id='untilDate' class="form-control" runat="server" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
It wont show and i cant figure out why.
you don't need that many imports, here is an example using your HTML an the essentials of bootstrap 5
EDIT:
your HTMl was just missing the part that displays the icon:
<span class="input-group-text bg-light d-block">
<i class="fa fa-calendar"></i>
</span>
$(function(){
$('#datepicker').datepicker();
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="input-group date" id="datepicker" style="width: 250px !important" data-date-format="yyyy-MM-DD">
<input type='text' id='untilDate' class="form-control" runat="server" />
<span class="input-group-append">
<span class="input-group-text bg-light d-block">
<i class="fa fa-calendar"></i>
</span>
</span>
I hope this helps
If you are using Bootstrap 3 your code should work as expected:
$(function() {
$('#untilDate').datepicker();
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<div class="input-group date" data-provide="datepicker">
<input id="untilDate" type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
Therefore I guess you are using Bootstrap 4 or later. If yes, please note the following changes:
Dropped the Glyphicons icon font. If you need icons, some options are:
the upstream version of Glyphicons
Octicons
Font Awesome
See the Extend page for a list of alternatives. Have additional suggestions? Please open an issue or PR.
So, in this case you need to clearly use Font Awesome or another icon set as suggested by #PatricHume:
$(function() {
$('#untilDate').datepicker();
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<div class="input-group date" data-provide="datepicker">
<input id="untilDate" type="text" class="form-control">
<span class="input-group-append">
<span class="input-group-text d-block">
<i class="fa fa-calendar"></i>
</span>
</span>
</div>
I just wanted to say that I managed to fix this. The fix that I have done is probably stupid and I don't know why this works. In bootsrap.css and bootstrap.min.js I commented glyphicon-calendar:before{} and it showed on my calendar. If someone can explain it would be good.
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 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>
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