I try to use timepickr plugin, from http://haineault.com/media/jquery/ui-timepickr/page/
my headers:
<script src="<%=ResolveUrl("~/Scripts/jquery-1.4.2.min.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/Scripts/jquery-ui-1.8.2.custom.min.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/Scripts/jquery.utils.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/Scripts/jquery.strings.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/Scripts/ui.timepickr.js")%>" type="text/javascript"></script>
my view:
<input type="text" id="hourstime" style=" font-family:Arial;width: 47px; vertical-align:inherit;margin:1;"/>
and jquery:
$(document).ready(function () {
$('#hourstime').timepickr();
});
So, it fails with error:
Uncaught TypeError: Cannot call method 'call' of undefined
Any ideas?
You also need to include jquery.timepickr.js. Since this plugin has 3 files,
2 JS [jquery.timepickr.js, ui.timepickr.js] and
1 CSS [jquery.timepickr.css]
This plugin didn't support jQueryUI >= 1.8
Use updated plugin for jQueryUI 1.8: http://bililite.nfshost.com/blog/2009/07/09/updating-timepickr/
Related
I have a problem with bundling dataTables library. This is what I've got now:
//other bundles (bootstrap etc.)
bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
"~/Scripts/jquery.dataTables.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/DataTables/css/dataTables.bootstrap.css",
"~/Content/DataTables/css/jquery.dataTables.css"));
and in _Layout.cshtml:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="~/Content/fontawesome-all.min.css" rel="stylesheet" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<head>
...
</head>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/datatables")
#RenderSection("scripts", required: false)
Unfortunately it doesn't work, table is not modified. Another issue is that when I press F12 to inspect my website I don't see Scripts/datatables attached on the end, only this:
<script src="/Scripts/jquery-3.5.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
additionally I can see th error: Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument....
my JS looks like this:
$('document').ready(function () {
$('#myTable').DataTable({
"order": [[3, "desc"]]
});
});
Your /Scripts/jquery.dataTables.js file does not seem to be loading. That is why you see the error on the console.
Can you try to load the datatable library with <script src="/Scripts/jquery.dataTables.js"></script> referance instead of the existing #Scripts.Render("~/bundles/datatables")?
Also you seem to be loading jquery library twice!?
I've seen this question has been asked a few times but nothing has been able to help.
On my cshtml file I have the following:
<div class="col-lg-8">
#Html.Raw(SelectListHelper.CreateDropDownList("ddlStateCode", Application.DataCache.GetStatesAsLookup()))
</div>
<div class="col-lg-8">
<select class="dropdown" id="ddlContactList"></select>
</div>
The Razor dropdown renders a select tag just the same as ddlContactList, aside from the ID.
ddlContactList gets populated via AJAX.
ddlStateCode throws the error when I click on it, and ddlContactList works just fine.
We are including the following scripts:
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/jsrender.min.js"></script>
<script type="text/javascript" src="~/Scripts/globalize.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.easing.min.js"></script>
<script type="text/javascript" src="~/Scripts/ej.widgets.all-latest.min.js"></script>
<script type="text/javascript" src="~/Scripts/App/image-changer.js"></script>
<script type="text/javascript" src="~/Scripts/App/nav.js"></script>
<script type="text/javascript" src="~/Scripts/App/popup.js"></script>
<script type="text/javascript" src="~/Scripts/App/scrollbar.js"></script>
<script type="text/javascript" src="~/Scripts/App/show_hide.js"></script>
<script type="text/javascript" src="~/Scripts/App/jqueryExtensions.js"></script>
<script type="text/javascript" src="~/Scripts/App/helper_functions.js"></script>
<script type="text/javascript" src="~/Scripts/App/ConfirmPopup.js"></script>
<script type="text/javascript" src="~/Scripts/App/global_error_handlers.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.fitvids.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.bxslider.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.easydropdown.js"></script>
The problem occurs in jQuery.easydropdown.js on the below method:
close: function(){
var self = this;
self.$container.removeClass('open'); // error happens here
self.$scrollWrapper.css('height','0px');
self.focusIndex = self.selected.index;
self.query = '';
self.down = false;
},
I don't think the jQuery UI file and the jQuery file versions need to match but I can't find matching versions to try. Any ideas?
EasyDropDown breaks on a selectlist that is empty on page load. Removing the encapsulating function in the javascript file and firing the instantiate method after the AJAX call fixes it.
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
Ok, this is strange. I would hope it's something I'm doing wrong and not that MS has two technologies that simply don't work together. (UPDATE: See bottom of post for Script tag order in HEAD section)
I'm trying to use the dataView template and client-side validation. If I include a reference to:
<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.js" type="text/javascript"></script>
by itself, the dataview template works fine. but if I put in the following references:
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
then I get the following error:
> Error: Type._registerScript is not a
> function Source File:
> http://ajax.microsoft.com/ajax/beta/0911/MicrosoftAjaxTemplates.js
> Line: 1
and:
> Error: Sys.get("$listings") is null
> Source File:
> http://localhost:12370/Listings Line:
> 76
Here's the code calling the dataview:
$(document).ready(function () {
LoadMap();
Sys.require([Sys.components.dataView, Sys.scripts.jQuery], function() {
$("#listings").dataView();
Sys.get("$listings").set_data(listings.Data);
updateMap(listings.Data);
});
});
I would really appreciate any help with this one.
Thanks!
UPDATE:
I've tried moving around the order of the last 4 script tags, but to no avail.
You need to ensure that your reference to "jquery.validate.min.js" is AFTER your reference to "jquery.min.js" (or whatever version of the jQuery library you are using). You haven't listed that in your code sample.
Well, I ended up getting jquery validation to work and it doesn't have any conflicts with Start.js. So my script tags end up looking like such:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcJQueryValidation.js" type="text/javascript"></script>
The strange thing is, I had to go find the MicrosoftMvcJQueryValidation.js file on the web in someone's example, as it wasn't included in the Scripts folder when I created the solution. Strange.