I am not that experienced with JQuery, so maybe this is a stupid mistake. However, this has been bugging me for a while and nothing seems to work.
No third party JQuery scripts seem to work in my website (ASP.NET Webforms).
Specifically, I am trying to make Owl Carousel work.
So this is how I load scripts and css in Head (In MasterPage):
<link href="../Content/style.css" rel="stylesheet" />
<link href="../Content/social.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="<%= Page.ResolveClientUrl("~/Content/js/owl.carousel.min.js") %>"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link href="<%= Page.ResolveClientUrl("~/Content/owl.carousel.min.css") %>" rel="stylesheet" />
<link href="<%= Page.ResolveClientUrl("~/Content/owl.theme.default.min.css") %>" rel="stylesheet" />
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<link href="../img/icons/favicon/favicon.ico" rel="shortcut icon" type="image/x-icon" />
I made sure to load Jquery first and then any other plugins. This is my HTML (in Content page):
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script type="text/javascript">
$(document).ready(function () {
console.log("in");
$(".owl-carousel").owlCarousel();
});
</script>
Whatever I do, I get this error:
I googled a lot for it, still with no luck. I tried many plugins and always end with the same error.
I think you are pointing the wrong path to owlCarousel
You should reconsider:
ResolveUrl creates the relative URL to the root.
ResolveClientUrl creates the relative URL to the current page.
I think you should use ResolveUrl instead of ResolveClientUrl to get the correct path.
The code will look like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="<%= Page.ResolveUrl("~/Content/js/owl.carousel.min.js") %>"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link href="<%= Page.ResolveUrl("~/Content/owl.carousel.min.css") %>" rel="stylesheet" />
<link href="<%= Page.ResolveUrl("~/Content/owl.theme.default.min.css") %>" rel="stylesheet" />
In case people with the same problem come across this:
So the problem, as stated by freedomn-m, was that JQuery was loaded twice.
ASP.NET sample website had a scriptmanager that referenced JQuery (Loaded from NuGet by default) without me knowing.
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<%--<asp:ScriptReference Name="jquery" />--%>
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
I just commented the JQuery reference, and everything worked as expected.
Related
My problem is that when I made the website it functioned as it sould but when I put it on the server this block of css and js is shown:
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" />
<meta name="x-stylesheet-fallback-test" content="" class="sr-only" /><script>!function(a,b,c,d){var e,f=document,g=f.getElementsByTagName("SCRIPT"),h=g[g.length-1].previousElementSibling,i=f.defaultView&&f.defaultView.getComputedStyle?f.defaultView.getComputedStyle(h):h.currentStyle;if(i&&i[a]!==b)for(e=0;e<c.length;e++)f.write('<link href="'+c[e]+'" '+d+"/>")}("position","absolute",["\/lib\/bootstrap\/dist\/css\/bootstrap.min.css"], "rel=\u0022stylesheet\u0022 ");</script>
<link rel="stylesheet" href="/css/site.min.css?v=kHvJwvVAK1eJLN4w8xygUR3nbvlLmRwi5yr-OuAO90E" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-nova.min.css" />
<meta name="x-stylesheet-fallback-test" content="" class="k-common-test-class" /><script>!function(a,b,c,d){var e,f=document,g=f.getElementsByTagName("SCRIPT"),h=g[g.length-1].previousElementSibling,i=f.defaultView&&f.defaultView.getComputedStyle?f.defaultView.getComputedStyle(h):h.currentStyle;if(i&&i[a]!==b)for(e=0;e<c.length;e++)f.write('<link href="'+c[e]+'" '+d+"/>")}("opacity","0",["\/lib\/kendo-ui\/styles\/kendo.common-nova.min.css"], "rel=\u0022stylesheet\u0022 ");</script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.nova.min.css" />
<meta name="x-stylesheet-fallback-test" content="" class="k-theme-test-class" /><script>!function(a,b,c,d){var e,f=document,g=f.getElementsByTagName("SCRIPT"),h=g[g.length-1].previousElementSibling,i=f.defaultView&&f.defaultView.getComputedStyle?f.defaultView.getComputedStyle(h):h.currentStyle;if(i&&i[a]!==b)for(e=0;e<c.length;e++)f.write('<link href="'+c[e]+'" '+d+"/>")}("opacity","0",["\/lib\/kendo-ui\/styles\/kendo.nova.min.css"], "rel=\u0022stylesheet\u0022 ");</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js" crossorigin="anonymous" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
</script>
<script>(window.jQuery||document.write("\u003Cscript src=\u0022\/lib\/jquery\/dist\/jquery.min.js\u0022 crossorigin=\u0022anonymous\u0022 integrity=\u0022sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV\u002BrXbYlF2cqB8txI\/8aZajjp4Bqd\u002BV6D5IgvKT\u0022\u003E\u003C\/script\u003E"));</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js" crossorigin="anonymous" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script>(window.jQuery && window.jQuery.fn && window.jQuery.fn.modal||document.write("\u003Cscript src=\u0022\/lib\/bootstrap\/dist\/js\/bootstrap.min.js\u0022 crossorigin=\u0022anonymous\u0022 integrity=\u0022sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa\u0022\u003E\u003C\/script\u003E"));</script>
<script src="/js/site.min.js?v=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js">
</script>
<script>(window.kendo||document.write("\u003Cscript src=\u0022\/lib\/kendo-ui\/js\/kendo.all.min.js\u0022\u003E\u003C\/script\u003E"));</script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.aspnetmvc.min.js">
</script>
<script>(kendo.data.transports['aspnetmvc-ajax']||document.write("\u003Cscript src=\u0022\/lib\/kendo-ui\/js\/kendo.aspnetmvc.min.js\u0022\u003E\u003C\/script\u003E"));</script>
I did chek my layout file and it has the enviroment exclude tag for Develepment, Staging and Production for both css and js separately.
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-nova.min.css"
asp-fallback-test-class="k-common-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.nova.min.css"
asp-fallback-test-class="k-theme-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
</environment>
<environment exclude="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-nova.min.css"
asp-fallback-test-class="k-common-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.nova.min.css"
asp-fallback-test-class="k-theme-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
#* Place Kendo UI scripts after jQuery *#
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
asp-fallback-test="window.kendo">
</script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.aspnetmvc.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
</script>
</environment>
<environment exclude="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
#* Place Kendo UI scripts after jQuery *#
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
asp-fallback-test="window.kendo">
</script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.aspnetmvc.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
</script>
</environment>
So why does the excluded code show up when I publish my website?
Any help would be appreciated
Your final markup appears to be working properly so I'm a bit confused about your exact problem. You have defined two environmental conditionals, but both appear to have exact same markup therefore will render same on both development and production/staging which makes no sense.
First of all you want to define what will appear in development, this should be local unminified versions without fallbacks or versioning:
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-nova.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.nova.css" />
</environment>
Then you define your production markup which can use CDNs, fallbacks, minification and versioning.
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-nova.min.css"
asp-fallback-test-class="k-common-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.nova.min.css"
asp-fallback-test-class="k-theme-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
</environment>
Given environment variables are set properly on target systems, first block will be available in development and the second one in staging/production.
I have recently began testing my JavaScript in Firefox, originally I was working in chrome.
This section of code works fine in chrome:
geocoder = new google.maps.Geocoder();
however the above error is thrown in Firefox, why is that? are there any extra considerations required for Firefox?
Below is my JS and aspx code
var map;
var placesService;
var geocoder;
function loadMap() {
$("#map-canvas").ready(function () {
alert("ready");
geocoder = new google.maps.Geocoder();
alert("1");
map = new google.maps.Map(document.getElementById('map-canvas'),
{
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 12
});
alert("2");
placesService = new google.maps.places.PlacesService(map);
alert("3");
$('#control').hide();
$('#errorLog').hide(); // the error log text box would cause the map to only display half the tiles, delaying the showing of these elements stopped that.
alert("4");
google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
alert("5");
map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById("control"));
map.controls[google.maps.ControlPosition.RIGHT].push(document.getElementById("errorLog"));
$('#control').show();
$('#errorLog').show();
alert("6");
});
alert("7");
$('#locateTown').click(function () { locateTown(); });
$('#scanTown').click(function () { scanTownStart(); });
$('#newSearch').click(function () { backToSearch() });
$('.scanTown').hide();
$('.info').hide();
alert("8");
})
}
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>Title</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server" EnablePartialRendering="true">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
<asp:ScriptReference Path="~/bundles/Page" />
<asp:ScriptReference Path="~/bundles/Utils" />
<asp:ScriptReference Path="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjcLgEOEkdQfwxEyGOu4hHlSY_s-LOGkQ" />
<asp:ScriptReference Path="https://maps.googleapis.com/maps/api/js?libraries=places" />
</Scripts>
</asp:ScriptManager>
<div class="fill flex-container flex-column">
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="uploadResults" EventName="Click" />
</Triggers>
<ContentTemplate>
<div id="control" style="margin-top:0.3%">
<input type="text" id="towntoSearch" class="locateTown" value="Hatfield" />
<input type="button" id="locateTown" class="locateTown" value="Locate Town" />
<select id="selectedTown" class="scanTown" ></select>
<input type="button" id="scanTown" class="scanTown" value="Scan Town" />
<input type="button" id="newSearch" class="scanTown" value="Search Again" />
<input type="text" readonly id="infoDisplay" class="info" />
<asp:Button runat="server" ID="uploadResults" OnClick="uploadResults_Click" ClientIDMode="Static" Text="Upload" CssClass="hidden" />
</div>
<div id="errorLog" style="margin-top:0.3%; margin-right:0.3%">
<textarea cols="20" rows="25" id="errorText"></textarea>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="flex-1" id="map-canvas">MAP</div>
</div>
</form>
</body>
</html>
You get this error because you are loading the Google Maps API twice which causes a conflict. You should see that in your console.
So just add the API once with the library you want:
<asp:ScriptReference Path="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjcLgEOEkdQfwxEyGOu4hHlSY_s-LOGkQ&libraries=places" />
this is my xhtml page where i am using JSF framework when i try this code outside my project it is working but when i try to integrate with my html view it is not working kidly help me to solve this issue
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>EDPMS Process</title>
<link rel="stylesheet" href="css/jquery-ui.css" />
<link rel="stylesheet" href="css/style.css" />
<link href="css/datepicker.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-dropdown.css" />
<link type="text/css" rel="stylesheet" href="css/headfoot.css" />
<link href="css/font-awesome.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.js" type=""></script>
<script src="js/jquery-ui.js" type=""></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="src/main/webapp/js/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="js/bootstrap-datepicker.js" type="text/javascript"> </script>
<script type="text/javascript" src="js/jquery.cookie.min.js"></script>
<script type="text/javascript" src="js/jquery.collapsible.min.js"></script>
<script type="text/javascript" src="js/highlight.pack.js"></script>
<script type="text/javascript" src="js/jquery.cookie.min.js"></script>
<script type="text/javascript" src="js/jquery.collapsible.min.js"></script>
<script type="text/javascript" src="js/highlight.pack.js"></script>
<script name="jquery/bootstrap-datepicker.js" library="primefaces"></script>
<script src="js/warning.js" type=""></script>
<link rel="stylesheet" href="css/mytablestyle.css" />*/
<!-- <link rel="stylesheet" href="css/styles_ti_plus_2.css" /> -->
<h:outputStylesheet value="css/jquery-ui-1.10.2.custom.min.css" />
<!-- <link rel="stylesheet" href="css/jquery-ui-1.10.2.custom.min.css" /> -->
<!-- <h:outputScript name="css/jquery-ui-1.10.2.custom.min.css" /> -->
<!-- <script type="text/javascript" src="js/jquery-ui.js"></script> -->
<!-- <script type="text/javascript" src="js/jquery-1.10.2.js"></script> -->
<!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" /> -->
<!-- <script src="//code.jquery.com/jquery-1.10.2.js"></script> -->
<!-- <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> -->
<!-- <h:outputScript name="js/jquery-ui-1.10.4.custom.min.js"/> -->
<div class="form-group">
<div style="height:500px">
<div>
<h3>Inline</h3>
<p:calendar value="#{calendarView.date1}" mode="inline"/>
<h3>Popup</h3>
<p:calendar value="#{calendarView.date2}" />
<h3>Popup Button</h3>
<p:calendar value="#{calendarView.date3}" showOn="button" />
<p:commandButton value="Submit" update="display" oncomplete="dialog.show()" />
<p:dialog header="Selected Dates" widgetVar="dialog"
showEffect="fold" hideEffect="fold"
height="150">
<h:panelGrid id="display" columns="2" cellpadding="5">
<h:outputText value="Inline Date:" />
<h:outputText value="#{calendarView.date1}">
<f:convertDateTime pattern="MM/dd/yyyy"/>
</h:outputText>
<h:outputText value="Popup Date:" />
<h:outputText value="#{calendarView.date2}">
<f:convertDateTime pattern="MM/dd/yyyy"/>
</h:outputText>
<h:outputText value="Popup Button Date: " />
<h:outputText value="#{calendarView.date3}">
<f:convertDateTime pattern="MM/dd/yyyy"/>
</h:outputText>
</h:panelGrid>
</p:dialog>
</div>
<h:form>
<h3>LEO DATE</h3>
<p:calendar value="#{calendarView.date3}" showOn="button" />
<p:dialog header="Selected Dates" widgetVar="dialog"
showEffect="fold" hideEffect="fold"
height="150">
<h:panelGrid id="display" columns="2" cellpadding="5">
<h:outputText value="Popup Button Date: " />
<h:outputText value="#{calendarView.date3}">
<f:convertDateTime pattern="MM/dd/yyyy"/>
</h:outputText>
</h:panelGrid>
</p:dialog>
</h:form>
</div>
</div>
Java Code
package com.misys.tiplus2.controller;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import org.primefaces.context.RequestContext;
import org.primefaces.event.SelectEvent;
#ManagedBean(name = "calendarView", eager = true)
public class CalendarView {
private Date date1;
private Date date2;
private Date date3;
public Date getDate1() {
return date1;
}
public void setDate1(Date date1) {
this.date1 = date1;
}
public Date getDate2() {
return date2;
}
public void setDate2(Date date2) {
this.date2 = date2;
}
public Date getDate3() {
return date3;
}
public void setDate3(Date date3) {
this.date3 = date3;
}
public void onDateSelect(SelectEvent event) {
FacesContext facesContext = FacesContext.getCurrentInstance();
SimpleDateFormat format = new SimpleDateFormat("dd/MM/yyyy");
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Date Selected", format.format(event.getObject())));
}
public void click() {
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.update("form:display");
requestContext.execute("PF('dlg').show()");
}
}
PrimeFaces is build on top of jQuery, i.a.
Thus, if you really have to include the jQuery API, then make use of the one, that comes along with PrimeFaces to avoid compatibility issues. This means you should use
<h:outputScript library="primefaces" name="jquery/jquery.js" />
instead of <script src="js/jquery-1.9.1.js" type=""></script>
As Kukeltje already mentioned in the comment, you really have to clean up your css and js imports. Antoher example for this is your usage of the date-picker API. You are including it three times or even more:
<script src="src/main/webapp/js/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="js/bootstrap-datepicker.js" type="text/javascript"> </script>
<script name="jquery/bootstrap-datepicker.js" library="primefaces"></script>
However, within the posted JSF view, there is not even the need to include any of these JS-files, as PrimeFaces does the jobs for you and generates the HTML -including the neccessary JS- automatically.
Furthermore you have to check your xhtml. You are not closing the h:head-tag at all, so this should not even render a valid HTML output.
Last but not least: Please describe your problem, if still present after those changes, from a developers point of view. Statements like is not working kidly do not describe the problem in a proper way.
Okay, I'm working on a new personal project and I'm a beginner in Bootstrap.
What I'm trying to do for two days is; inserting dateTimePicker and number Incrementer using bootstrap techniques. And for doing this I searched a lot and tried many different tutorials, examples and none of those worked for me. I think that the problem should be the way of referencing the jquery libraries, javascripts and CSS. This is for the fact that I was trying to insert some glyphicons and they wouldn't appear to. So I'm asking how to correctly insert, arrange this libraries.
Here is what I have until now:
1) On my Site.Master in ASP.NET WebForms I have this references in the head Section:
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Site.css" rel="stylesheet" />
<link href="Content/datepicker.css" rel="stylesheet" />
<link href="Content/prettify.css" rel="stylesheet" />
<!--
<link href="Content/slider.css" rel="stylesheet" />
<link href="Content/iThing.css" rel="stylesheet" />
-->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> -->
<!--
<link href="https://a0.muscache.com/airbnb/static/packages/common_o2.1-024e8f08a0bba6da7891dd4b6c39b7aa.css" media="all" rel="stylesheet" type="text/css" />
<link href="https://a0.muscache.com/airbnb/static/p1/main-pretzel-f7ebfdaf120892e36656cf39bcc3addf.css" media="screen" rel="stylesheet" type="text/css" />
<link href="https://a0.muscache.com/airbnb/static/packages/autocomplete-dd80b94ccaa2e37d6c20412621a9aeac.css" media="screen" rel="stylesheet" type="text/css" />
-->
<!--
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-slider.js"></script>
-->
2) In my Default.aspx page, where I'm trying to insert the datetimePicker and the other things and this page is a WebForm with Master I have this part for DateTimePicker in this occasion:
<div class="col-md-3">
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
3) The Result that I'm getting is the following:
doesn't work and doesn't show the calendar icon to
At the end of Default.aspx i have also included this scripts:
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-datepicker.js"></script>
Somebody knows where I'm doing something wrong?
This guide created by Twinkle can help you set up your files properly: Bootstrap 3.0 with ASP.NET
As for a datepicker, I have used http://www.eyecon.ro/bootstrap-datepicker/
Here's a jsFiddle
HTML
<div class="well">
<input type="text" class="span2" value="02-16-2012" id="targetID" >
</div>
JS
$('#targetID').datepicker({
format: 'mm-dd-yyyy'
});
For some reason that I can not see, I have two nivo sliders on the same page that do not work. Help much appreciated. Below is the well known Nivo Slider code that I am adapting.
Header
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
Nivo Slider 1
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt=""/>
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt=""/>
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt=""/>
</div>
</div>
</div>
Nivo Slider 2
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider2" class="nivoSlider2">
<em><img src="images/up2.jpg" data-thumb="images/toystory2.jpg" alt="" title="Hello, My name is Daisy and I am a mobile beauty specialist covering the Cambridge area." data-transition="fade" />
<img src="images/walle2.jpg" data-thumb="images/up2.jpg" alt="" title="My clients know that when they come to me, they will get the service and the look that they want. I really can help you be that face that gets noticed in the crowd." data-transition="fade" />
<img src="images/nemo2.jpg" data-thumb="images/walle2.jpg" alt="" title="However I am not just a specialist in applying make-up, I offer luxury manicures and pedicures, Sienna X spray tanning, massages and a lot mot" data-transition="fade" />
<img src="images/toystory2.png" data-thumb="images/nemo2.jpg" alt="" title="This is an example of a caption" data-transition="fade" />
</em></div>
</div>
</div>
JavaScript
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({pauseTime:10000});
$('#slider2').nivoSlider({pauseTime:5000});
effect:'fade'
});
</script>
There are a few issues here.
You have duplicate IDs. I doubt this is the problem but it's bad practice.
You have <em> tags around your images in the 2nd slider.
Finally, you have incorrectly specified your effect parameter - this is most likely the cause of the issue
$(window).load(function() {
$('#slider').nivoSlider({pauseTime:10000});
$('#slider2').nivoSlider({
pauseTime:5000,
effect:'fade'
});
});
Please change <div id="wrapper"> for one of the slider and then check.
Note: you shouldn't have same id's for both div's(not only divs) anytime.