I'm using asp.net and bootstrap. I've got a dropdownlist that I want to deuglify using bootstrap-select. The problem is that if I click the dropdownlist, it doesn't show its content, but if I press a key when it's focused it will display the contents of the dropdownlist.
Head:
<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-select.min.js" />
<script type="text/javascript" src="/Scripts/bootstrap.js"></script>
<link rel="stylesheet" href="/css/bootstrap.css" />
<link rel="stylesheet" href="/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="/css/bootstrap.min.css" />
JS:
<script type="text/javascript">
$(document).ready(function () {
$('select').selectpicker();
});
</script>
The JS is located after the body.
I wrestled with this problem tonight, although I don't use anything like asp.net. I discovered that in some circumstances the underlying bootstrap events were not firing.
Bootstrap selects use a button to toggle the list of menu items, and use delegation to bind events to to the toggle button. Sometimes when bootstrap-select generates the toggle button the delegation does not work properly.
I found that by using the JavaScript interface on the toggle button after bootstrap-select created it, all was well:
$('select').selectpicker();
$('.dropdown-toggle').dropdown();
Bootstrap Dropdown Javascript API
Related
In Site.Master page, I have references to a few CSS and JS files.
When a page in a subfolder uses this master page, I can see that the css file's path gets correctly translated, by adding necessary ../ in front of it, but not for JS files which results in 404 errors when viewed in Chrome's debug window.
I tired using ~ with runat=server to force translation; didn't work; tried using Page.ResolveURL that gives no error message but seems to break the script and not sure how I can this to work.
In Site.Master:
<!-- Bootstrap Core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
This gets correctly displayed as the following for a .aspx page that is in a sub-folder:
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
for JS files, none of the following works.
This one shows just as is for the same file in sub-folder:
<!-- Bootstrap Core JavaScript -->
<script src="assets/scripts/bootstrap.min.js"></script>
This one shows no 404 erro; a "/<sitename>/" gets prepended to path but script does not work (e.g. drop down menu does not drop)
<!-- Bootstrap Core JavaScript -->
<script src='<%= Page.ResolveUrl("~/assets/scripts/bootstrap.min.js") %>'></script>
And this one, I don't think I can do this!
<!-- Bootstrap Core JavaScript -->
<script runat="server" src="~/assets/scripts/bootstrap.min.js"></script>
I found the answer here. The post offers a few options but what was listed as Edit2 of the answer was what worked for me:
<!-- jQuery -->
<script type="text/javascript" src='<%= Page.ResolveClientUrl("~/assets/scripts/jquery.js") %>' ></script>
<!-- Bootstrap Core JavaScript -->
<script type="text/javascript" src='<%= Page.ResolveClientUrl("~/assets/scripts/bootstrap.min.js") %>' ></script>
Anyone have any experience on doing a popup date picker
with multilingual support, based on the culture itself automatically?
I do try to do it but I am failed to do it. Anyone have any resources that can do it? I am mainly doing for two languages which is en-US and zh-TW. Thanks.
You are not adding the Jquery and CSS reference, that's why you are not able to see the Jquery Calendar.
Try the below code:-
Jquery and CSS reference
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Also, you must call the selectori.e ID for it to work
$(function () {
$("#datepicker").datepicker();
});
See the Working Demo
If I add jquery ui reference as
<script src="/_Docs/_Altyapi/JqueryUi/jquery-ui.1.8.21.min.js" type="text/javascript"></script>
then tagit editor works fine(just under tag editor input), like:
But, if I use references like
<script src="/_Docs/_Altyapi/JqueryUi/ui/jquery.ui.core.min.js" type="text/javascript"></script>
<script src="/_Docs/_Altyapi/JqueryUi/ui/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="/_Docs/_Altyapi/JqueryUi/ui/jquery.ui.autocomplete.min.js" type="text/javascript"></script>
then, it doesn't work(as can be seen in photo2, custom autocomplete is at the top of page), like:
Include the position JS file as well to get autocomplete to work. Probably:
<script src="/_Docs/_Altyapi/JqueryUi/ui/jquery.ui.position.min.js" type="text/javascript"></script>
For future reference, you can always go to the widget's documentation page under overview and you'll see the dependencies for the widget.
I've been trying to find out what's going on with my page for more than an hour.. What I'm trying to do here is to call a javascript function when the page loads, but for some reason it says "object required" then its pointing to my onload event in the body tag. This is what I have..
<head id="Head1" runat="server">
<!-- JAVASCRIPT -->
<script src="JScript/jquery-1.2.6.pack.js" language="javascript" type="text/javascript"></script>
<script src="JScript/stepcarousel.js" language="javascript" type="text/javascript"></script>
<script src="JScript/Carousel.js" language="javascript" type="text/javascript"></script>
<script src="JScript/TopNav.js" language="javascript" type="text/javascript"></script>
<!-- CSS -->
<link href="Style/audiorage.css" rel="stylesheet" type="text/css" />
<link href="Style/carousel.css" rel="stylesheet" type="text/css" />
<link href="Style/tabs.css" rel="stylesheet" type="text/css" />
<title>Audio Rage - Home</title>
</head>
<body onload="javascript:TopNavPageInitialize();">
<form id="form1" runat="server">
<!-- HIDDENFIELDS & SCRIPTS -->
<input type="hidden" value="Main Navigation" id="hdnTabActiveOnLoad" />
and I have this files in this structure
localhost/mytest/JScript/jquery-1.2.6.pack.js
localhost/mytest/JScript/stepcarousel.js
localhost/mytest/JScript/Carousel.js
localhost/mytest/JScript/TopNav.js
localhost/mytest/mypage.aspx
My TopNav.JS has this function
function TopNavPageInitialize()
I also get "Unexpected call to method or property access." in my carousel but I'm not really worried about it I think if I can fix this maybe that 2nd error that I'm getting can be fixed. Thanks!
I'm confused. What am I missing. Thanks.
Since you're using jQuery:
$(document).ready(function(){
// Your code here
});
use that or
$(window).load(function () {
// run code
});
that--depending on what you're going for.
Ready just means the dom is ready but images aren't loaded. Load means everything is done loading.
Of course, it sounds like you've got other issues. But this is a much better option than using inline onload events.
like?
$(window).load(function() {
alert('x');
});
$(window).load(function funcName() {
alert('x');
});
both says object expected
It looks to me like your scripts aren't loading properly.
To really see what's going on use either Firebug in Firefox, or the developer tools (press F12) in IE8. (If you're still using IE7/6 google IE Developer Toolbar - it will be a start).
Once you're using one of those, you can then see what scripts are being loaded, or whether you're getting 404's or similar for them.
Also, as an aside, you don't need the
language="javascript"
attributes any more.
Because i want to set a Extender (Calendar from the AJAX Controls toolkit) on a textbox,
I have to change the code from
<%= Html.TextBox("name") %>
to
<asp:TextBox ...>
But how can i bind the attribute "name" on the element?
Thank you
Have you tried using the jQuery DatePicker? It's much more friendly with MVC than the standard ASP controls and related extenders.
<%= Html.TextBox( "name" ) %>
<script type="text/javascript">
$(function() {
$('[name=name]').datepicker();
});
</script>
It's possible to use the asp.net Ajax Beta to create a client side Calendar.
See here:
http://www.asp.net/ajaxlibrary/HOW%20TO%20Use%20the%20Calendar%20Control.ashx
Strangely this version of the asp.net ajax library uses JQuery as well.
I would personally use the JQuery version... But the new asp.net ajax library is trying to evolve so that it works better with 'pure' html and asp.net mvc.
Ok,
I included the js from the google api, also the css.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/overcast/jquery-ui.css" type="text/css" rel="Stylesheet" class="ui-theme" />
Then set the datepicker like this:
<script type="text/javascript">
$(document).ready(function() {
$("#startDate").datepicker();
});
</script>